Scaling Success on Shopify
Advanced Theme Customization
The OS 2.0 Architecture Shift
If you've worked with Shopify for a while, you remember the old way of building themes. Every page type had a rigid Liquid template file, like product.liquid or collection.liquid. Customizing a single product page meant creating an entirely new template, leading to code duplication and maintenance headaches. It was powerful, but inflexible.
changed everything. The core shift was from monolithic Liquid templates to a modular, JSON-based structure. This introduced the concept of "sections everywhere," allowing merchants to add, remove, and reorder sections on almost any page using the visual theme editor, not just the homepage. This decouples page structure from the theme's code, giving merchants unprecedented control while letting developers focus on building robust, reusable components.
The key takeaway: OS 2.0 separates content and presentation. The structure of a page is defined in a simple JSON file, which points to reusable Liquid sections that handle the display logic.
JSON Templates in Action
Under the hood, this new flexibility is powered by JSON templates. Instead of a product.liquid file, a modern theme has a product.json file. This file doesn't contain any HTML or Liquid logic. Instead, it's a simple map that lists which sections to render and in what order. This is what allows the theme editor to save different layouts for different product pages without creating new template files.
{
"name": "Default product",
"sections": {
"main": {
"type": "main-product",
// Settings for this specific section can be defined here
"settings": {
"show_vendor": true
}
},
"recommendations": {
"type": "product-recommendations",
"settings": {
"heading": "You might also like"
}
}
},
"order": [
"main",
"recommendations"
]
}
The type key refers to a corresponding file in the sections folder, like main-product.liquid. The order array defines the sequence. When a merchant customizes a product page, Shopify creates a new JSON template assigned specifically to that product, overriding the default. This is incredibly efficient.
Data Beyond the Basics
So, page structure is flexible. But what about the content itself? A standard product form has fields for title, price, and description. What if you're selling electronics and need to display technical specifications, or apparel that requires specific care instructions? In the past, developers often hardcoded this into the description or used complex workarounds.
Metafields are Shopify's native solution for storing custom data. You can define a metafield for any piece of information, like "Material Composition" or "Battery Life," directly in the Shopify admin. Once defined, you can attach this data to products, variants, collections, or even customers. The real power comes from connecting these metafields directly to your theme sections as dynamic sources. This lets merchants manage complex, structured content without ever leaving the admin interface.
For even more complex data, you can use Metaobjectss. Think of a metaobject as a custom object you define yourself. For example, you could create a "Designer" metaobject with fields for a name, a biography, and a photo. Then, you can create entries for each designer and link them to your products using a metafield. This creates reusable, structured content that can be managed centrally, making your store much easier to scale.
What was the core architectural shift introduced with Shopify's Online Store 2.0?
A merchant wants to display specific 'Care Instructions' on their apparel products and 'Technical Specs' on their electronics products. What is the most appropriate native Shopify feature to store this structured, product-specific data?