Shopify Online Store 2.0 & Theme Customization Guide

⏱ 23 min read

Shopify Online Store 2.0 changed theme customisation from a homepage-first system into a much more modular storefront architecture.

But there is an important 2026 update that many Shopify guides still miss: Online Store 2.0 is no longer Shopify’s newest theme architecture.

Shopify now describes themes that support reusable and nestable theme blocks, including the Horizon family, as its latest theme architecture. These themes retain the core capabilities introduced by Online Store 2.0 while adding another layer of reusable block-level customisation.

That does not make Online Store 2.0 obsolete.

It does mean Shopify merchants should stop treating “OS 2.0 compatible” as the final technical benchmark for a modern theme.

The better question is whether the theme gives your team enough control without creating performance problems, update conflicts, app dependency, or a permanent queue of developer tickets.

Those figures come from Shopify’s current developer requirements. A JSON template can render up to 25 sections, themes can contain up to 1,000 JSON templates, and Theme Store submissions must average at least 60 for Lighthouse performance and 90 for accessibility across home, product, and collection pages on both desktop and mobile.

Sources: Shopify theme limits and Shopify Theme Store requirements.

What Online Store 2.0 actually changed

Online Store 2.0 was announced in 2021, but its impact is still visible in almost every serious Shopify theme project.

The biggest architectural shift was the move toward JSON templates and modular sections across most storefront page types.

Before this architecture, merchants had much more freedom on the homepage than on product, collection, article, and standard pages. Many non-homepage changes required direct edits to Liquid templates or hard-coded sections.

Online Store 2.0 changed that model.

Its core capabilities include:

• sections on most storefront pages instead of only the homepage;
• JSON templates that store the section structure and settings of a page;
• dynamic sources that connect theme settings to Shopify data and metafields;
• app blocks delivered through theme app extensions;
• more flexible alternate product, collection, page, and other templates;
• more merchant control from the visual theme editor.

Shopify’s own Online Store 2.0 documentation still describes these as the central benefits of the architecture.

The practical effect is simple: a developer can build a reusable storefront system, and the merchant can then assemble pages from approved components instead of editing code each time.

The 2026 update: Online Store 2.0 is not the latest architecture anymore

This distinction matters because a lot of current Shopify content still uses “Online Store 2.0” and “latest Shopify theme architecture” as if they mean exactly the same thing.

They no longer do.

Shopify currently distinguishes three architecture groups:

• Vintage themes;
• Online Store 2.0 themes;
• themes that support theme blocks.

Shopify describes the third group as the latest theme architecture version. The Horizon family is one example.

Theme-block-compatible themes include the functionality available in OS 2.0, but introduce more reusable and nestable blocks.

A theme block is different from the older section-specific block model. It exists as its own Liquid file in the theme’s /blocks directory and can be reused across compatible sections. Theme blocks can also contain other nested theme blocks.

See Shopify’s current theme architecture comparison and developer documentation for blocks.

What current competitor guides cover, and what they often underweight

We reviewed current Shopify theme customisation material from Shopify itself and several 2026 merchant and development guides, including FlowCart, Simon Iong, and Evolution Infosystem.

They correctly focus on areas such as sections, blocks, metafields, the theme editor, custom code, app integrations, performance, and the choice between customising an existing theme and building a new one.

For a 2026 Shopify implementation, however, five other questions deserve more weight.

How Shopify theme architecture works

A Shopify theme is not one large page file.

Modern themes are composed of several layers that work together.

In an OS 2.0 theme, JSON templates are particularly important.

They do not contain the full page HTML. Instead, they store section references, settings, and ordering. Liquid markup lives in the relevant section files.

This separation is what gives merchants the ability to rearrange the page in the theme editor without rewriting template code.

Sections everywhere: the feature most merchants actually feel

Sections on every page are the most visible part of Online Store 2.0.

A good theme might provide reusable sections for:

• hero banners;
• featured collections;
• comparison tables;
• testimonials;
• product recommendations;
• image-with-text content;
• brand stories;
• video;
• FAQs;
• trust signals;
• press logos;
• promotional modules;
• cross-sells;
• custom product information.

Those components can then be reused across product, collection, page, blog, and other supported JSON templates.

This is a much better operating model than hard-coding a new banner into one template every time the marketing team runs a campaign.

But flexibility still depends on how the theme was built.

Shopify provides the architecture. The theme developer decides which sections exist, which settings they expose, which blocks they accept, and how reusable they really are.

