Sections are the building blocks of SamCart's Full Width Templates. Learn all about how they work and ways you can customize them!
Sections are full width containers that hold your page's content. By stacking sections on top of one another, you can organize your page and create visual interest.
Here's what a Section looks like:
This Section is currently selected for editing in the Content Builder as its orange border and menu is exposed.
Interacting with a Section
Creating a Section
Create a new section by dragging a New Section onto your page:
Selecting a Section
To select a Section, simply move your cursor over it in the Content Builder. This exposes the Section's border and menus.
Duplicating a Section
To duplicate your Section, click this overlapping pages button in the top right:
This places an exact copy of the Section beneath the one you've duplicated. You can edit the newly created Section without affecting the Section it came from.
Deleting a Section
To delete a Section, click the trashcan icon:
Tip: Make sure you have the correct Section selected, as this deletes all the Rows inside the Section and cannot be undone.
Clicking the gear icon reveals a number of different Settings for your Section:
Let's go through each of them...
To add an image that sits behind the Rows and Content Blocks in your Section, 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.
Here is an example of a Section with a Background Image. In this example, there is a Row containing Headline and Text Content Blocks that is sitting on top of the Section:
To adjust the position of the image in your Section, 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 Rows and Content Blocks in the foreground, which leads to more of the image being revealed as your customers scroll through your page.
To change the background color of your Section, 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 add space on top of the Rows inside of your Section, increase the Top Padding slider. The Default is 0.
To add space beneath the Rows inside of your Section, increase the Bottom Padding slider. The Default is 0.
To add space on the left/right of the Rows inside of your Section, increase the Left/Right Padding slider. The Default is 0.