Theme architecture

Understand every authored folder and how layouts, templates, sections, blocks and assets work together.

Theme folder structure

See the complete project tree and learn what belongs in every authored folder.

Understand the page hierarchy and which layer owns each kind of design decision.

Build the shared outer frame used by storefront templates.

Define each route's starting section tree and values with JSON.

Keep a section's HTML, CSS, Liquid, controls and local blocks understandable in one file.

Choose the correct block kind and preserve nesting rules and static locks.

Reuse right-panel setting groups without moving visible design out of its owner.

Use small Liquid helpers and separately requested storefront pieces correctly.

Organize shared CSS, images, third-party browser libraries and advanced interactions.

Organize shopper-facing translated text without changing platform business rules.