JSON templates make product and landing-page variation scalable

Alternate templates are one of the most commercially useful parts of Shopify’s theme architecture.

A store does not need every product to share one identical product-page structure.

You can create different product templates for different use cases.

For example:

• a standard product template;
• a subscription product template;
• a high-consideration product template with more education;
• a product template for bundles;
• a furniture template with dimensions and delivery information;
• a pre-order template;
• a B2B-oriented layout;
• a campaign-specific landing-page template.

The same principle applies to collections and pages.

Shopify’s current architecture supports up to 1,000 JSON templates per theme, although good architecture does not mean creating hundreds of nearly identical templates.

The goal is reuse.

If ten templates differ only because a headline was hard-coded in each one, the architecture is already drifting in the wrong direction.

Dynamic sources, metafields, and metaobjects are where customisation starts scaling

Flexible sections solve layout.

Dynamic sources solve data.

A dynamic source lets a compatible theme setting pull information from the current Shopify resource or from custom metafields.

Instead of hard-coding “Material: Oak” into a product section, the section can connect to a product metafield such as material. Every product then supplies its own value through Shopify data.

Common uses include:

• materials;
• ingredients;
• care instructions;
• size guides;
• dimensions;
• shipping notes;
• product specifications;
• compatibility information;
• warranty details;
• designer or manufacturer data;
• custom badges.

This is the difference between a theme that looks custom and a theme that behaves like a scalable content system.

For catalogues with repeated structured information, metafields and metaobjects can reduce manual content duplication and make templates much easier to manage.

Case example: WMK Berlin and reusable product-page structure

A practical Skalum example comes from our WMK Berlin Shopify project.

WMK Berlin sells one-of-a-kind vintage furniture. Each item can have different dimensions, materials, condition information, origin, delivery details, and product history.

Putting all of that styling directly inside every product description would create a maintenance problem.

Instead, we separated content from presentation. A global style system lives in the Shopify theme, while each product description uses predefined HTML classes for elements such as dimensions, score blocks, accordions, warnings, and reviews.

This is the same architectural principle that makes OS 2.0 customisation valuable: reusable storefront logic should live in the theme, while product-specific information should remain structured and editable.

App blocks are better than apps writing directly into the theme

Apps are one of the biggest sources of theme complexity.

Online Store 2.0 improved this through theme app extensions.

Theme app extensions can provide app blocks and app embed blocks.

An app block can be placed by the merchant into a compatible section using the theme editor. The app does not need to rewrite the theme’s Liquid files just to insert its storefront component.

Shopify explicitly describes this approach as reducing the risk of breaking theme code and making apps easier to support and remove.

When an app that uses the extension framework is uninstalled, its extension code is removed with it.

That is much cleaner than old integration patterns that could leave snippets, scripts, or hard-coded includes behind after uninstall.

See Shopify’s theme app extension documentation.

Apps are often the biggest driver of theme complexity and load time. Which apps slow your storefront down and how to remove their code cleanly is covered in our guide to finding the app slowing your store. If a feature should run as your own theme app extension instead of yet another third-party app, that is a job for custom Shopify app development.

Theme blocks take merchant editability one step further

The newer theme-block architecture extends the same modular idea.

Traditional section blocks are defined inside one section and belong to that section.

Theme blocks are standalone Liquid files that can be reused by different compatible sections.

They can also support nesting.

This opens up more composable layouts.

A merchant might work with reusable building blocks such as:

• heading;
• rich text;
• button;
• image;
• icon;
• group;
• product information;
• media;
• nested content groups.

The commercial value is not “more drag and drop.”

The value is that a development team can create a controlled design system with flexible components while giving the merchant more freedom to compose those components.

Done well, this reduces one-off section development.

Done badly, it can create a page builder inside the theme with too many decisions and inconsistent layouts.

Shopify theme limits: what a theme can technically contain

If you customise a theme heavily, you will eventually meet fixed platform limits. Shopify lists them in its developer documentation (as of October 2026):

When a limit is exceeded, Shopify shows an error in the theme editor or when the theme is saved, uploaded, or synced with Shopify CLI. Statically rendered blocks added with {% content_for %} do not count toward the per-section or per-template block limits, according to the documentation.

In practice the limit is rarely the real problem. The question is whether a page with 25 sections still loads quickly and stays manageable for your team. Treat the numbers as a planning ceiling, not a target.

