Theme development, Module 3, lesson 1, 12 min

The shape of a theme: where everything lives

From

Sarah Okonkwo

Lead Developer

Monday, 9:00am

Welcome to architecture week, here's the map

Hey you, welcome to architecture week.

Soon we'll build real, merchant-editable sections. First, learn your way around a theme: where each kind of file lives. No code today, just the map in your head.

Sarah

How this works

Every theme has the same eight folders. Each has one job. Learn the map and every file has an obvious home.

layout/ — the outer wrapper (theme.liquid: the <html>, <head>, header and footer) that every page renders inside.
templates/ — one per page type (index, product, collection...). A JSON template lists which sections show, in order.
sections/ — full-width, editable modules. Each has a {% schema %}.
blocks/ — reusable components with their own schema. Drop them into any section.
snippets/ — shared fragments pulled in with {% render %}. No schema.
config/ — global theme settings (settings_schema.json) and their saved values.
locales/ — translation files. UI strings rendered with the t filter.
assets/ — static files: images, fonts, and any global CSS/JS.

Why this matters in production

Every theme you ever open, debug, or hand off has the same skeleton. The first thing you do in an unfamiliar theme is map it: which template renders this page, which sections it pulls in, where the shared snippet lives. Get the model once and it pays off in every theme after.

Report a bug or suggestion

Five questions to lock in the map. Pick where each thing lives.

Where does a reusable, merchant-customizable full-width module (with a {% schema %}) live?

Where does a reusable, merchant-customizable full-width module (with a `{% schema %}`) live?