The Shopify theme development masterclass.
Liquid syntax, Online Store 2.0 sections + blocks, metafields, performance budgets, accessibility — the depth of the modern Shopify theme stack.
Liquid plus OS 2.0. Sections, metafields, budgets.
Shopify theme development in 2026 is a four-layer stack: Liquid (the templating language), Online Store 2.0 (the section + JSON template architecture that replaced Liquid-only themes in 2021), metafields (custom data binding into templates without code), and performance + accessibility budgets (the constraints that keep themes shippable). Most brands should adapt an existing OS 2.0 theme rather than build custom — the cost difference is two-to-one, and the top paid themes already cover 90 percent of DTC needs. Build custom only for distinctive design or unusual catalog structure. Published by Prasun Anand.
Why Liquid is Shopify's templating language.
Liquid is Shopify's open-source template language, created in 2006 by Tobias Lutke. It runs server-side, renders HTML per request, and exposes Shopify's data model — products, collections, customers, cart — through a constrained set of objects, tags, and filters. The constraint is the point.
Why Liquid instead of a general-purpose language. Shopify runs millions of themes from untrusted authors on shared infrastructure. A sandboxed templating language with no filesystem access, no network access, and no arbitrary code execution lets that infrastructure scale without security catastrophe. Other commerce platforms that allow arbitrary PHP or JavaScript in templates (looking at you, Magento and WooCommerce) deal with security incidents Shopify just does not have.
The three primitives. Objects expose data: {{ product.title }}, {{ collection.products }}, {{ cart.total_price }}. Tags control flow: {% if cart.empty %}, {% for product in collection.products %}, {% include 'product-card' %}. Filters transform values: {{ product.price | money }}, {{ image | img_url: '600x' }}, {{ blog.title | upcase }}. The full filter library is well-documented in Shopify's Liquid reference; learning the 30 most-used filters covers 95 percent of theme work.
Common patterns. Using capture to build strings before output. Using assign for local variables. Using {% liquid %} tag blocks for multi-line logic without delimiter noise. Using {% comment %} for inline notes. The deeper Liquid playbook covering tags, filters, control flow, and the OS 2.0-specific primitives is in Shopify Liquid fundamentals.
What did Online Store 2.0 actually change?
Five things changed in 2021 with OS 2.0: JSON templates replaced Liquid templates as the page composition layer; sections moved from homepage-only to every page; per-page section grouping let different products use different layouts without template duplication; metafields became theme-editor-native; and app blocks became the standard way apps inject UI.
JSON templates. Before OS 2.0, every page was a Liquid file: product.liquid, collection.liquid, page.liquid. After OS 2.0, the page is a JSON file: product.json declares which sections render in which order. Each section is its own Liquid file. The advantage: merchants can rearrange sections from the theme editor without touching code, and developers can ship section libraries instead of monolithic templates.
Sections everywhere. Pre-OS 2.0, only the homepage had editable sections. Now every page does — product, collection, blog, article, cart, password, account. This is the change that made the theme editor genuinely useful for non-developers; before OS 2.0, every layout change required a developer to edit the underlying Liquid template.
Per-page section groups. A specific product can have a unique section order or unique sections that other products do not show. This eliminated the most common Shopify hack — duplicate template files like product.alternate.liquid assigned per-product — and replaced it with native theme-editor configuration.
Metafield bindings. Define a metafield on the product or collection (or any other resource), expose it through the theme editor, and merchants can drag it into a section without writing Liquid. This is the change that made custom data first-class in themes; before, every custom field required code.
App blocks. Apps that need to render UI on a storefront page (reviews, subscription widgets, BNPL messaging, accessibility overlays) ship as blocks the merchant adds through the theme editor. No more code injection or hacky DOM insertion. The full OS 2.0 architecture and migration paths from 1.0 themes are in Shopify Online Store 2.0 explained.
When metafields beat product variants.
Variants are for things that change price, inventory, or availability — size, color, material the customer picks at purchase. Metafields are for every other custom attribute — care instructions, fabric content, country of origin, dimensions, warranty, ingredient list. The rule: if it would generate a separate SKU, it is a variant; if it is the same SKU with metadata, it is a metafield.
The reason this rule matters. Shopify caps variants at 100 per product. Brands that try to model every attribute as a variant hit the ceiling fast and end up consolidating into product collections of identical SKUs that pretend to be variants — clunky and expensive to maintain. Metafields are unlimited and bind into OS 2.0 templates with no code. Use them.
The metafield types. Single-line text, multi-line text, rich text, integer, decimal, boolean, color, weight, volume, dimension, date, date-time, JSON, file reference, page reference, product reference, variant reference, collection reference, metaobject reference. The reference types let you model relationships across resources — a product can reference a metaobject for its sustainability story, which itself references a collection of certifications, all rendering through the same theme. This is the approach we use for product-line architecture on flagship Plus stores.
Metaobjects deserve special mention. Introduced in 2023, they let merchants define structured data types — author, ingredient, certification, location, collection feature — and create instances that products and pages reference. Before metaobjects, this kind of structured data lived in metafields with JSON values that did not bind cleanly to the theme editor. Now it is native, and the editor experience for non-technical merchants is materially better.
What performance budget should every theme hit?
Total page weight under 1.5 MB on mobile, JavaScript under 200 KB compressed, LCP under 2.5 seconds at 75th percentile, CLS under 0.1, INP under 200 ms. These are not aspirations — every 100 ms of LCP improvement is worth roughly 1 percent of conversion in DTC, which makes performance a revenue lever rather than a technical hygiene metric.
The Core Web Vitals targets come from web.dev's vitals guidance. Shopify reports CrUX field data in the admin's Speed Score; that is your real-world signal. Lab data from PageSpeed Insights is useful for diagnosing specific audits but not for setting targets — field data wins.
The four highest-leverage performance moves on Shopify themes. One, the hero image. Use fetchpriority="high" on the LCP image, serve from Shopify's CDN at the right size, use modern formats (WebP, AVIF). Most poorly-performing themes lose 800-plus ms of LCP to oversized hero images alone. Two, defer non-critical JavaScript. Apps installed through the theme editor have a habit of injecting blocking scripts; add defer attribute, audit the cascade in Chrome DevTools Performance panel. Three, the section-rendering API. Modern OS 2.0 themes can re-render sections without full page reloads, which makes filtering and pagination feel instant. Four, font loading. font-display: swap on every custom font, preload the two weights you actually use, drop the eight you do not.
Shopify's Theme Inspector and the Theme Performance API enforce a baseline; the Theme Store rejects themes below it. That baseline is the floor, not the ceiling. Treat it as the start of the work.
Accessibility is conversion plus legal exposure.
Accessibility lawsuits against ecommerce brands hit a record in 2024 and the trajectory is up. Defending one regularly costs more than building accessible. The conversion case is just as strong: WebAIM's Million report shows 95 percent of WCAG failures are color contrast, missing alt text, missing labels, and missing button text — all problems that hurt every user, not just users with disabilities.
Build accessible from the start. Color contrast meeting WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large) gets you past the most-common failure. Every form input has an associated label. Every interactive element has a discernible accessible name. Focus styles are visible. The keyboard tab order matches visual order. Heading levels do not skip. Images have alt text describing function, not just appearance.
The audit. Automated tools (axe DevTools, Lighthouse Accessibility) catch about 30 percent of WCAG failures. The other 70 percent require manual testing with a keyboard and a screen reader (VoiceOver on Mac, NVDA on Windows). Budget two to four engineering days for an audit on a theme that started accessible by design, four to eight for one that did not.
The "accessibility overlay" trap. Plugins that promise to make any site WCAG-compliant via JavaScript widget have been targets of lawsuits themselves and rarely fix the underlying failures. The compliant path is fixing the actual code, not bolting on an overlay.
Six answers.
Should I build a custom Shopify theme or customize an existing one?
Customize an existing one in 80 percent of cases. Dawn (Shopify's free OS 2.0 reference theme) and the top paid themes (Impulse, Prestige, Stiletto) cover most DTC needs at one-third the cost of a custom build. Build custom only when the brand has invested in distinctive design language template themes cannot represent without compromising it, or when the catalog has unusual structure (configurable products, complex variants, made-to-order workflows) that a generic theme handles awkwardly. Most brands save USD 30K to 60K by adapting; only the ones with genuine distinctiveness or complexity benefit from custom.
What is Shopify Online Store 2.0?
OS 2.0 is the templating model Shopify shipped in 2021 that replaced the old Liquid-only theme architecture. The five changes: JSON templates instead of Liquid templates (every page is a section composition); sections everywhere (not just the homepage); per-page section grouping (different products can use different layouts without duplicating templates); metafield bindings native in the theme editor (custom fields render in templates without code); and app blocks (apps inject UI through standardized block interfaces). Every theme in the Shopify Theme Store as of 2024 is OS 2.0; if your store is still on a 1.0 theme, the upgrade is one of the highest-leverage moves available.
What is Liquid and why does Shopify use it?
Liquid is Shopify's template language, originally created for Shopify in 2006 by Tobias Lutke. It runs server-side, renders HTML for each request, and exposes Shopify's data model (products, collections, customers, cart) through a constrained set of objects, tags, and filters. Why Shopify uses it: Liquid is sandboxed and safe to run untrusted code, which lets thousands of merchants run their own themes on Shopify infrastructure without security risk. The tradeoff is that Liquid is less expressive than general-purpose languages — but for theme rendering, that constraint is a feature, not a bug.
When should I use metafields instead of product variants?
Variants are for things that change price, inventory, or availability — size, color, material that the customer chooses at purchase. Metafields are for everything else — care instructions, fabric content, country of origin, dimensions, warranty length, brand story, ingredient list. The rule: if it would generate a separate SKU, it is a variant; if it is the same SKU with metadata attached, it is a metafield. Brands that try to make every attribute a variant hit Shopify's 100-variants-per-product cap fast and end up with cataloging chaos. Metafields are unlimited and bind into OS 2.0 templates with no code.
What is the Shopify theme performance budget?
Performance budgets we use on every theme: total page weight under 1.5 MB on mobile, JavaScript bundle under 200 KB compressed, LCP under 2.5 seconds at 75th percentile per CrUX field data, CLS under 0.1, INP under 200 ms. The Shopify Theme Store enforces a baseline via Theme Inspector and the Theme Performance API; meeting the store baseline is the floor, not the ceiling. Real-world impact: every 100 ms of LCP improvement is worth roughly 1 percent of conversion rate in DTC, so the budget is a revenue lever, not just a technical hygiene metric.
Do I need accessibility audits on my Shopify theme?
Yes, both for legal exposure and conversion. Accessibility lawsuits against ecommerce brands hit a record in 2024; the cost of defending one regularly exceeds the cost of building accessible. Conversion: WebAIM's Million report shows 95 percent of homepage WCAG failures are color contrast, missing alt text, missing form labels, and missing button text — all things that hurt every user, not just users with disabilities. Run an audit before launch, fix the failures, retest. The combined work is two to four engineering days for a theme that started accessible by design and four to eight for one that did not.
Liquid done right. Shipped fast.
More from Aarav.
Backend Engineer · Delhi · 2 posts on the site
Published .