Rows are the foundation of every SamCart Product Page. They are horizontal containers that house every piece of content available in the Content Builder

Any Content Block dragged into the body of your Product Page, whether it's a Core Element or a Widget, will automatically start a new Row

Here's what a Row looks like: 

The above Row is housing a Headline block. It's currently selected for editing in the Content-Builder as its border and menus are exposed.

Here's a Look At Multiple Rows on a Completed Page:

Interacting With a Row: 

• Creating a Row:

Create a new Row by dragging any Content Block into the body of your Product Page: 

• Selecting a Row:

To select a Row, simply move your cursor over it in the Content-Builder. This exposes the Rows' border and menus. 

• Moving a Row Up or Down:

A completed Product Page is an arrangement of vertically stacked Rows. To move the position of your Row up or down on your page, click the Up or Down Arrows

• Duplicating a Row:

To duplicate your Row, click this button: 

This places an exact copy of the Row beneath the one you've duplicated. You can edit the newly created Row without affecting the Row it came from. 

• Dividing Rows Into Columns:

Rows don't have to house just one Content Block. You can divide them horizontally into a number of different Columns, each of which can house its own Content Block

To split your Row into Columns, click this button: 

Then, choose how you'd like to divide your Row (1) and select Done (2)

The selection shown above divides the Row into two Columns, with the Column on the left wider than the one on the right. 

You can drag any Content Block into the newly created Column, and even stack multiple Content Blocks on top of each other in a single Column

Here's what the above settings looks like in the Content Builder (with a Text (1) block in the left Column and a Text block (2) and Image (3) in the right Column): 

And here's a Row with two Columns, each featuring an Image block (1) and two Text blocks (2 & 3) on a live Product Page: 

• Deleting a Row: 

To delete a Row, click the trash can icon: 

Tip: Make sure you have the correct Row selected, as this deletes all the Columns/Content Blocks inside the Row and cannot be undone. 

Row Settings:

Clicking the gear icon reveals a number of different Settings for your Row

Let's go through each of them...

• Background Image

To add an image that sits behind the Content Blocks in your Row, either drag an image file from your computer into the Background Image box, or choose one from your Image Library

If you're not set on using a specific image, click on My Image Library followed by Stock Images, where you can browse Unsplash's entire library of royalty free stock photos for use on your Product Page. 

Search for what you're looking for, select an image you like, and click Use Image

To adjust the position of the image in your Row, scroll through the options in the Background Image Settings menu: 

If your image is large, try using the Full Center (Parallax) setting. This causes the Background Image to scroll slower than the Content Blocks in the foreground, which leads to more of the image being revealed as your customers scroll through your page. Here's how it looks: 

• Background Color

To change the background color of your Row, click on the rectangular button (1) and use the slider and color picker (2) to select a color. You can also type a Hex Code into the text box (3): 

• Opacity

To adjust the translucence of either your Background Image or Background Color, slide the Opacity slider from 0 - 1. The Default is 0: 

If you have a lot of text in your row, we strongly recommend adjusting the Opacity to 0.5 or above so the purpose of legibility. 

• Top Padding

To add space on top of the Content Blocks inside of your Row, increase the Top Padding slider. The Default is 0. 

• Bottom Padding 

To add space beneath the Content Blocks inside of your Row, increase the Bottom Padding slider. The Default is 0. 

• Top Margin

To add space on top of the outside of your entire Row, increase the Top Margin slider. The Default is 0. 

• Bottom Margin

To add space beneath the outside of your entire Row, increase the Bottom Margin slider. The Default is 0. 

• Width

To reduce the width of the Content Blocks inside your Row, reduce the Row Width slider. The Default is 100. 

🚀🚀🚀

Did this answer your question?