Shopify Theme File Structure: Every Folder Explained

The layout folder contains theme.liquid and optional alternate layouts such as checkout.liquid (legacy) or password.liquid. theme.liquid is the HTML shell every template wraps inside unless a template specifies another layout. It typically includes {{ content_for_header }} for Shopify-injected scripts, {{ content_for_layout }} where template output lands, and global sections like header and footer via {% section %} tags or JSON template references.

Layouts should stay thin: charset, viewport, critical CSS hooks, and shared analytics. Heavy page-specific markup belongs in templates and sections, not in layout files. Changing layout structure affects every page, so teams version carefully and test cart, product, and collection routes after edits. Shopify CLI's theme dev command hot-reloads layout changes against a development theme so you can validate without touching production.

The templates directory defines which sections render for each resource type and URL. Online Store 2.0 uses JSON templates: product.json, collection.json, index.json, page.contact.json, and so on. Each file lists an ordered array of section instances with settings and block configurations stored as JSON. Liquid-only templates like gift_card.liquid and legacy product.liquid still exist for special cases but new work targets JSON templates.

Alternate templates extend the same resource with different section stacks. A product.alt-layout.json appears in the admin as a selectable template for individual products. Naming follows Shopify conventions: resource.handle.json for defaults, resource.suffix.json for alternates. When a merchant picks a template in admin, Shopify loads the matching JSON file and hydrates each section with saved settings from settings_data.json.

Sections live in sections/ as paired Liquid and optional schema blocks. A section file contains markup, {% schema %} JSON defining merchant-editable settings, and sometimes {% stylesheet %} or {% javascript %} tags scoped to that section. Sections are the primary building blocks merchants drag in the theme editor. Each section instance in a JSON template can have unique settings and blocks.

Snippets live in snippets/ and hold smaller partials: icons, price displays, card components, and form field groups. Include them with {% render 'snippet-name', param: value %} for isolated scope. Unlike sections, snippets are not directly added via the theme editor unless referenced from a section. The split is intentional: sections are merchant-facing modules; snippets are developer-facing composition units.

The assets folder stores CSS, JavaScript, images, fonts, and SVGs referenced via {{ 'file.css' | asset_url }} or the asset_url filter in schema settings. Shopify CDN serves assets with cache busting via fingerprinted URLs on publish. Large bundles hurt performance; prefer section-scoped {% stylesheet %} for CSS tied to one section and defer non-critical JS.

The config folder holds settings_schema.json (global theme setting definitions merchants see under Theme settings) and settings_data.json (current values, section order on JSON templates, and preset configurations). Locales store translation strings as JSON keyed by language: en.default.json, fr.json, etc. Theme strings use {{ 'sections.header.menu' | t }} with keys defined under nested objects in locale files. Config and locales are easy to overlook but critical for multi-language stores and design-token-driven theming.

Blocks subdirectory under sections is not a separate folder; block types are declared inside each section's schema. Some themes add a blocks/ folder in newer Shopify conventions for shared block partials, but the dominant pattern remains inline block definitions in section schema with {% case block.type %} rendering in the section Liquid file.

Additional folders include customers/ for login, register, and account templates; snippets may back shared account UI. The optional .shopify/ directory at theme root can hold Theme Check config and CLI metadata. Understanding which files merchants can edit (JSON templates, section settings) versus which require deploys (Liquid logic, new section types) defines your release workflow. Git-based theme development with Shopify CLI push, GitHub integration, or CI pipelines maps directly onto this folder structure.