Theme customisation has levels, and not every change needs a developer

The safest principle is to use the least invasive layer that solves the requirement properly.

Changing a button colour should not require modifying Liquid.

A new reusable comparison module should not be pasted as raw HTML into twenty pages.

A complex product configurator should not be forced into Custom CSS.

How to customize a Shopify theme step by step

Most problems with theme customisation come from the process, not the code: someone edits the live theme directly, tests only on desktop, and cannot get the old version back. The workflow below follows Shopify’s guidance on customizing themes (as of October 2026).

• 1. Duplicate the theme. Shopify recommends creating a backup copy before editing, so you can discard changes and start over without risking the live store.
• 2. Check architecture and support. Find out which architecture version your theme uses (see below) and who supports it. That determines which sections, blocks, and settings you will find in the theme editor.
• 3. Start in the theme editor. There you can change theme settings, add, remove, edit, and rearrange content, and preview the result.
• 4. Touch code only when settings are missing. Shopify positions code editing for cases where the theme has no suitable setting and you are comfortable with HTML, CSS, and Liquid.
• 5. Test the preview on desktop and mobile. In our projects that means at least the homepage, a collection, a product page, the cart, and the checkout entry point, filled with real content instead of placeholders.
• 6. Publish only then. The tested copy becomes the live theme, and the previous version stays in the theme library as a fallback.

Local development with Shopify CLI and GitHub

Once several people work on a theme, or changes go beyond settings, a developer workflow pays off. According to the Shopify CLI documentation, shopify theme dev creates a temporary development theme connected to your store and hot-reloads CSS and section changes. theme pull and theme push move files between your machine and Shopify, and theme check runs Theme Check to flag deviations from Liquid and theme best practices.

The Shopify GitHub integration lets you connect one or more branches to themes (Online Store > Themes > Add theme > Connect from GitHub). Pushes to the branch update the connected theme, and edits made in the theme editor or code editor are committed back automatically, which Shopify says cannot be disabled. That makes it the cleanest option for campaign branches and traceable changes (as of October 2026).

Custom CSS is useful, but it has a ceiling

Shopify lets merchants add custom CSS globally or at section level in supported themes.

That is useful for small styling changes where creating a new theme component would be excessive.

But Shopify currently limits global Custom CSS to 1,500 characters and section-specific Custom CSS to 500 characters.

Shopify also warns that selectors can stop working after a theme update if the underlying theme markup or classes change.

Source: Shopify Custom CSS documentation.

Market-specific customisation is now part of theme architecture

International Shopify stores no longer need every market to display exactly the same content and layout.

Compatible themes can support contextual customisation for different markets.

Shopify allows merchants on Advanced and Plus plans to adapt theme content for specific markets. Examples include changing promotional sections, navigation, banners, and product-page messaging for one region without changing the default storefront experience everywhere.

Shopify Plus merchants using B2B can also adapt compatible themes for B2B versus D2C customer contexts.

This functionality depends on compatible JSON-template architecture.

See Shopify’s store contextualisation documentation.

This makes theme architecture part of international ecommerce operations.

If a DACH store needs different merchandising for Germany, Switzerland, and another European market, hard-coding every regional difference into Liquid conditions is no longer the only option.

Theme updates: where bad customisation becomes expensive

One of the strongest reasons to keep theme customisation native and modular is future updates.

For themes installed from the Shopify Theme Store, Shopify lets merchants add updated versions to their draft themes.

Theme-editor customisations are copied into the updated version. That includes settings, section ordering, block settings, new templates, and supported app embeds or extensions.

Code modifications can also be included when they do not conflict with changes in the new theme version.

If Shopify cannot merge those code changes, they need to be copied or rebuilt manually.

This is why two stores using the same premium theme can have completely different update costs.

Shopify’s theme update documentation explicitly recommends reviewing updated copies before publishing and keeping backups of customised code.

Updating a Shopify theme without losing your customisations

According to Shopify’s theme update help (as of October 2026), updates work for themes installed from the Theme Store, not for themes uploaded from elsewhere. The process:

• Check the version: In Online Store, click the theme’s version number. If an update exists, a notification replaces it.
• Read the release notes and add the update with “Add to draft themes”. Shopify creates a draft copy prefixed “Updated copy of” and leaves the live theme untouched.
• Check the code-edit status: The theme card tells you whether your code edits were included (“code edits successfully included”) or not (“could not be included”).
• Copy missing edits manually: A diff app from the Shopify App Store helps you find your changes. Save a copy of your customised code before you update.
• Test custom CSS selectors and apps: Confirm your selectors still exist and your apps are compatible with the new version. If you changed the schema yourself, for example by raising a section’s block limit, Shopify warns the update can fail.
• Publish only after a thorough review.

