Sections architecture

To get started

To begin testing the sections architecture you will need to create a developer preview store and learn how to test upcoming features. The Sections REST API will help you test out the sections architecture.

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-rendered 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 the sections architecture.

Page sections: Section files in the pages/ directory of themes. They power pages using the sections architecture and replace theme templates.

Content sections: Section files in the content/ directory of themes. They can be added to pages using the sections architecture 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.

Template 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: Template sections rendered via the {% section %} Liquid tag.

In the sections architecture, the entire content of pages is made of sections:

New theme architecture

The sections architecture introduces a new architecture for rendering pages in themes and customizing pages. It coexists with the template architecture that predates it. Both can be implemented by a theme. An online store may use one or the other on a per-page basis.

Template architecture

  • Pages render a theme template, which can optionally use template 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.

Sections architecture

  • 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 architectures

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

  • Both architectures 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.

Additional features

The online store design experience developer preview includes the following additional features.

A link setting combines a url setting and a text setting into one setting.

The label, info, placeholder and default attributes of each setting (where supported) can be set in the parts object.


  "id": "call_to_action",
  "type": "link",
  "parts": {
    "url": {
      "label": "Button link"
    "text": {
      "label": "Button label"

With Liquid

{% if section.settings.call_to_action %}
<a href="{{ section.settings.call_to_action.url }}">
  {{ section.settings.call_to_action.text }}
{% endif %}


<a href="/pages/get-started">Get started</a>