Using sections

Sections are the basic components of templates. You can add, rearrange, and customize sections to create the layout and content of your pages.

Add sections

Sections are listed in the theme editor sidebar in the order they appear on the page.

• Click the (+) Add section button in the theme editor sidebar.

• Use the drag handles (⋮⋮) to change the order of your sections and blocks

• Use the Remove section button to delete them or click the eye icon to hide them.

Add blocks

Most sections are made up of individual Blocks for text, media, buttons, or other content, which are nested under sections in the editor panel.

• Click (+) Add block button to add or select the type of block you wish to add.

• Click the block to open the block settings.

Section header

Some sections have a Section header that appears above the main content. Other section may use content blocks or overlay text for the main headings.

Click the section to find the header settings.

• Add a heading, text, and optional link.

• To remove the section header, delete any text in these fields.

Click the section to find settings

Section styles

All sections include general style options for Colors and Spacing. In the editor side panel, click the section to find settings for Color scheme, Section width, and Section padding.

Color schemes

You can change the section or block colors by assigning a color scheme using the color scheme picker.

Click the section or block to find the Color scheme option.

Edit color schemes

You can add and define different color schemes in Theme settings > Colors. These color schemes will appear as options in section and block settings.

In Theme settings, click a color scheme to edit its color options. Click (+) Add scheme to add a new color scheme.

Color scheme options

Every color scheme has the following color options.

Overlay colors

When text appears over images or videos, an overlay color is used to provide contrast between the text and background, keeping it readable and accessible for everyone.

Click the section or block to find settings

Section width

Change the Section width to adjust how far the section spans across the page. In the section settings, find Width options under Section.

• The page width has a fixed width of 1600px

• Other width options adapt to the visitor's browser width

Available page width options vary depending on the type of section. The Full width (background only) is available only for Slideshow, Image hero, Video hero, Newsletter and Collection banner.

Page width

Section background and content span the page width (1600px).

Full width (padded)

Section background spans the screen's full width with some padding, and content spans the width of the background.

Full width (background only)

Section background media spans the full screen and content spans the page width (1600px)

Full width

Both section background and content span the screen's full width.

Section padding

Use the sliders to add space at the top and bottom of the section. Set to 0 to remove spacing.