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.
Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in sections using the same template.
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, subheading, or text.
Add optional button link
Change the heading size and alignment
To remove the section header, delete any text in these fields
Click the section to find settings
Heading
Change or remove the title of the section.
Heading tag
Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance.
Heading size
Set the heading text from XX-Small to Display x-large. You can set the base heading size in Theme settings > Typography.
Text
Add multiple lines of rich text below the heading.
Text size
Set the size from to XX-small to 5x-large.
Heading alignment
Position heading text to the Left, Center, or Right above section content.
Button link
Select or paste a URL for the button.
Button label
Enter text to display a button label. Leave this field blank to remove the button.
Section styles
Sections include general style options. These settings appear in almost all sections, with some options depending on the section type.
In the editor side panel, click the section to find style options for:
section colors
section width
top and bottom padding
top dividers
animations
Section colors
Select a Color scheme to apply to the section. To learn how to use and modify color schemes, go to the theme colors guide.
Section width
You can select the width of the section, either a fixed width or adapts to the width of the screen.
The following width options are available depending on the type of section:
Page width
Full width
Full width (padded)
Full width (background only)
Full width on mobile
You can set the theme-wide max page width width in Theme settings > Layout.
Section padding
Add or remove space at the top and bottom of the section. Under Section style in the section settings, use the sliders to adjust the pixel height of the Top and Bottom padding. Set the slider to 0px to remove all padding.
Top divider
Show a solid border at the top of the section to visually separate it from other sections.
When enabled you can enable Full width divider to span the section width.
The Top divider uses the Lines and borders in the select color schemes. Learn more about theme color settings.
Animations
When animations are enabled, text and images are loaded dynamically: section contents slide, fade, zoom, or ease into position at a delay rather than all at once. Other animations include a "shimmer" over images and subtle visual changes to elements like buttons or hot spots.
Turn off animations
You may want to turn off animations if you have concerns about load time, style, or accessibility. You can do so in your Theme settings or in individual Section settings.
To turn off animations for a section, click the section to open the settings. Under Section style, toggle off Enable animations.
To turn off animations for all sections, go to Theme settings > Animation and toggle of Enable section animations.
Last updated