Vintage Shopify themes no longer receive updates, according to Shopify, which recommends moving to a newer theme or working with a Shopify Partner. If a Theme Store theme does not show the “Add to draft themes” option, you can install a fresh copy from the Theme Store and reapply your settings and customisations manually.

Theme customisation and performance have to be designed together

Flexible themes make it easier to add content.

That is good for marketing. It can be bad for performance if nobody owns the performance budget.

Shopify’s current theme performance guidance warns that every new feature, design update, app, script, and content change can create Core Web Vitals regressions.

The most important storefront metrics are:

• Largest Contentful Paint for loading experience;
• Interaction to Next Paint for interaction responsiveness;
• Cumulative Layout Shift for visual stability.

Shopify specifically recommends not lazy-loading the LCP image, using fetchpriority="high" for the likely LCP image, avoiding reveal animations that delay the LCP event, and rendering essential storefront content in Liquid and HTML rather than waiting for client-side JavaScript.

Shopify also warns against deeply nested Liquid loops because rendering cost can grow rapidly with catalogue size.

See Shopify’s current theme performance best practices.

Use field data, not only Lighthouse screenshots

A theme can look fast in one lab test and still perform poorly for real visitors.

Shopify’s Web Performance Dashboard provides real-user monitoring data for LCP, INP, and CLS and lets merchants examine results by device and other dimensions.

Shopify’s own testing guidance is straightforward: use field data to identify problems, lab data to debug them, and field data again to verify the fix.

That is also how Skalum approaches a Shopify Speed Audit. Performance work should identify the actual bottleneck instead of chasing one synthetic score.

Concrete levers for LCP are in our guide to the Shopify LCP fix without a theme rebuild. Why a good lab result can still mislead is explained in Shopify Core Web Vitals and Lighthouse scores.

Free, premium, or custom theme: which option fits your store?

People searching for “Shopify themes” usually want to know whether a free theme is enough, whether a premium theme is worth it, and when a theme should be built from scratch. The overview below is based on Shopify’s help on adding, previewing, and buying themes (as of October 2026).

Trying and buying a premium theme

• You can preview up to 19 paid themes at the same time. They are labelled “Theme trial”.
• Customisations you make during the trial are kept if you buy the theme. You cannot edit the theme code during the trial, though.
• A paid theme can only be published after purchase. Theme purchases are final sale, and the theme developer cannot issue refunds.
• How many themes your library can hold depends on your plan: Starter only gets the Spotlight theme, Basic, Grow, and Advanced up to 20, Shopify Plus up to 100.

Five questions before choosing a theme

• Which architecture version does the theme use: OS 2.0 or theme blocks?
• Does the demo cover your key page types and product types once you fill it with real copy and images?
• How does the theme perform on Core Web Vitals with your apps installed?
• Who provides support and updates, and for how long?
• What happens to your existing customisations if you switch?

If the question is bigger than a new theme and covers the whole storefront concept, our comparison of Shopify website redesign vs replatform helps you decide.

Should you customise your current theme or replace it?

This is the decision that saves or wastes the most money.

A store does not need a new theme every time the brand wants a new section.

But there is also a point where continuing to patch an old theme becomes more expensive than rebuilding.

Keep and customise the current theme when…

• the core theme is current and supported;
• performance is healthy;
• the product and collection structure basically works;
• only a limited set of custom components is missing;
• app integrations are clean;
• theme updates remain manageable;
• the problem is local rather than structural.

Consider a rebuild when…

• the store still runs on vintage architecture;
• many page types cannot use flexible sections;
• years of custom code make updates dangerous;
• app code is heavily embedded in theme files;
• product templates cannot support the merchandising model;
• performance problems are structural;
• every campaign requires a developer;
• the brand needs a design system that a generic theme cannot support cleanly.

Skalum’s Website Redesign Services are designed for the second case. A redesign should solve structural UX, theme, performance, and growth constraints rather than just refresh colours and typography.

Migrating a vintage theme to Online Store 2.0

Shopify still supports several migration paths.

You can:

