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.

Highlighted areas of the Shopify theme editor showing how to open templates, add sections, and re-order sections.

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. 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.

Cover

Page width

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

Cover

Full width (padded)

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

Cover

Full width (background only)

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

Cover

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.

Last updated

Was this helpful?