Online Store 2.0 Theme Anatomy
A Shopify theme is a version-controlled folder of Liquid, JSON, CSS, and JavaScript files. Shopify reads this folder structure to know which files handle which page types, which settings merchants can edit, and which assets to serve from the CDN.
BASH
my-theme/
├── assets/ # Static files: CSS, JS, images, fonts
│ ├── theme.css
│ ├── theme.js
│ └── logo.svg
├── config/
│ ├── settings_schema.json # Theme setting definitions
│ └── settings_data.json # Merchant's saved values
├── layout/
│ └── theme.liquid # HTML shell wrapping every page
├── locales/
│ ├── en.default.json # Translation strings
│ └── en.default.schema.json # Translated schema labels
├── sections/ # Modular, editor-customizable blocks
│ ├── header.liquid
│ ├── footer.liquid
│ └── featured-collection.liquid
├── snippets/ # Reusable partial templates
│ └── product-card.liquid
└── templates/ # Page-level composition
├── index.json # Homepage
├── product.json # Product pages
├── collection.json # Collection pages
├── page.json # Static pages
└── cart.json # Cart page- layout/theme.liquid — single HTML document wrapper; required on every theme
- templates/*.json — define which sections appear on each page type
- sections/*.liquid — self-contained UI modules with {% schema %} for the editor
- snippets/ — shared partials included via {% render %}
- config/ — global theme settings merchants change in Admin → Online Store → Themes → Customize
- assets/ — served from cdn.shopify.com with cache busting via ?v= hash
- JSON templates (OS 2.0) let merchants add/remove/reorder sections without code
- Legacy .liquid templates still work but lack section flexibility
- blocks/ folder appears in app extensions, not standard themes
Tip: Run shopify theme init to scaffold this structure, or clone Dawn from GitHub as a production-ready starting point.