Shopify Themes 2.0 is a major upgrade to how themes are built and customized. It moves beyond the old “homepage-only sections” model (Shopify 1.0) and gives you sections everywhere, JSON-based templates, and a more powerful theme editor. For Shopify theme developers, that means faster builds, cleaner structure, and far more flexibility—without hacking one-off layouts for every page.
This guide introduces the four core building blocks of Shopify Themes 2.0 so you get a clear mental model of how pages are put together:
- Templates (JSON): The page blueprint. Defines which sections a page uses and in what order.
- Sections: Reusable, modular chunks of a page (e.g., hero, product grid, testimonial).
- Blocks: The smaller, reorderable pieces inside a section (e.g., image, title, button).
- Schemas: The settings and inputs that power the theme editor, making sections and blocks editable without code.
By the end, you’ll understand how these pieces fit, how 2.0 differs from 1.0, and how to start editing themes, adding sections, and customizing pages with confidence.
Shopify 2.0 Basics for Beginners
This infographic gives a beginner-friendly overview of how Shopify 2.0 themes are structured and why they’re more flexible than the older 1.0 themes. Instead of rigid, fixed layouts, Shopify 2.0 introduces a modular system where every page is built from four key building blocks:
- Templates – define the overall layout of a page.
- Sections – add modular, customizable content areas within a template.
- Blocks – smaller pieces (like images, titles, or buttons) that live inside sections.
- Schemas – power the editable settings you see in the theme editor.
The flow of the graphic contrasts Shopify 1.0’s limitations with 2.0’s flexibility, then shows how a product page can be built by combining sections, blocks, and schema-based customization. For beginners, this visual is designed to make the “big picture” clear: once you understand these four parts, you can confidently start editing themes, adding new sections, and customizing pages to fit your store’s needs.
What Are Shopify Themes 2.0 Templates?
In Shopify 2.0, templates define the overall structure of a page. A template tells Shopify what sections should appear on a given page type—like a product, collection, or custom page—and in what order.
Unlike the old Liquid templates (product.liquid, collection.liquid, etc.) that mixed logic, layout, and content together, Shopify 2.0 uses JSON templates. JSON files separate structure from presentation:
- Liquid files now handle markup and styling inside sections/snippets.
- JSON templates act as the blueprint, deciding which sections load on a page.
This separation makes themes cleaner, easier to maintain, and fully compatible with the theme editor (so merchants can rearrange sections visually).
Here’s an example of a simple product.json template:
In this example:
- The main section renders the product details (title, price, buy button).
- The related-products section displays recommended items.
- The order array defines which appears first on the page.
Understanding Shopify Themes 2.0 Sections
In Shopify Themes 2.0, sections are the modular building blocks that give structure and flexibility to your store’s pages. A section is essentially a reusable, customizable component that groups content together. Think of them as “containers” that hold multiple smaller pieces (blocks) and can be rearranged or reused across different templates.
Static vs. Dynamic Sections
In older Shopify themes (1.0), sections were mostly static—hard-coded into certain templates, like the homepage. This meant you couldn’t easily move them or reuse them on other pages without editing theme code.
With Shopify 2.0, sections can now be dynamic, which means you can add, remove, and reorder them on almost any page directly from the theme editor. This change is what makes Theme 2.0 so much more flexible, since you’re no longer restricted to fixed layouts.
- Static Section → A section that’s “locked in” to a page (e.g., header, footer).
- Dynamic Section → A section you can insert, remove, or move around within templates (e.g., product recommendations, image with text, hero banners).
Example: Homepage Hero Section
A common use case is a hero section on the homepage. This section might include:
- A large background image
- A heading and subheading
- A call-to-action button
In Shopify Themes 2.0, you can add this hero section as a dynamic component in your index.json template. Each piece of content inside the hero (the image, the text, the button) is defined as a block inside the section, and all of it can be customized in the theme editor through schema settings.
This modular approach means you can experiment—swap the hero section’s order, duplicate it for seasonal campaigns, or remove it entirely—without touching code.
Blocks Inside Sections
If sections are the big building blocks of a Shopify theme, then blocks are the smaller pieces that live inside them. Blocks give you fine-grained control over content, letting you adjust individual elements without editing code.
Think of a section as a “container” (like a product section) and blocks as the items inside (such as an image, product title, price, or call-to-action button).
Example: Product Section
A product section might include several blocks, such as:
- Image block – displays the product photo.
- Text block – shows the product title or description.
- Button block – adds a “Buy Now” or “Add to Cart” button.
Here’s a simplified example of what that might look like in a section file:
{
"name": "Product Section",
"blocks": [
{
"type": "image",
"settings": {
"image": "product-image.jpg"
}
},
{
"type": "text",
"settings": {
"text": "Product Title"
}
},
{
"type": "button",
"settings": {
"label": "Add to Cart",
"link": "/cart"
}
}
],
"block_order": ["image", "text", "button"]
}
Why Blocks Matter
Each of these blocks can be reordered, customized, or even removed directly in the theme editor. For example, you could move the button above the text, swap the image layout, or hide a block entirely.
This flexibility means merchants no longer need to rely on rigid layouts—every page can be tailored to fit the brand’s unique design and sales goals.
Schemas: Making Sections Editable
If sections are containers and blocks are their contents, then schemas are the rules that tell Shopify how those pieces can be edited in the theme editor.
A schema is simply a JSON object inside a section file that defines:
- What settings are available (text fields, image uploads, color pickers, etc.)
- How blocks are structured
- What merchants can customize—without touching any code
Example: Text Field & Color Picker
Here’s a small schema that defines a heading text field and a background color picker for a section:
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Welcome to my store"
},
{
"type": "color",
"id": "background",
"label": "Background color",
"default": "#ffffff"
}
]
}
Why Schemas Matter
With this schema:
- The merchant can type in any heading they want.
- They can pick a background color directly from the theme editor.
No developer needs to hardcode changes—the schema exposes these controls, turning static code into editable content.
This is the foundation of Shopify 2.0 flexibility: developers build sections once, schemas make them endlessly customizable.
How It All Fits Together
Think of Shopify’s theme system like designing a house:
- Sections = rooms in the house (living room, kitchen, bedroom).
- Blocks = the furniture inside each room (sofa, table, chairs).
- Schemas = the knobs and switches that let you move furniture, change wall colors, or swap décor—without rebuilding the house.
Shopify 1.0 vs Shopify Themes 2.0
- 1.0 → Sections were limited to the homepage. If you wanted custom layouts elsewhere, you had to duplicate templates or hardcode content.
- 2.0 → Sections are everywhere. Every page can have its own set of sections and blocks, controlled by schemas. This makes themes more modular, reusable, and merchant-friendly.
Example: Product Detail Card
Let’s say you’re building a product detail card for a product page:
- The section might be called
product-detail.liquid. - Inside it, you’d have blocks for:
- Product image (block)
- Product title & description (block)
- Quantity selector (block)
- Add to cart button (block)
And the schema would define:
- Whether each block is optional or required.
- What text can be edited (like the button label).
- Which styles can be changed (maybe background color or font size).
So when a merchant opens the Shopify Theme Editor:
- They can drag blocks up/down to rearrange (image above text, or vice versa).
- They can change the button label from “Add to Cart” → “Buy Now.”
- They can pick a color scheme to match their brand.
All without writing a single line of code.
👉 That’s the magic of Shopify Themes 2.0: developers provide the blueprint, merchants furnish the rooms however they like.
Conclusion: Mastering the Building Blocks of Shopify 2.0
In this post, we’ve walked through Shopify Themes 2.0’s core building blocks:
- Templates – define how pages are structured.
- Sections – modular, reusable page components.
- Blocks – the content pieces within sections that you can rearrange.
- Schemas – power the theme editor settings so merchants can customize without code.
Understanding how these pieces fit together gives you the power to build modern, flexible Shopify themes—far beyond the static, rigid layouts of 1.0. You can now confidently customize product pages, add dynamic content, and empower merchants to make edits without touching code.
Learn More and Keep Learning
To deepen your understanding, check out Shopify’s official resources, like how sections and blocks work in Shopify Themes 2.0 or the guide on templates to see how JSON templates differ from legacy Liquid ones. You can also explore JSON templates in detail to understand how they work with sections for maximum flexibility.
Meanwhile, you can strengthen your foundation by visiting my Liquid Basics for Shopify guide, then opening your Shopify theme editor to experiment: add a section, move blocks around, or tweak settings in the sidebar. Try building a product detail card with image, title, and add-to-cart button blocks, and notice how each component is flexible and customizable thanks to Shopify Themes 2.0.
By exploring and experimenting, you’ll quickly gain confidence building truly dynamic, customizable Shopify storefronts.
Happy Coding!
