Overview​

Sections are HTML files that let you create reusable content modules, which merchants can adjust. They can also include blocks that let merchants add, remove, and reorder section content.

For example, you can create a section with an image and text side by side, giving merchants options to choose the image, set the text, and select the display order.

You can use JSON templates to dynamically add sections to a page, giving merchants flexibility in customizing the page layout. Sections in JSON templates can support App Blocks, letting merchants include app content without editing the theme code. JSON templates can show up to 25 sections, and each section can have up to 16 blocks.

You can also render static sections, giving merchants options for static content customization.

By default, any template can use sections, but you can limit which templates can access them in the section schema.

The diagram below shows the main theme template structure, highlighting sections in blue and blocks in red:

Location​

Section files are in the theme's sections folder:

└── theme
    ...
    ├── sections
    ├── templates
    ...

Content​

Sections can include two main types of content:

Usage​

When handling sections, you should be familiar with the following:

• How to render a section
• How to integrate sections with the theme editor
• Supporting App Blocks

Rendering Sections​

You can render a section in the following ways:

• Using sections in JSON templates
• Using the section helper to statically render sections

Statically Render a Section​

You can use the Handlebars section helper to statically render sections.

For example, if you have a /sections/header.html file containing your theme's header content, you might want to include that section in theme.html to render the header on all pages using that layout.

{{ section 'header' }}

Integrating Sections with the Theme Editor​

When merchants customize sections through the theme editor, the HTML for those sections is dynamically added, removed, or re-rendered in the existing DOM without reloading the entire page. However, any associated JavaScript that runs on page load will not run again.

You must ensure that a section or block becomes visible and stays visible when selected. For example, a carousel section should scroll into view when selected and slide to the selected block (carousel item), pausing the carousel when that block is chosen.

To identify theme editor actions, such as section and block selection or reordering, you can use the JavaScript events emitted by the theme editor.

You might also want to prevent certain code from running in the theme editor. You can use Handlebars and JavaScript variables to detect the theme editor.

Supporting App Blocks​

App blocks let app developers create blocks for merchants to add app content to their themes without directly editing theme code. To learn more about making your theme compatible with App Blocks, see App Blocks.