Using sections
Last updated
Was this helpful?
Last updated
Was this helpful?
Sections are the basic components of templates. You can add, rearrange, and customize sections to create the layout and content of your pages.
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.
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.
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.
You can change the section colors by assigning a color scheme using the color scheme picker in the section settings.
Color schemes are sets of colors that can be applied to sections. You can add and define different color schemes in Theme settings > Colors.
Change the Section width to adjust how far the section spans across the page. Fixed widths set a maximum pixel width, and Adaptive widths change depending on the screen width.
Available page width options will vary depending on the type of section.
Narrow
Fixed
The section has a maximum width between 750px - 800px
Wide
Fixed
The section has a maximum width between 1000px - 1200px
Page width
Fixed
The section spans the content width of the page
Full width padded
Adaptive
The section spans the full screen with some padding.
Full width
Adaptive
The section spans the full screen to the edges. * If the section has no "Full width padded" option, "Full width" will include padding.
Use the sliders to add space at the top and bottom of the section. Set to 0 to remove spacing.
