Shopify section tutorial for Online Store 2.0

What you will build in this tutorial mindset

This tutorial explains the full lifecycle of a Shopify section: design HTML, convert to Liquid with schema, add the file to your theme, register it on a JSON template, and let merchants configure it in the editor. Whether you work on Dawn, Prestige, or a custom client theme, the OS 2.0 section model is the same.

Online Store 2.0 fundamentals

Online Store 2.0 replaced static Liquid templates with JSON templates that list sections in order. Each JSON file—index.json, product.json, collection.json—declares which sections appear and their default settings. Merchants reorder and configure sections without code access.

• Sections are .liquid files in the theme sections/ directory.
• Templates are .json files in templates/ that reference sections by type.
• App blocks let apps inject content into designated section slots.
• Section groups bundle header and footer sections across templates.

Anatomy of a section file

A production section file contains three parts: optional scoped CSS in a style tag, Liquid markup using section.settings and block loops, and a schema block defining editor controls. The outer wrapper should be a single section element with a meaningful class prefix.

<section class="custom-hero">
  <h1>{{ section.settings.heading }}</h1>
</section>

{% schema %}
{ "name": "Custom hero", "settings": [], "presets": [] }
{% endschema %}

Step 1 — Start from HTML

Export markup from Figma, Tailwind, or your component library. Paste it into /converter or the /shopify-section-generator. The tool maps static values to settings, detects repeatables for blocks, and scopes CSS to section.id.

Step 2 — Choose Flat or Block mode

Flat mode suits fixed heroes and announcement bars—content lives in section.settings. Block mode suits FAQs, sliders, and card grids where merchants add rows. /how-shopify-sections-work explains when each mode fits your architecture.

Step 3 — Add the section to your theme

Save the exported file as sections/your-section.liquid in your theme repository. Commit via Git or upload through the theme editor code view. Verify schema validates—invalid JSON prevents the section from appearing.

Step 4 — Register on a JSON template

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

Dynamic sections and section groups

Dynamic sections can be added by merchants at runtime through the Add section panel—enabled by presets in schema. Section groups (header, footer) let themes define shared wrapper sections that persist across templates. When building header-adjacent banners, confirm whether your theme expects the section in a group or on individual JSON templates.

Testing and merchant handoff

• Preview on mobile and desktop in the theme editor.
• Confirm all settings and blocks render with empty defaults.
• Document which templates include the section for client training.
• Match typography tokens to the parent theme for visual consistency.

Next steps in the knowledge hub

Deepen schema skills with /shopify-schema-guide, study block patterns in /dynamic-shopify-blocks-guide, and browse copy-ready Liquid in /shopify-liquid-examples. Theme-specific deployment notes live in /html-to-dawn-theme and sibling theme guides.