Sections are Liquid files that allow you to create reusable modules of content that can be customized by merchants. They can also include blocks which allow merchants to add, remove, and reorder content within a section..
For example, you can create an Image with text section that displays an image and text side-by-side with options for merchants to choose the image, set the text, and select the display order.
Sections can be dynamically added to pages using JSON templates, giving merchants flexibility to easily customize page layouts. Sections that are included in JSON templates can support app blocks, which give merchants the option to include app content within a section without having to edit theme code.
Sections can also be included statically, which can provide merchants with in-context customization options for static content.
By default, sections are available for any template, however you can limit which templates have access in the section schema.
The following diagram shows the main theme architecture components with sections highlited in blue and blocks highlighted in red:
Section files are located in the
sections directory of the theme:
Sections can contain three main types of content:
Any HTML or Liquid content you might want to include in the section.
Aside from global objects, variables created outside of sections aren't accessible within sections.
The section and block objects, as well as variables created within sections, aren't available outside of their respective section. The only exception is when you reference section and block objects within a snippet that's rendered inside the section you're referencing.
To learn more, refer to Section assets.
Sections support the section-specific
To learn more, refer to Section schema.
When working with sections, you should familiarize yourself with the following:
Render a section
You can render sections in one of the following ways:
- Include the section with a JSON template.
- Statically render the section with the
- Use the Section Rendering API.
Statically render a section
You can statically render a section using the Liquid section tag.
For example, if you have a
/sections/header.liquid file that contains your theme's header content, then you might want to include that section in
theme.liquid so that the header is rendered on all pages that use that layout:
Integrate sections with the theme editor
Additionally, you must make sure that when a section or block is selected, that section or block becomes, and remains, visible while it’s selected. For example, a slideshow section should scroll into view when the section is selected, slide to a selected block (slide), and pause while that block is selected.
Support app blocks
App blocks allow app developers to create blocks for merchants to add app content to their theme without having to directly edit theme code.
To learn more about how to make your theme compatible with app blocks, refer to App blocks.