Online Store 2.0: Sections, Blocks, and App Blocks

Before Online Store 2.0, product and collection pages used fixed Liquid templates. Merchants could customize some settings but could not rearrange page structure without developer edits. OS 2.0 introduced JSON templates that reference an ordered list of sections, each with its own settings and blocks. Every major template type—home, product, collection, page, blog, article, cart—can be composed visually in the theme editor.

The shift moved customization power from code deploys to merchant-safe configuration. Developers define section schemas with settings types, block types, and presets; merchants assemble pages without touching Liquid. Apps can inject UI via app blocks and app embed blocks. This architecture is now the Shopify standard; legacy Liquid-only templates remain supported but should not be the foundation for new theme work.

A section is a self-contained unit with Liquid markup, a {% schema %} block, and optional scoped CSS or JS. Sections appear in the theme editor sidebar and can be added, removed, reordered, and duplicated on JSON templates. Each section instance stores its settings and block tree in settings_data.json or the template JSON file.

Section files live in sections/ and are referenced by type name: a file hero.liquid is added as {"type": "hero", "settings": {...}} in product.json. Sections can declare max_blocks, limit how many times they appear via enabled_on/disabled_on, and tag themselves for template filtering. Well-designed sections expose meaningful settings—heading, image picker, collection reference—while hiding implementation details in snippets.

Blocks are sub-units within a section. A slideshow section might define block types for slide, each with image, heading, and link settings. Merchants add, remove, and reorder blocks inside the section panel. In Liquid, iterate with {% for block in section.blocks %} and branch on block.type. Always use {{ block.shopify_attributes }} on the wrapper element so the theme editor can highlight editable blocks.

Theme blocks (Shopify's shared block library feature) allow reusable block definitions referenced across multiple sections, reducing duplication for common patterns like heading, text, button, and image. Blocks differ from sections in scope: blocks cannot exist on a page without a parent section, and block settings schemas are declared inside the parent section's schema under blocks: []. Each block type needs a type string, name, and settings array following the same setting type vocabulary as section settings.

App blocks let Shopify apps render storefront UI inside theme sections without editing theme code. A section schema includes a block type with "type": "@app" to accept app-provided blocks. When a merchant installs an app and adds its block, Shopify injects the app's deep-linked UI. Theme developers must not hardcode app markup; they provide insertion points and document which sections support apps.

App embed blocks (app embeds) load globally or on specific templates via theme editor App embeds panel—think floating widgets, analytics, or consent banners. They differ from app blocks in placement: embeds attach at theme level, while app blocks live inside section block lists. Both require apps to declare theme app extensions in their app configuration. Theme developers coordinate with app partners to ensure @app block slots exist in high-intent sections like main-product and featured-collection.

Presets in section schema define how a section appears when merchants add it from the library. A preset includes name, settings defaults, and blocks array with prefilled block instances. Good presets accelerate merchant setup: a "Featured collection grid" preset might ship with heading block and collection setting already configured.

The default preset (first in the presets array or implicit from section settings) controls initial state. Use presets to showcase section flexibility without overwhelming merchants with empty blocks. Combine presets with enabled_on to restrict sections to appropriate templates—product sections on product.json only—preventing clutter in the wrong editor contexts. OS 2.0 rewards developers who think like product designers: flexible schemas, sensible defaults, and editor previews that match live storefront rendering.