Shopify OS 2.0 Sections & Blocks Explained

Shopify OS 2.0 sections and blocks are the building units that let merchants rearrange, add, and remove content on any page directly from the theme editor, without a developer touching a template file. A section is a reusable, self-contained piece of a page (a hero banner, a product grid, a testimonial strip); a block is a smaller, repeatable element that lives inside a section (a single testimonial, a single FAQ item, a single image in a gallery). Once you understand how the two nest together and how JSON templates tie them to a page, the theme editor stops feeling like a black box and starts feeling like a real layout tool.

This matters more than it sounds like it should, because OS 2.0 changed who is allowed to touch a Shopify store's layout day to day. Before OS 2.0, most meaningful layout changes needed a developer to edit Liquid templates directly. Now a store owner or a marketer can add a section to the homepage, drag it above the featured collection, add three blocks to it, and publish — all without opening a code editor. Themes built well for OS 2.0, including ours, are designed around that expectation.

The Building Blocks: Sections, Blocks, and Templates

Before going further, it helps to define the three pieces precisely, because Shopify's own naming overlaps with common English words in a way that trips people up early on.

Sections

A section is a chunk of Liquid, CSS, and JavaScript that renders one part of a page: a hero image with a headline, a row of collection cards, an announcement bar, a newsletter signup. Sections live in a theme's `sections/` folder as `.liquid` files, each with a `{% schema %}` block at the bottom that declares its settings (what a merchant can configure) and, if relevant, what block types it accepts. Sections can be added to a page, removed from a page, reordered, and duplicated, all from the theme editor sidebar — none of that requires editing the section's underlying file.

Blocks

A block is a repeatable unit inside a section. If a section is a testimonials strip, each individual testimonial is a block; if a section is an FAQ accordion, each question-and-answer pair is a block. Blocks are defined in that same section's schema, and a merchant can add as many as they want (up to a max the theme developer sets), reorder them by dragging, and delete the ones they do not need. This is the mechanism that lets a merchant go from three testimonials to seven without asking anyone to edit a template.

App blocks

A special block type worth calling out on its own: app blocks. Apps that support OS 2.0 can register their own block (a reviews widget, a size chart, a subscription widget) that merchants can drag into any section that allows app blocks, the same way they would drag in a native block. This is one of the more genuinely useful parts of OS 2.0 — it means adding a third-party app's UI to the middle of the product page no longer requires a developer to hand-edit `product.liquid`.

JSON templates

The piece that ties sections to actual pages is the JSON template. Files like `templates/index.json` or `templates/product.json` do not contain markup at all — they contain a JSON object listing which sections appear on that page, in what order, and what settings each section and its blocks currently hold. When a merchant rearranges sections in the theme editor and clicks save, Shopify is rewriting this JSON file, not the Liquid behind it. This separation is what makes OS 2.0 themes safely customizable: a merchant can move sections around all day without any risk of breaking the underlying section code.

How This Differs from Pre-OS 2.0 Themes

Older Shopify themes (commonly called "vintage" themes now) hard-coded most of a page's structure directly into a single Liquid template, with maybe a handful of sections available for the homepage only. Reordering content on a product page or a collection page meant editing the theme's code, which is exactly the kind of task that used to require hiring a developer for what should have been a five-minute layout tweak. OS 2.0 extended sections to every template — product pages, collection pages, blog posts, even the 404 page — and made every one of them fully section-and-block based. That is the single biggest practical difference: with OS 2.0, there is no page in the theme that is locked to a fixed layout.

A Practical Walkthrough: Editing a Homepage Section

Here is what actually happens, step by step, when a merchant customizes a homepage in an OS 2.0 theme editor.

1. Open Online Store > Themes > Customize. The editor loads `templates/index.json` and renders each section in the order that file lists.
2. Click Add section in the left sidebar. Shopify shows every section available for this template — the theme developer controls this list by which `.liquid` files exist in `sections/` and what they declare as valid for this template type.
3. Add a section, for example a testimonials section. It renders with whatever default settings and default blocks its schema specifies.
4. Click into the section's settings panel to adjust its own options (heading text, background color, layout width) — these come from the `settings` array in that section's schema.
5. Click Add block inside the section to add another testimonial, or click an existing block to edit its own settings (name, quote text, star rating) — these come from the `blocks` array in the schema.
6. Drag sections and blocks to reorder them, then click Save. This rewrites the JSON template with the new order and settings; no Liquid file is touched.

Nothing in that flow requires a code editor. That is the entire point of OS 2.0, and it is why a well-built theme should feel less like "software you configure once" and more like a layout tool a merchant keeps using as their catalog and marketing needs change.

What This Means for Choosing a Theme

Not every OS 2.0 theme uses the section-and-block model equally well. A theme can be technically OS 2.0 compliant while still only exposing a few sections on non-homepage templates, or shipping schemas with so few settings that merchants end up needing custom code anyway to get the layout they actually want. When evaluating a theme, it is worth checking, in the theme editor's demo store, how many sections are available on the product and collection templates specifically — not just the homepage, which every theme tends to showcase well.

Our themes across the Shopify catalog are built section-first for exactly this reason: product pages, collection pages, and the homepage all expose a real set of section options rather than a handful of homepage-only blocks bolted onto an otherwise fixed layout. For a category-specific example, the Optics Shopify theme treats its product gallery, lens/coating option groups, and trust-signal content as separate sections and blocks, which means a merchant selling eyewear can rearrange or extend that page without waiting on a developer every time a new coating option or promotional banner needs a spot near the buy box.

Common Mistakes to Avoid

A few patterns come up repeatedly for merchants and designers new to the OS 2.0 model.

• Editing theme code to reorder sections. If a layout change is achievable by dragging sections in the editor, do it there — hand-editing the JSON template directly is fragile and easy to break, and it defeats the purpose of the section model.
• Adding too many blocks to one section. A testimonials section with thirty blocks will still render, but the section was likely designed with a reasonable number in mind; test how it looks at the count you actually plan to use, not just in the abstract.
• Assuming a section available on the homepage is available everywhere. Section availability is set per template in the section's schema (`"templates"` in some schema configurations, or by which JSON template references it) — check the specific page template you are editing rather than assuming.
• Duplicating sections instead of using blocks. If a theme's section already supports multiple blocks for repeatable content (like FAQ items or testimonials), use blocks rather than duplicating the whole section — it keeps settings consistent and the page easier to maintain.

Frequently Asked Questions

Do I need to know Liquid to use sections and blocks?

No. Adding, removing, reordering, and configuring existing sections and blocks is entirely a theme-editor task. Liquid knowledge is only needed if you want to build a brand-new section type that does not already exist in the theme.

What is the difference between a section and a block, in one sentence?

A section is a page-level chunk of content you add to a template; a block is a repeatable item you add inside a section.

Can I use app blocks in any section?

Only in sections whose schema explicitly allows app blocks (typically declared with a block type of `@app`). A well-built theme includes this in the sections where merchants are most likely to want an app widget, such as the product page and footer.

Is every current Shopify theme OS 2.0?

No. Shopify still distributes and supports some pre-OS 2.0 ("vintage") themes, and older custom themes may not have been upgraded. If sections and blocks are a priority, confirm OS 2.0 support before purchasing — every theme in our Shopify catalog is built on OS 2.0.