Shopify 2.0 Theme Development Guide
Introduction
Shopify’s Online Store 2.0 architecture changed what a theme is capable of, but most stores still run on habits left over from the old Shopify 1.0 days. If your product team is still filing a support ticket every time a merchant wants to rearrange a homepage section, the theme underneath your store is probably not doing its job.
This guide walks through what Shopify 2.0 theme development actually involves in 2026: the file structure, the sections-and-blocks model, metafields, performance requirements, and the workflow that separates a theme built for one launch from a theme that keeps paying off for years.
It is written for developers, agencies, and merchants evaluating a build, whether that means customizing Dawn, extending a Theme Store purchase, or commissioning a fully custom theme.
What Is Shopify 2.0 Theme Architecture?
Online Store 2.0 replaced Shopify’s older Liquid-only template system with JSON templates, and that single change reshaped how themes get built. Before OS 2.0, custom section layouts were limited to the homepage. Everything else, product pages, collection pages, blog posts, was locked into rigid `.liquid` files that only a developer could safely touch.
With OS 2.0, sections can appear on any page type. Merchants can add, remove, and reorder them directly in the theme editor, without opening a code file. Developers still own the underlying system: section architecture, schema design, and performance budgets. Merchants own content and layout, inside guardrails the developer defines.
That split of responsibility is the real value of Shopify 2.0 theme development. A well-built theme turns a store into a self-serve asset rather than a recurring developer dependency.
Core File Structure
Every Shopify 2.0 theme is organized around a consistent set of directories, and understanding them is the first real skill in this discipline.
Templates (JSON) define which sections appear on a given page type, such as `product.json` or `collection.json`. Sections are self-contained, reusable components, a hero banner, a featured collection, a testimonials block. Blocks are the configurable elements that live inside a section, giving merchants control without needing new code for every variation.
Snippets hold smaller, reusable pieces of Liquid logic that keep templates from repeating themselves. Layout files, most importantly `theme.liquid`, wrap around every page to provide shared elements like the header and footer. Config stores theme-wide settings, and assets holds your CSS, JavaScript, and images.
One practical detail that trips up newer developers: Shopify now recommends `render` over the older `include` tag when pulling in snippets. `render` creates an isolated scope, which makes components easier to reason about and far less fragile as a theme grows.
Build, Customize, or Buy?
Not every store needs a custom theme, and recommending one when it is not justified is a fast way to burn a client’s budget. Free OS 2.0 themes like Dawn, Refresh, and Horizon already implement the architecture correctly and cost nothing to start from.
Theme Store paid themes sit in the middle, typically a few hundred dollars one time, and work well for brands that want more polish without a development budget. Fully custom builds make sense when a store has complex product logic, bespoke UX requirements, or brand differentiation that off-the-shelf sections cannot deliver, and they typically run into five figures depending on scope.
A sensible default for most new stores is to start from Dawn and customize from there. Starting from a blank repository adds weeks of foundational work with no guaranteed conversion advantage over a well-optimized starting point.
Setting Up a Real Development Environment
If a team is still editing a live theme directly in the browser or zipping files by hand, that is the first problem to fix before writing a single section. The modern baseline for Shopify 2.0 theme development is the Shopify CLI, a local development store, version control, and staged pushes.
The CLI’s live preview lets you develop locally and see changes against real store data without touching the live theme. `theme push –unpublished` gives your team a clean, shareable environment for stakeholder review before anything goes live. Git, ideally connected through Shopify’s GitHub integration, keeps a full history of theme changes and supports proper branching for larger teams.
Run Theme Check before every meaningful push. It catches Liquid errors, schema problems, and accessibility issues early, which is far cheaper than catching them after a merchant has already built content on top of a broken section.
A practical release sequence looks like this: branch for the feature, develop locally with CLI preview running, run Theme Check, push to an unpublished theme for QA, test editor behavior (not just storefront output), and only then publish.
Designing Sections, Blocks, and Schema
This is where most Shopify 2.0 theme development projects succeed or fail, and it usually has nothing to do with code quality. New OS 2.0 builds tend to break in the editor, not in code review, because developers expose every setting they can think of and hand merchants a control panel nobody actually wants to use.
The better rule is restraint. Expose the content controls a merchant will genuinely change often: headings, body copy, image pickers, block order. Keep visual controls narrow, a handful of approved layout and color choices will protect brand consistency far better than fifty combinations that can break it.
Set sensible defaults so every section looks production-ready the moment it is added, before a merchant touches a single setting. And build sections and blocks to be reusable across templates wherever it makes sense, rather than creating a near-duplicate section for every page.
A useful gut check for any new build: if a merchant still needs a developer to rearrange common page content, the theme is not truly OS 2.0-ready, no matter what folder structure it uses.
Metafields and Dynamic Sources
Metafields are what let a theme handle structured, product-specific data, size guides, spec sheets, ingredient lists, without hardcoding values or relying on a third-party app for every field. OS 2.0 lets merchants manage metafields directly from the admin, no API work required for basic use cases.
Dynamic sources take this further by connecting a section setting directly to a metafield through the `dynamic_source` property in your schema. Once that connection exists, a merchant can populate a section from product data, page-specific metafields, or other dynamic sources entirely through the visual editor.
This matters because hardcoded values are one of the most common ways Shopify themes accumulate technical debt. A homepage built around specific product IDs or collection names breaks the moment a merchant launches a new collection, and every one of those breaks becomes a support ticket.
App Blocks and Theme App Extensions
App blocks let third-party Shopify apps inject UI directly into specific sections, a reviews widget on a product page, a loyalty badge, a chat launcher, without any custom code from your team. Merchants add them the same way they add any other block, through the theme editor.
The cleanup story is just as important as the integration story. When a merchant uninstalls an app that uses app blocks properly, its block and associated assets are removed automatically. This eliminates the old problem of ghost script tags left behind by uninstalled apps, quietly slowing down a store months after anyone remembers installing them.
When evaluating which apps to recommend to a client, checking for app-block support is a fast signal that the app’s developers built with OS 2.0 best practices in mind, rather than bolting legacy embed code onto a modern platform.
Performance Optimization
Shopify enforces a performance floor for Theme Store submissions, but that floor is only a starting point, not a competitive target. The better-performing themes in the ecosystem clear Core Web Vitals by a wide margin, and that gap directly affects conversion, particularly on mobile, where the majority of ecommerce sessions now happen.
Images are usually the single largest contributor to page weight in ecommerce stores. Shopify’s built-in image filters, used through `img_url` with the correct size parameters, ensure visitors only download the resolution their device actually needs, rather than a full-size original scaled down in the browser.
Asset management matters just as much. Bundle CSS and JavaScript strategically rather than shipping one monolithic file for every page, and treat JavaScript as a progressive enhancement layer rather than a requirement for core functionality wherever possible.
Accessibility and SEO Structural Best Practices
Accessibility is no longer an optional pass on Shopify 2.0 theme development; Shopify actively enforces baseline standards, and stricter accessibility, performance, and UX requirements are part of the platform’s direction going forward. Sufficient color contrast, accessible font choices, and keyboard-navigable interactive elements should be baked into a theme’s defaults, not left for a merchant to configure correctly on their own.
The same structural discipline that improves accessibility tends to improve SEO. Semantic HTML and a meaningful heading hierarchy help search engines understand page content, while clean markup keeps assistive technology usable for real visitors.
Testing and Release Workflow
A theme is not done when the last section is coded, it is done when it has survived a proper QA pass. Testing editor behavior deserves as much attention as testing the storefront output, since merchants will spend far more time in the editor than most developers expect.
Maintaining separate development, staging, and production environments, rather than editing a live theme directly, prevents untested changes from ever reaching real customers. This becomes non-negotiable the moment more than one developer is working on the same theme.
Migrating a Legacy 1.0 Theme to 2.0
Migrating an existing Shopify 1.0 theme to OS 2.0 architecture is more approachable than most teams expect. The core work is converting `.liquid` template files into `.json` template wrappers that reference your existing section files; the underlying Liquid logic inside those sections typically does not need to change.
Depending on how many templates a theme has, a full migration commonly takes several hours per template, plus additional time to audit whether existing sections were built with hardcoded values that need to be replaced with settings or metafields along the way. It is also a good opportunity to have a developer review the `/templates` folder for shortcuts, a “2.0 theme” that still hardcodes sections onto a `product.liquid` file is a 1.0 theme wearing a 2.0 folder structure.
How Evolution Infosystem Approaches Shopify 2.0 Theme Development
We build and customize Shopify themes as part of our broader Shopify development practice, and the principle above, merchant control within developer-defined guardrails, shapes every build we take on. Whether a project starts from Dawn or from a blank repository, the goal is the same: a theme that keeps working for the merchant long after launch day.
For stores that need functionality beyond the theme editor itself, our Shopify custom app and Shopify Functions development teams extend what a theme alone can do, from custom checkout logic to bespoke merchandising rules. If your current theme needs a focused refresh rather than a full rebuild, our Shopify theme customization service is usually the faster, lower-risk starting point.
For a deeper look at checkout-level customization on the Shopify Plus tier, see our related post on Shopify Functions and checkout extensions for enterprise stores.
Frequently Asked Questions
Is Shopify 2.0 free?
Yes. Online Store 2.0 is the current theme architecture for every Shopify store, and Shopify’s own reference themes, including Dawn, Refresh, and Horizon, are free to use as a starting point for custom development.
Do I need to know how to code to use a Shopify 2.0 theme?
No, for day-to-day content and layout changes. A well-built OS 2.0 theme lets merchants handle most section rearranging, content edits, and even metafield-driven content through the theme editor without touching code. Custom sections, performance work, and app integrations still require a developer.
How long does a custom Shopify theme build take?
A straightforward custom build built on top of Dawn typically takes a few weeks. A fully custom theme built from scratch, with bespoke sections and unique merchandising logic, commonly takes four to eight weeks or longer depending on scope.
Should I start from Dawn or build from scratch?
Start from Dawn unless your store has requirements a well-structured sections-and-blocks system genuinely cannot meet. Building from a blank repository adds significant foundational work without a guaranteed performance or design advantage over a properly customized Dawn build.
What is the difference between a Shopify 1.0 and 2.0 theme?
Shopify 1.0 themes limit custom section layouts to the homepage, with other page types locked into fixed Liquid templates. Shopify 2.0 themes use JSON templates that allow sections on every page type, giving merchants far more editor-level control without developer involvement.
How much does Shopify theme development cost?
Costs vary widely by scope. Simple customization of an existing theme can run a few thousand dollars, while a fully custom theme build commonly falls in the five-figure range, depending on the complexity of sections, metafield strategy, and performance requirements.
Conclusion
Shopify 2.0 theme development is less about mastering new syntax and more about designing the right boundary between what a merchant controls and what a developer owns. Get that boundary right, build on a solid foundation like Dawn where it makes sense, respect performance and accessibility as defaults rather than afterthoughts, and a theme becomes a long-term asset instead of a recurring support cost.
If you are weighing whether to customize an existing theme or commission a custom build, Evolution Infosystem’s Shopify team is happy to review your current setup and give you a straight answer before you commit a budget to it.