Rows are the foundation of your SamCart Product Page. Learn all about how they work and ways you can customize them!
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 (outlined in blue) is housing a Headline block. It's currently selected for editing in the Content Builder as its border and menu icons are exposed.
Interacting With a Row
Creating a Row
Create a new Row by dragging any icon within the Content Block tab 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 will expose the Row's border and menus, outlined in blue.
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 the overlapping pages icon in the top right:
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 trashcan 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 undecided 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:
Tip: 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.
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 your Background Image, you will first want to add a Background Color in addition to your Background Image. After adding a 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 for 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.