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, text, and optional link.

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

Click the section to find settings

Setting	Description
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. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.
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.

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.

A color scheme consists of a set of colors that you can use for sections throughout your store. Color schemes help you create consistent palettes.

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.

General colors	Description
Background	The background of the section, which spans the full height and width.
Background gradient	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 color gradient guide ↗ to learn more.
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

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.

1

In the section or block settings, select a color scheme.

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 color gradient guide ↗.

2

Use the overlay opacity slider to make the tint more or less transparent.

Set the opacity to 0% to turn off the tint overlay.

Set the opacity to 100% to create solid color blocks or banners in sections like Grid, Image hero, or Slideshow.

Click the section or block to find settings

Setting	Description	Options
Overlay opacity	Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.	0 - 100 %

Section width

---

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.

Section padding

---

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