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.
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
Heading
Change or remove the title of the section.
Heading tag
Text
Add multiple lines of rich text below the heading.
Link URL
Select a page or URL for the link.
Link label
Add text to display the link.
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 or block colors by assigning a color scheme using the color scheme picker.
Click the section or block to find the Color scheme option.
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.
Every color scheme has the following color options.
Background
The background of the section, which spans the full height and width.
Background gradient
Text
All text included in the section.
Lines and borders
All lines and borders that appear between or within sections.
Accent
Special design elements in sections
Accent foreground
Text or icons that overlay accent elements
Buttons
Solid buttons
The background and text colors for buttons with solid style
Outline buttons
The background, text, and border colors for buttons with outline style
Buttons with icon
The background and foreground colors for buttons with icons
In the section or block settings, select a color scheme.
Use the overlay opacity slider to make the tint more or less transparent.
Click the section or block to find settings
Overlay opacity
Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.
0 - 100 %
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
Use the sliders to add space at the top and bottom of the section. Set to 0 to remove spacing.
Some sections have a Section header that appears above the main content. Other section may use or overlay text for the main headings.
Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to . This option doesn't change the heading's appearance.
Some sections can use a gradient background instead of a solid color background. You can choose the style, angle, position, and opacity of the gradient. See Shopify's to learn more.
When text appears over images or videos, an overlay color is used to provide contrast between the text and background, keeping it readable and .
The overlay uses the color scheme's background color. If the color scheme has a background gradient, it will be used instead. Background gradients fade across a range of hues. Learn more in Shopify's .
Set the opacity to 100% to create solid color blocks or banners in sections like , , or .
Width options were updated in v4.0. View the and to access new features.
Available page width options vary depending on the type of section. The Full width (background only) is available only for , , , and .
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.
