Shopify Online Store 2.0 represents the most significant architectural shift in the platform's history. Released at Shopify Unite 2021 and now fully mature, OS 2.0 fundamentally changes how themes are built, how merchants customize their stores, and how apps integrate with the storefront. At StrikingWeb, we have migrated dozens of stores to the new architecture, and the improvements in both developer experience and merchant autonomy are substantial.
This guide covers everything you need to know as a developer working with OS 2.0 — from the core architectural changes to practical migration strategies and best practices we have refined through production deployments.
Understanding the Architectural Shift
Before OS 2.0, Shopify themes were built around a rigid template system. Each page type — product, collection, cart, blog — had a single template file. Sections, the drag-and-drop content blocks that merchants could rearrange, were limited to the homepage. If a merchant wanted to add a testimonial block to their product page, they needed a developer to modify the template code directly.
OS 2.0 removes this limitation entirely. Sections can now be added to any page in the store, and templates are defined using JSON rather than Liquid. This separation of structure from presentation gives merchants genuine design flexibility while keeping the codebase clean and maintainable.
JSON Templates
The foundation of OS 2.0 is JSON templates. Instead of Liquid files that mix markup with template logic, JSON templates define which sections appear on a page and in what order. A product template might look like this:
{
"sections": {
"main": {
"type": "main-product",
"settings": {}
},
"recommendations": {
"type": "product-recommendations",
"settings": {
"heading": "You may also like"
}
}
},
"order": ["main", "recommendations"]
}Each section referenced in the JSON template is a standalone Liquid file with its own schema, settings, and blocks. Merchants can add, remove, and reorder these sections through the theme editor without touching code.
Sections Everywhere — The Core Feature
The "sections everywhere" capability is what most people associate with OS 2.0, and for good reason. It transforms how stores are built and maintained.
Building Reusable Sections
When designing sections for OS 2.0, think in terms of composable, self-contained components. Each section should handle its own data fetching, styling, and responsive behavior. At StrikingWeb, we follow several principles when building sections:
- Single responsibility: Each section does one thing well — a hero banner, a product grid, a testimonial carousel, or a newsletter signup
- Configurable through settings: Colors, spacing, layout options, and content should all be adjustable through the section schema
- Block-based content: Use blocks within sections for repeatable content elements like slides, features, or FAQ items
- Responsive by default: Every section must work across all viewport sizes without requiring merchant configuration
Section Schema Design
A well-designed schema is the difference between a section that merchants love and one that generates support tickets. Include sensible defaults, group related settings, and use clear labels. The schema should expose enough control to cover common use cases without overwhelming non-technical users with options they will never need.
We recommend organizing settings into logical groups using header-type settings. Separate content settings from layout settings, and layout settings from style settings. This makes the theme editor feel intuitive rather than like a wall of toggles.
Metafields — Structured Content Without Apps
OS 2.0 introduced native metafield support in the theme editor, transforming metafields from a developer-only concept into a merchant-facing content tool. This is a game changer for stores that need structured data beyond the standard Shopify fields.
Defining Metafield Schemas
Metafield definitions create structured, validated fields that appear directly in the Shopify admin. You can define metafields for products, variants, collections, customers, orders, and pages. Each definition specifies a namespace, key, type, and validation rules.
Common use cases we implement with metafields include:
- Product specifications (dimensions, materials, care instructions)
- Size charts and fit guides linked to specific product types
- Warranty information and documentation PDFs
- Related product cross-references for manual curation
- Collection-level banners and promotional messaging
- Customer-specific loyalty tier information
Dynamic Sources in the Theme Editor
The real power of metafields in OS 2.0 is dynamic sources. Any section setting that accepts text, images, URLs, or other content types can be connected to a metafield. This means a single product template can dynamically pull different content for different products without any conditional logic in the Liquid code.
For example, instead of building a complex Liquid template that checks for product type and renders different specification tables, you create a generic specifications section and connect it to metafields. The merchant maps the fields in the theme editor, and the section automatically adapts to each product's data.
App Extensions and Theme App Blocks
OS 2.0 fundamentally changes how apps integrate with themes. The old approach — where apps injected JavaScript and modified theme files during installation — was fragile and created conflicts between apps. Theme app blocks replace this with a clean, sanctioned integration point.
How Theme App Blocks Work
Apps register blocks that appear in the theme editor alongside native sections. Merchants can add, position, and configure app blocks just like any other section content. When an app is uninstalled, its blocks are cleanly removed without leaving orphaned code in the theme.
For theme developers, supporting app blocks means including an app block type in your section schemas. This tells the theme editor that your section accepts app content. The actual rendering is handled by the app — your theme just provides the container.
Building App Extensions
If you are building Shopify apps, the transition to theme app extensions is essential. The key architectural decisions involve choosing between app blocks (content within a section), app embed blocks (floating elements like chat widgets), and full-page app extensions.
The shift to theme app blocks is not optional — it is the future of Shopify app development. Apps that still rely on ScriptTag and theme file modifications are building on a foundation that Shopify is actively deprecating.
Migration Strategy
Migrating an existing store to OS 2.0 requires careful planning. We have refined our migration approach across dozens of projects, and the following framework minimizes risk while maximizing the benefits of the new architecture.
Phase 1: Audit and Plan
Start by auditing the existing theme. Identify all custom sections, template modifications, and app integrations. Document which features rely on the old architecture and which apps have already released theme app extensions.
Phase 2: Build the OS 2.0 Theme
We recommend building on Shopify's Dawn theme as a starting point rather than converting an old theme in place. Dawn provides a clean, performance-optimized foundation built specifically for OS 2.0. Customize it to match the existing store's design while taking advantage of the new architecture.
Phase 3: Migrate Content and Metafields
Set up metafield definitions and migrate existing structured data. If the old store used apps for custom fields, you may be able to replace them with native metafields, reducing app dependencies and improving performance.
Phase 4: Test and Launch
Use Shopify's theme preview to test the new theme alongside the existing one. Verify that all pages render correctly, app integrations work, and the checkout flow is intact. We recommend running the new theme in preview for at least a week before switching live.
Performance Considerations
OS 2.0 themes built on Dawn are significantly faster than older themes. However, the sections-everywhere model can introduce performance issues if sections are not built carefully. Each section adds to the page's DOM and potentially loads additional CSS and JavaScript.
Our performance guidelines for OS 2.0 sections include lazy loading images and videos, deferring JavaScript until interaction, minimizing the use of external fonts within individual sections, and using CSS custom properties for theme-wide consistency rather than duplicating styles across sections.
What This Means for Merchants
The practical impact of OS 2.0 for merchants is dramatic. Stores that previously required developer time for every layout change can now be managed independently. Our clients report that routine content updates that used to take days of back-and-forth now take minutes in the theme editor.
This does not eliminate the need for developers — complex functionality, custom integrations, and performance optimization still require expertise. But it shifts the developer's role from ongoing content maintenance to high-value architectural work.
Looking Ahead
Shopify continues to invest heavily in the OS 2.0 ecosystem. Recent additions include improved metaobjects for content modeling, expanded filtering capabilities, and richer theme editor interactions. For developers building on Shopify, investing in OS 2.0 expertise is essential.
At StrikingWeb, we build every new Shopify project on OS 2.0 and offer migration services for existing stores. Whether you are launching a new store or modernizing an existing one, the OS 2.0 architecture delivers measurable improvements in performance, flexibility, and total cost of ownership.