• install a modern theme from the Shopify Theme Store;
• install a newer version of your existing theme if the developer provides one;
• manually convert relevant Liquid templates into JSON templates and move page markup into sections.

Shopify also states that an Online Store 2.0 migration is not mandatory if a vintage theme still meets the merchant’s needs.

However, there is an important migration warning.

Theme customisations and app modifications do not automatically transfer cleanly just because the new theme is OS 2.0 compatible.

Heavily customised themes are harder to migrate because custom code and app logic need to be assessed and rebuilt.

See Shopify’s OS 2.0 migration assessment.

Which architecture does your theme use? How to check

Shopify’s help page on theme versions explains how to identify the architecture yourself (as of October 2026):

• In the admin, open Online Store, click Edit theme, and choose Products > Default product. If an “Add section” button appears below the section list, the theme supports sections on every page (OS 2.0 or theme blocks). If it does not, the theme is likely vintage.
• Open Edit code from the actions menu. If the Sections folder contains files, it is a sectioned vintage theme. If it is empty, it is a non-sectioned vintage theme.
• Shopify does not describe a direct admin test that separates OS 2.0 from theme blocks there. Use the feature comparison table and the theme vendor’s documentation for that.

What a good custom Shopify section should look like

A custom section should solve more than one page.

That does not mean every section must be universal. It means developers should expose enough settings for the component to be reused within its intended purpose.

A strong section usually has:

• clear merchant-facing labels;
• sensible default values;
• controlled spacing settings;
• responsive image handling;
• content settings that can connect to dynamic sources where useful;
• blocks for repeated elements;
• app block support where third-party content may need to sit inside the section;
• accessible markup;
• scoped CSS;
• minimal JavaScript;
• mobile behaviour designed intentionally;
• no hard-coded merchant content inside the Liquid file.

A bad section often has the opposite characteristics.

It works on one page, contains hard-coded text, uses global CSS selectors, assumes one image ratio, loads a large JavaScript bundle everywhere, and requires a developer to change basic content.

If you need reusable Shopify content components rather than one-off patches, that is closer to custom Shopify development than normal theme-editor work.

Theme customisation should support CRO, not fight it

A flexible theme is not automatically a high-converting theme.

Giving a marketing team 80 possible sections does not guarantee that those sections create a clear buying journey.

Theme architecture should support:

• strong information hierarchy;
• clear navigation;
• scannable product information;
• visible trust signals;
• appropriate product media;
• clear variant selection;
• delivery and return information near decision points;
• responsive mobile controls;
• intentional cross-sell placement;
• campaign landing pages without unnecessary distractions.

That is why Skalum combines Shopify Website Design with theme development rather than treating design and code as unrelated steps.

If the store already has traffic but the buying journey is weak, a Shopify CRO process can help identify whether the real requirement is a theme change, a template change, a content change, or a smaller UX fix.

Case study perspective: architecture is only one part of growth

It is tempting to attribute conversion or SEO growth to a new theme.

That is usually too simplistic.

For example, Skalum’s Stein-Insel work combined technical SEO, new landing-page structure, content, structured data, internal linking, UX improvements, and broader SEO work.

The project moved organic impressions from 745,203 to 1,357,150 in the reported year-on-year comparison, an increase of about 82%.

But it would be misleading to call that an “82% theme customisation uplift.”

The theme and UX work were part of a broader system.

A practical Shopify theme audit for 2026

Before customising or rebuilding a Shopify theme, audit the current system.

Would rather not run this audit alone? As a Shopify agency, we review the architecture, apps, and performance of your theme and prioritise which customisations are actually worth doing.

Final verdict: what Online Store 2.0 means in 2026

Online Store 2.0 remains one of the most important changes Shopify made to theme development.

JSON templates, sections across page types, dynamic sources, and theme app extensions made Shopify storefronts much more modular and merchant-editable.

But Shopify theme architecture has continued to evolve.

In 2026, the latest architecture adds reusable and nestable theme blocks on top of the OS 2.0 model.

That changes the buying question.

A strong Shopify theme is not the theme with the most settings.

It is the one that gives the business enough freedom while preserving brand consistency, performance, accessibility, updateability, and technical clarity.

That might mean a well-configured premium theme.

It might mean a few custom sections.

It might mean migrating an old theme to modern architecture.

And for brands with more complex UX, merchandising, data, and growth requirements, it can mean a fully custom storefront system.

The mistake is assuming all four problems require the same solution.