How To Create Shopify Sections

OS 2.0 section lifecycle

A section is a sections/*.liquid file: markup, optional scoped CSS, Liquid logic, and {% schema %} JSON. Merchants never edit the file—they add section instances on JSON templates like index.json and change values in the theme editor sidebar.

Sections vs snippets

• Sections — schema, presets, appear in Add section
• Snippets — partials included via {% render 'name' %}, no merchant UI

JSON templates and presets

templates/*.json lists section instances in order. Each instance stores setting values. Presets in schema define how new instances appear when merchants click Add section—including default block rows for FAQs.

{
  "sections": {
    "hero": { "type": "hero-banner", "settings": { "heading": "Welcome" } }
  },
  "order": ["hero"]
}

Merchant workflow

1. Open theme editor on a JSON template (homepage, product page)
2. Add section from preset list
3. Edit settings and blocks in sidebar
4. Reorder sections via drag-and-drop

During theme customization, a section file that exists but is missing from template order will not render—a common first-section mistake.

theme.liquid wraps everything

Global header, footer, and assets live in layout/theme.liquid. JSON template sections render in the middle. Section groups (header/footer bundles) may live outside individual page JSON.

First section checklist

1. Create sections/your-section.liquid with markup + schema + preset
2. Match type in template JSON to filename (without .liquid)
3. Scope CSS with #shopify-section-{{ section.id }}
4. Preview desktop and mobile in admin

Takeaway

Sections are merchant-editable modules on JSON templates. Next steps: Section Schema, Reusable Sections, Converter.

JSON templates are the OS 2.0 mental model

templates/index.json lists section instances and order—merchants rearrange order in the editor; developers own section files in sections/. If a section file exists but is missing from order, it will not render—classic migration bug.

Section groups

Header and footer groups bundle announcement bars, logos, and menus across templates. Confirm whether your theme expects a module in the header group versus page-level JSON before you deploy custom announcement sections.

First section walkthrough

1. Create sections/promo-bar.liquid with markup + schema + preset
2. Add to templates/index.json with matching type
3. Preview in theme editor—desktop and mobile
4. Scope CSS; guard blank images
5. Document for merchant handoff

From beginner to production

Convert a real HTML slice through converter, study schema output, read how sections work, then follow agency section workflow.