Skip to content

Section groups ​

Last updated View as Markdown

In a section group, you list sections that sellers can add, remove, reorder and edit in the theme editor, outside of a template. Use groups for the parts of a page that are shown on every template, such as the header and the footer.

Location ​

Save a section group as a JSON file in the sections directory, next to the section files.

bash
└── theme
    ├── layout
    │   └── theme.liquid
    ├── sections
    │   ├── header-group.json
    │   ├── footer-group.json
    │   ├── header.liquid
    │   ├── footer.liquid
    │   ...
    ...

Render a group ​

Render a group in a layout with the sections tag and the group file name, without the .json extension.

liquid
<body>
  {% sections 'header-group' %}

  {{ content_for_layout }}

  {% sections 'footer-group' %}
</body>

The sections are rendered in the order of order. Disabled sections are not rendered.

File format ​

json
{
  "type": "header",
  "name": "Header group",
  "sections": {
    "announcement": {
      "type": "announcement-bar",
      "settings": {
        "text": "Free shipping on all orders"
      }
    },
    "header": {
      "type": "header",
      "settings": {}
    }
  },
  "order": ["announcement", "header"]
}
PropertyTypeRequiredDescription
typestringYesThe group type. One of header, footer, aside, or custom.<name> (for example custom.overlay).
namestringYesThe group name. Max 50 characters.
sectionsobjectYesSection objects keyed by section ID, the same as in a JSON template. Up to 25 sections.
orderarrayYesSection IDs in render order. Use only IDs that are keys in sections, with no duplicates.

The data of each section is validated against the schema of the section. A group file with an error cannot be saved.

Theme editor ​

In the theme editor, a group is shown as its own area of the section list. Groups of type header are shown above the template sections. All other groups are shown below the template sections, and groups of type footer are shown last.

Sellers can add, remove, duplicate, reorder and edit the sections of a group. The changes are saved to the group file, and the same group is shown on every template.

To choose the groups where a section can be added, use groups in enabled_on and disabled_on.

Groups and static sections ​

When you render a section with the section tag, one configuration is stored for it in config/settings_data.json, and sellers cannot add or reorder sections around it. In a group, sellers can add, remove and reorder sections, and settings are stored for each section.