Online Store 2.0 explained: JSON templates, sections, metafields and metaobjects

What changed with Online Store 2.0

Before Online Store 2.0, the sections you could add, remove and reorder from the theme editor were essentially limited to the homepage. Every other page, such as product, collection or content pages, had a fixed structure defined in code, and any design change required a developer.

Online Store 2.0 extended sections to every page and introduced new tools for connecting design with store data. Today, Theme Store themes are built on this architecture, including Dawn, Shopify's reference theme.

JSON templates

In Online Store 2.0, templates can be JSON files instead of Liquid files. A JSON template contains no HTML: it is a list of the sections that make up the page, the order they appear in and their settings. When you change something in the theme editor, Shopify updates that file.

This lets you create alternate templates. For example, you can have a standard product template and another for limited-edition products with different sections, and assign each product to the right one from the admin. The same goes for collections and pages.

• The JSON template defines which sections appear and in what order.
• You can create alternate templates from the theme editor.
• Each product, collection or page is assigned to its template from the admin.

Sections on every page

A section is a reusable module: a banner, a gallery, a list of benefits, an FAQ block. Each section has its Liquid code and a schema that defines which settings appear in the editor, such as text, images, colors or links.

With Online Store 2.0 you can add those sections to any JSON-based template. An FAQ section designed for the homepage can also be used on the product page or a shipping page, without duplicating code. The header and footer are also managed as section groups, editable from the theme editor too.

Blocks: the flexible piece inside each section

A section can contain blocks: elements that whoever edits the store can add, remove and reorder. In a product section, blocks can be the title, price, variant picker, buy button, a description tab or a shipping notice.

Blocks let the same section adapt to different contexts without touching code. There are also app blocks: compatible apps can add their own block, such as reviews or a stock alert, which you place wherever you want from the editor, without pasting code snippets into the theme.

Metafields: your own data for each product

Metafields are custom fields you add to products, variants, collections, customers, orders and other Shopify objects. They store information Shopify does not include by default: fabric composition, care instructions, technical specs, preparation time or a how-to video.

In the admin you define each metafield with a specific type, such as text, number, date, file, color or a reference to another product, and fill it in on each product. You can then connect it to a section's settings through dynamic sources in the editor: the composition block automatically shows each product's metafield value.

The result is that a single product template shows the right information on every product page, and your team only has to fill in fields in the admin.

Metaobjects: reusable structured content

Metaobjects go a step further. They are content types you define yourself, with several fields, and create as standalone entries. For example, a Designer metaobject with a name, photo and bio, or a Size chart metaobject with its measurements.

Once created, you can reference them from product or collection metafields. Several products can point to the same designer or the same size chart, and if you update the entry, the change shows up on every product page. Metaobjects can also have their own page on the store if you turn that option on.

• Metafield: a specific piece of data tied to a product or other object.
• Metaobject: a reusable content type with several fields.
• They work together: a metafield can point to a metaobject entry.

How all this lets your team edit without code

Together, these pieces separate design from content. The developer builds the sections, blocks and schemas once; your team creates pages by combining sections, changes copy and images in the editor and fills in metafields and metaobjects in the admin. Launching a campaign page or adding technical information to a hundred products stops being a development request.

For this to work, the theme has to be designed that way from the start: sections with clear settings, metafields defined with the right type and a content structure the team understands. At Weblineo we build every theme custom on Online Store 2.0, and the included training teaches your team to run it; we explain it on our Shopify development service page.