Sections

A section is a part of a page merchants can add, remove, reorder and configure: a banner, a product grid, a newsletter sign-up. It’s a Liquid file in sections/ with a {% schema %}.

sections/rich-text.liquid

<div class="section page-width">
  {%- if section.settings.heading != blank -%}<h2>{{ section.settings.heading }}</h2>{%- endif -%}
  {{ section.settings.text }}
</div>

{% schema %}
{
  "name": "t:sections.rich_text.name",
  "tag": "section",
  "class": "section-rich-text",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Talk about your brand" },
    { "type": "richtext", "id": "text", "label": "Text" }
  ],
  "presets": [{ "name": "Rich text" }]
}
{% endschema %}

Schema keys

Key	Meaning
name	The name in the editor (a t: key for translated names).
tag	The wrapper element: section, div (default), article, aside, header or footer.
class	Extra classes on the wrapper, after shopify-section.
limit	How many times the section can be on one page.
settings	Inputs; see Input setting types.
blocks	Block types the section accepts: local blocks with their own settings, theme blocks by name, or { "type": "@theme" } for any theme block.
max_blocks	At most this many blocks (50 by default and at most).
presets	Entries in Add section: a name, starting settings and blocks. Without a preset the section can’t be added from the editor.
enabled_on, disabled_on	Where the section may be added; see below.
capability	A store feature; the section renders only while it’s on. Sooquna only.

The wrapper

Every section is wrapped in its tag:

<section id="shopify-section-template--main" class="shopify-section section-rich-text">…</section>

The ID is stable, so CSS and JavaScript can target it, and the section rendering API uses it to re-render one section.

Section groups

A section group is a JSON file in sections/ that holds sections shared by every page: the header and the footer. A layout renders it with {% sections 'header-group' %}.

sections/header-group.json

{
  "type": "header",
  "name": "Header group",
  "sections": {
    "announcement": { "type": "announcement-bar", "settings": { "color_scheme": "brand" } },
    "header": { "type": "header", "settings": { "menu": "main-menu", "sticky": true } }
  },
  "order": ["announcement", "header"]
}

type is header, footer or overlay (popups, drawers). Section IDs in a group look like sections--header-group__header.

Where sections can go

"enabled_on": { "templates": ["product", "collection"] },
"disabled_on": { "groups": ["header", "footer"] }

• templates: template types (product, index…) or "*".
• groups: section group types (header, footer, overlay) or "*".
• With enabled_on, the section goes only where it lists. With disabled_on, everywhere except where it lists.

Rendering a section from code

{% section 'newsletter' %} renders a section file in place, with its default settings. Use it in layouts and custom pages for sections the merchant shouldn’t move.

Assets of a section

{% stylesheet %} and {% javascript %} hold CSS and JavaScript for the section. They’re output once per page, however many times the section is used. CSS that uses settings goes in {% style %}, which the editor updates as the merchant changes values.