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:
To split your Row into Columns, click this button:
Then, choose how you'd like to divide your Row (1) and select Done (2):
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.
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):
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.
To reduce the width of the Content Blocks inside your Row, reduce the Row Width slider. The Default is 100.