Shopify Theme Development: A Guide to Online Store 2.0 Themes

Key takeaways

• Online Store 2.0 themes use JSON templates, so merchants can add, remove and reorder sections on every page — not just the homepage.
• App blocks and theme app extensions let apps plug into a theme without editing its code, and uninstall cleanly.
• Metafields connect custom product data to the theme editor through dynamic sources.
• Build with Shopify CLI, keep the theme in Git and run Theme Check before every release.
• A custom theme pays off when your brand, catalogue or content can't be expressed by a template without heavy workarounds.

Your theme is the part of Shopify your customers actually see. It controls the layout, the speed and much of the conversion rate of the store. Since Online Store 2.0, Shopify themes are far more flexible than they used to be — and far easier for a marketing team to manage without a developer. This guide explains how modern Shopify theme development works.

What Online Store 2.0 changed

• Sections everywhere: Templates are JSON files listing sections, so every page type — products, collections, pages, blog posts — can be built from sections in the theme editor.
• Multiple templates per page type: Different products or collections can use different layouts, chosen per item in the admin.
• App blocks: Apps add their features as blocks you place in the editor, instead of injecting code into theme files.
• Dynamic sources: Section settings can read metafields, so content such as size guides or ingredients comes from structured product data.

How a Shopify theme is built

Themes are written in Liquid, Shopify's template language, with HTML, CSS and JavaScript. A professional build follows a predictable workflow:

1. Plan the content model: List page types, sections and the product data they need, and define metafields and metaobjects before design starts.
2. Design the system, not just pages: Design reusable sections with clear settings, so new pages can be assembled without a developer.
3. Develop locally: Use Shopify CLI (shopify theme dev) to preview changes against real store data, with the code in Git.
4. Check quality: Run Theme Check (shopify theme check) for Liquid errors and performance warnings, and test on real mobile devices.
5. Release safely: Publish through an unpublished theme or Shopify's GitHub integration, so the live store never shows half-finished work.

Premium theme or custom theme?

• Premium theme: A Theme Store theme is fast to launch and supported by its developer. It suits stores whose needs match the theme's features.
• Customised theme: A premium theme extended with custom sections — often the best value for growing brands.
• Custom theme: Built for your brand and catalogue from the ground up. It makes sense when the design, content model or performance targets go beyond what a template can do cleanly.

Whichever route you choose, avoid editing a premium theme's core files heavily: it makes theme updates painful. Add new sections and snippets instead, and keep a record of every change.

Performance built in

A theme sets the ceiling for your store's speed. Good theme development keeps JavaScript small and per-section, serves responsive images with the image_url and image_tag filters, loads fonts carefully and avoids sliders above the fold. Our guide to speeding up a Shopify store covers this in detail.

Keeping a theme healthy

• Keep the theme in version control, with a changelog of custom work.
• Review apps and leftover code every quarter.
• Test key templates on mobile after every app install or campaign.
• Update premium themes when new versions fix bugs or add features you need.

Need a theme built or rebuilt? Our Shopify store development team designs and develops Online Store 2.0 themes that your team can run day to day. See examples in our case studies, or tell us about your store.