Online Store 2.0 is a major improvement to Shopify's theme system. It gives both merchants and developers more flexibility when building and managing online stores.

Before Online Store 2.0, customizing pages often required editing theme code. With Online Store 2.0, merchants can add, remove, and rearrange content using a visual editor without needing a developer for every small change.

For developers, Online Store 2.0 introduces modern features such as JSON templates, sections on every page, app blocks, and improved support for metafields.

In this lesson, you'll learn what Online Store 2.0 is, why it was introduced, and the key features that make Shopify theme development more powerful.

What is Online Store 2.0?

Online Store 2.0 is Shopify's modern theme architecture.

It improves how themes are built and customized by making them more flexible and reusable.

With Online Store 2.0, merchants have greater control over their store's layout without editing code, while developers can create modular themes that are easier to maintain.

Why Was Online Store 2.0 Introduced?

Earlier Shopify themes had several limitations.

For example:

• Sections could only be added to the homepage.
• Customizing product pages required code changes.
• Apps often modified theme files directly.
• Managing custom product information was difficult.

Online Store 2.0 solves these problems by introducing new tools and a more flexible theme structure.

Key Features of Online Store 2.0

Sections on Every Page

One of the biggest improvements is that sections can now be used on almost every page, not just the homepage.

For example, a merchant can add or rearrange sections on:

• Product pages
• Collection pages
• Blog pages
• Custom pages

This makes theme customization much easier.

JSON Templates

Older Shopify themes used Liquid template files for page layouts.

Online Store 2.0 introduces JSON templates, which define which sections appear on a page and in what order.

{
  "sections": {
    "main": {
      "type": "main-product"
    }
  },
  "order": [
    "main"
  ]
}

This file tells Shopify which sections should appear on the page.

App Blocks

Before Online Store 2.0, installing an app sometimes required editing theme files manually.

Now, apps can add their own app blocks.

Examples include:

• Product reviews
• Live chat
• Trust badges
• Countdown timers
• Wishlist buttons

Merchants can add or remove these blocks directly from the Theme Editor without changing code.

Better Metafield Support

Metafields allow merchants to store custom information.

Examples include:

• Product specifications
• Ingredients
• Warranty details
• Care instructions
• Download links

With Online Store 2.0, developers can connect metafields directly to theme settings, making custom data easier to display.

Theme Editor Improvements

The Theme Editor became much more powerful with Online Store 2.0.

Merchants can now:

• Drag and drop sections.
• Rearrange page layouts.
• Add new blocks.
• Hide unused sections.
• Preview changes instantly.

This reduces the need for developer assistance when making simple design changes.

Reusable Sections

Developers can create reusable sections that work across multiple pages.

Examples include:

• Image banners
• Product sliders
• FAQ sections
• Customer testimonials
• Newsletter forms

Instead of creating separate code for each page, the same section can be reused wherever needed.

Theme File Structure

An Online Store 2.0 theme still includes familiar folders such as:

• Layout
• Templates
• Sections
• Snippets
• Assets
• Config
• Locales

However, templates are now commonly stored as JSON files, making layouts easier to manage and customize.

How Developers Work with Online Store 2.0

A Shopify developer can build flexible themes by creating sections and blocks that merchants can customize.

For example, a developer may create:

• A hero banner section.
• A featured products section.
• A testimonials section.
• A video section.
• A newsletter signup section.

The merchant can then decide where these sections appear using the Theme Editor.

This reduces future development work and gives merchants more control.

Example: Displaying Product Information

Liquid is still used inside Online Store 2.0 themes.

<h1>{{ product.title }}</h1>

<p>{{ product.price | money }}</p>

<p>{{ product.description }}</p>

Liquid provides the product data, while JSON templates determine where the section appears on the page.

Real-World Example

Imagine an online furniture store wants to redesign its product pages.

With Online Store 2.0, the developer creates several reusable sections:

• Product gallery
• Product specifications
• Customer reviews
• Related products
• FAQ section
• Shipping information

Later, the store owner can rearrange these sections using the Theme Editor without touching the code.

This saves time and makes the store easier to manage.

Best Practices for Online Store 2.0 Development

When developing Online Store 2.0 themes:

• Build reusable sections instead of hardcoded layouts.
• Keep sections flexible with customizable settings.
• Use JSON templates for page structure.
• Connect theme settings with metafields where appropriate.
• Make designs responsive for all screen sizes.
• Test every section in the Theme Editor before publishing.
• Write clean and organized Liquid code.

These practices help create themes that are easy to maintain and customize.

Why Online Store 2.0 Matters

Online Store 2.0 represents a major step forward in Shopify development. It provides a better experience for both merchants and developers by making themes more flexible, modular, and customizable.

As a Shopify developer, understanding Online Store 2.0 allows you to build modern themes that are easier to update, easier to maintain, and more user-friendly.

Most modern Shopify themes use Online Store 2.0, making it an essential topic for anyone learning Shopify development.

Key Takeaways

• Online Store 2.0 is Shopify's modern theme architecture.
• It introduces powerful features such as JSON templates, sections on every page, app blocks, and improved metafield support.
• Merchants can customize page layouts using the Theme Editor without editing code.
• Developers create reusable sections and flexible themes that are easier to maintain.
• Online Store 2.0 improves the collaboration between developers and store owners.
• Learning Online Store 2.0 is essential because it is the foundation of modern Shopify theme development.