Sections and blocks

Why it matters

How a theme is divided into sections decides who can change the store. Get the scoping right and a marketing team builds landing pages, reorders product page content, and runs campaigns without opening a ticket. Get it wrong and every change is a developer request, which is the same position the store was in before Online Store 2.0 existed.

This is a design decision disguised as a technical one. The temptation on every build is to ship a small number of large, opinionated sections, because it is faster and the result looks exactly like the mockup. The cost arrives three months later when the mockup is out of date and nothing can be recomposed.

How it works on Shopify

A section is a Liquid file with a schema block at the bottom declaring its settings and its permitted block types. Blocks are the repeatable children inside it — the individual slides in a slider, the rows in a specs table, the cards in a feature grid.

The schema is the merchant-facing contract. Settings become the fields in the theme editor, and the block definitions decide what a merchant can add, remove, and reorder. Setting types matter: a colour picker, a product picker, and a rich text field each produce a different editing experience, and choosing the lazy one is how editors end up pasting raw HTML into text fields.

JSON templates assemble sections into pages, and section groups extend the same model to the header and footer areas. App blocks let an app offer a block a merchant can position inside a section, which is the supported alternative to an app writing into theme files.

Sections can be limited by template type, so a section that only makes sense on a product page never appears in the homepage picker.

Common mistakes

• One giant section per page. If a section has thirty settings and cannot be reordered against anything, it is a template with extra steps.
• Sections too granular to use. The opposite failure. A merchant assembling a hero from six separate sections will assemble it wrong.
• No schema defaults or presets. A section that renders empty when first added looks broken, and merchants avoid it.
• Hardcoded text inside blocks. Anything not exposed as a setting is a developer request forever, and cannot be translated.
• Ignoring block limits. Shopify caps blocks per section. A design that assumes unlimited repeats hits the ceiling in production, not in the mockup.
• No empty state. Sections should degrade gracefully when a setting is blank rather than rendering a broken layout.

When you need help

The symptom is a marketing team that has stopped using the theme editor. When every campaign page arrives as a developer ticket despite the store running a modern theme, the section model is wrong — usually too coarse, occasionally too fragmented — and no amount of documentation fixes it.

The other case is the design phase of a new build. Deciding the section inventory before the theme is written, from how the team actually works rather than from the page designs, is cheap up front and expensive to retrofit once the theme exists.