Theme Structure

A Shopify theme is just a folder with a fixed set of subdirectories, each with a defined purpose. Shopify's servers look for files by name and location, so once you know the folders, you can find your way around any theme.

The folders

layout/
  theme.liquid
templates/
  index.json
  product.json
  collection.json
sections/
  header.liquid
  featured-collection.liquid
snippets/
  product-card.liquid
assets/
  theme.css
  theme.js
config/
  settings_schema.json
  settings_data.json
locales/
  en.default.json

layout

layout/theme.liquid is the outermost wrapper — the <html>, <head>, and <body> tags every page shares. Somewhere inside it sits {{ content_for_layout }}, a placeholder where the current page's actual template content gets injected. A theme can define more than one layout file (say, layout/checkout.liquid for a stripped-down variant) and a template chooses which one wraps it.

templates

Each file in templates/ corresponds to a page type — a product page, a collection page, the homepage. Modern themes write these as JSON files that list which sections to render and in what order, rather than raw Liquid:

{
  "sections": {
    "hero": { "type": "hero-banner" },
    "featured": { "type": "featured-collection" }
  },
  "order": ["hero", "featured"]
}

A store can also have multiple template variants for the same page type — product.json for most products and product.gift-card.json specifically for gift cards, for instance — selected automatically by Shopify based on the resource, or manually by a merchant from the Theme Editor.

sections and snippets

A section is a reusable, independently configurable block of a page — a header, a product grid, a footer. A snippet is a smaller, simpler reusable chunk of Liquid meant to be included from elsewhere with the render tag, with no configuration UI of its own:

{% for product in collection.products %}
  {% render 'product-card', product: product %}
{% endfor %}

Passing product: product explicitly is deliberate — unlike sections, snippets don't automatically see the surrounding template's variables, so you hand them what they need.

assets, config, and locales

assets/ holds CSS, JavaScript, and images, referenced from Liquid with helpers like {{ 'theme.css' | asset_url }}. config/settings_schema.json defines the theme-wide settings a merchant can change in the Theme Editor (colors, fonts, logo), while config/settings_data.json stores the merchant's actual chosen values — the schema is the form definition, the data file is what's currently filled in. locales/ holds translation strings for multi-language stores, keyed by language code (en.default.json, fr.json, and so on).

Theme architecture and dev tools

Shopify provides a CLI (shopify theme dev) that runs a local preview of a theme against real store data, with hot reload as you edit files — the standard way theme development happens rather than editing directly in the Theme Editor's code view. Themes are version-controlled like any other codebase; the CLI's push and pull commands sync a local folder with a theme on a store.