Section themes

To get started

To begin testing the new Section themes you will need to create a developer preview store and learn how to test upcoming features. The Section themes REST API will help you test out Section Themes.

Glossary of terms

Theme frame: A set of sections, such as a header and footer, that appear at the top and bottom of multiple pages. Theme frames are defined by themes in the config/frames.json file. They are rendered as part of content_for_layout and replace statically-included sections in theme layouts.

Master page: A set of sections to be applied on multiple pages of the same type (for example, product pages). Unlike theme frames, master pages are not defined by themes. They can be managed and customized through the Shopify admin.

Frame sections: Section files in the frame/ directory of themes. They can be used in theme frames, which power the top and bottom of the page in Sections-enabled themes.

Page sections: Section files in the pages/ directory of themes. They power Sections-enabled pages and replace theme templates.

Content sections: Section files in the content/ directory of themes. They can be added to Sections-enabled pages and master pages through the Shopify admin.

Content Schema: A formula for representing online store content. Its purpose is to enable content to be rendered across different themes.

Legacy sections: Section files in the sections/ directory of themes. They can be used only by theme templates, including the legacy homepage, and theme layouts.

Legacy homepage: The index.liquid-based homepage whose content is stored inside of themes.

Static sections: Legacy sections rendered via the {% section %} Liquid tag.

In Sections-enabled themes, the entire content of pages is made of sections:

Paradigm shift

Sections themes introduce a new paradigm for how pages are rendered and customized. The new, section-based paradigm, coexists with the existing, template-based paradigm. Both can be implemented by a theme. An online store may use one or the other on a per-page basis.

Template paradigm

  • Pages render a theme template, which can optionally use legacy sections to bring customization options to the merchant in the theme editor.

  • Data for the legacy homepage and static sections is stored inside the theme. Static sections can't be added or removed in the Shopify admin, and can't be edited per-page.

  • Additional content can be added through the rich-text content of the resource, which can be edited per-page in the Shopify admin, but does not support sections.

  • Multiple theme templates can be created in the theme and assigned to individual pages in the Shopify admin.

  • The content of the homepage is stored inside of the theme's config/settings_data.json file.

New section paradigm

  • Pages render their associated sections, one of which, the page section, acts as the main section of the page.

  • The section data is stored within the page resource, and therefore reused across themes, with the theme only acting as a “renderer”.

  • Additional sections can be added and removed per-page, or across multiple pages using master pages, in the Shopify admin.

  • Master pages are store-level resources that enable pages of certain types to share sections. Page-specific “overrides” of master page configurations can be made in the Shopify admin.

  • The content of the homepage is stored inside of a store-level resource, and therefore reused across themes.

Features of both paradigms

  • Both paradigms run pages through theme layouts and output the page-specific content in the content_for_layout Liquid variable.

  • Both paradigms support theme frames, which allow content appearing at the top and bottom of pages to be modeled with sections. The configuration of those sections continues to be stored inside themes.

Ready to start selling with Shopify?

Try it free