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

The Section header appears above the main content. Click the section to find the header settings

  • Add a heading and subheading.

  • 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

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. This option doesn't change the heading's appearance.

Heading size

Set the heading text to Small, Medium, or Large.

Subheading

Add multiple lines of rich text below the heading.

Subheading size

Set the subheading text to Small, Medium, or Large.

Heading alignment

Position heading text to the Left or Center 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. In the editor side panel, click the section to find style options for padding, top dividers, and animations.

Section padding

Add or remove space at the top and bottom of the section. Under Section style in the section settings, select a Padding option: Top and bottom, Top only, Bottom only, or set it to None.

Section top divider

Show a solid border at the top of the section to visually separate it from other sections.

The Top divider uses the Lines and borders color selected in the theme color settings.

Section 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

Was this helpful?