Theme File Structure
What each folder in your theme bundle is for, and which file controls which page.
Every Storra theme is a tree of files organized into a few specific folders. Each folder has a clear purpose, and the platform expects files in the right places to render your storefront. This article is the map.
The directory layout
my-theme/
├── layout/ ← the <html> shell shared by every page
├── templates/ ← per-page templates (home, product, cart, etc.)
├── sections/ ← reusable section types
├── blocks/ ← reusable block types
├── snippets/ ← reusable Liquid partials
├── assets/ ← CSS, JS, images, fonts
├── config/ ← global theme settings + saved values
└── locales/ ← translation filesWhat goes where
layout/
The outermost shell of every page — the <html>, <head>, and <body> wrapper. Most themes have a single theme.liquid file here that includes the page's content via a special placeholder. Edit this when you need to add a script tag site-wide, change the meta tag setup, or modify the global page wrapper.
templates/
One file per page type. The platform picks the right template based on the URL the visitor is on:
- index — your home page
- product — a single package's detail page
- store — the package catalog
- cart — the basket review page
- thank-you — the post-purchase confirmation
- page — generic CMS pages (your About, Terms, Privacy)
- 404 — the not-found page
Templates can be Liquid files (.liquid) for fully custom layouts, or JSON files (.json) that compose pre-built sections. JSON templates are what the visual editor saves into — sections you arrange in the editor get serialized here.
sections/
Reusable building blocks like Hero, Featured Packages, FAQ, Testimonials, Footer. Each section is a single .liquid file with markup at the top and a {% schema %} block at the bottom describing its settings, blocks, and presets. The visual editor reads each section's schema to render the inspector and the section library.
See Building custom sections for the full walkthrough.
blocks/
Reusable block types — the repeating sub-units inside sections (a feature card, an FAQ entry, a navigation link). Like sections, each block file declares its own settings via a schema. Sections that want to use a block reference it by type name in their own schema.
snippets/
Reusable Liquid partials — small chunks of markup you want to share across multiple sections without duplicating. A common example is price.liquid, included anywhere a price should render so all prices stay formatted consistently. Sections include snippets via {% render 'snippet-name' %}.
Snippets don't have schemas or settings — they're pure markup and Liquid logic, not editor-aware.
assets/
CSS, JavaScript, images, fonts, icons — anything served as a static file. Reference assets in your Liquid via the asset_url filter:
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
<script src="{{ 'theme.js' | asset_url }}"></script>
<img src="{{ 'logo.png' | asset_url }}" alt="...">See CSS & asset editing.
config/
Two files:
- settings_schema.json — declares the theme settings the visual editor exposes (typography, colors, layout knobs, etc.).
- settings_data.json — the merchant's saved values for those settings, plus the section composition for each JSON template.
Most stores never edit these directly — the visual editor reads and writes them. Edit by hand only when you're adding new theme settings to settings_schema.json.
locales/
Translation files for the storefront's UI strings. en.default.json is the source-of-truth English locale; other locales (es.json, fr.json, etc.) translate from it. The visual editor's locale picker switches which file the storefront uses. See Storefront locales.
How Storra picks which file to render
When a visitor opens a page on your storefront:
- The platform identifies the page type (home, product, cart, etc.) from the URL.
- It looks for a matching template in
templates/(e.g.product.jsonfor a product page). - It composes that template inside
layout/theme.liquid— the layout wraps the template's output. - Sections and snippets are pulled in as the template renders.
- Translation strings are pulled from the active locale.
- Assets are referenced and served from
assets/.
FAQ
Can I add new folders?
You can create files inside the standard folders, but adding new top-level folders won't do anything — the platform only reads the folders listed above. If you need somewhere to put utility files, use snippets/ for Liquid or assets/ for everything else.
Why is one template a .liquid file and another a .json file?
Both are valid. .liquid templates are fully hand-written and don't appear in the visual editor as compositions of sections — useful for unique pages. .json templates compose sections from sections/ and are what the visual editor saves into when merchants arrange sections.
Where do my saved theme settings go?
config/settings_data.json. The visual editor writes there when you save a draft. The file is overwritten on each save, so don't hand-edit it while the visual editor is open.
Updated recently