HTMLToLiquid
← Back to guides
BeginnerOS 2.0 · 2024-05-19

Shopify Sections for Beginners (OS 2.0)

What sections are, how JSON templates work, and how merchants add them in the theme editor.

What Is a Section?

A section is a reusable chunk of Liquid + HTML + CSS + schema stored in sections/your-section.liquid. Merchants add, remove, and reorder sections on JSON templates like the homepage.

Sections vs Snippets

  • Sections — appear in the theme editor, have schema, can be added to pages
  • Snippets — included with {% render 'name' %}, no schema, not added directly by merchants

JSON Templates

Templates in templates/*.json list which sections render and in what order. Example: index.json powers the homepage.

theme.liquid Still Matters

The layout wraps every page—header, footer, and global assets live here. Sections slot into the middle via template JSON.

Your First Section Checklist

  1. Build HTML + Liquid markup
  2. Add {% schema %} with settings and presets
  3. Test in the theme editor preview
  4. Extract repeated parts into snippets

Next: Reusable Sections · Converter · Cheat Sheet

Build faster with HTMLToLiquid Converter

Convert static HTML into dynamic Shopify sections.

Open converter