Rows

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 is housing a Headline block. It's currently selected for editing in the Content Builder as its border and menus are exposed.

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: 

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 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. 

C
Claire is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.