Contact
All articles

Shopify theme vs headless (Hydrogen): which to choose

Shopify theme vs headless with Hydrogen: what each gives you, what you take on, checkout limits, speed myths and a checklist to decide.

Topic
Shopify
Published
Reading time
4 minutes
Written by
unblokd

Most stores should start with a Shopify theme. Headless, which means building a custom storefront with Shopify's Hydrogen toolkit and keeping Shopify for the back office, is right only when a theme genuinely cannot do what the business needs. Your own team edits a theme in a visual editor. A headless store is code, so every change goes through a developer.

Shopify theme vs headless at a glance

FactorShopify themeHeadless (Hydrogen)
Who can editYour team, in the theme editorA developer, in code
AppsMost install into the themeOnly apps built for headless
CheckoutShopify-hostedShopify-hosted
Build effortPick, customise, launchDesign and build every page
HostingIncluded with your planOxygen, or a host you choose
When it fitsMost storesThe shopping experience is the product

The two options

A theme is the ready-made storefront that comes with Shopify, built from Liquid files (Shopify's template language). You change it in the theme editor, and a developer can edit the code.

Hydrogen is Shopify's toolkit for a fully custom storefront. Shopify's docs say it is built on React Router and provides components, functions and utilities. Products, collections and carts come from Shopify's Storefront API. This is "headless": the back end is separate from what customers see. You can also build headless with any framework through Shopify's Headless channel.

In both cases Shopify runs products, orders, inventory, payments and checkout.

What a theme gives you

  • No-code editing. In the theme editor you can "add, remove, edit, and rearrange content".
  • Horizon. Shopify's newer free theme uses nested theme blocks for more layout freedom. Shopify lists it as free and fast-loading.
  • App blocks. Shopify says "app blocks let you add app functionality exactly where you want to use it in your theme". Per Shopify's help page, app blocks only work with compatible themes, and if you change your published theme you must re-activate your apps.

What you take on with Hydrogen

Hydrogen gives you building blocks, not a finished store. Your developers build the product pages, cart, search and content pages.

  • Changes need a developer. There is no theme editor. Moving a banner is a code change, a review and a deploy.
  • Many theme apps will not carry over. An app that adds a block to your theme has no theme to attach to. Shopify says there are apps built for headless commerce, so check each app you rely on.
  • More to maintain. A codebase, its dependencies and hosting settings.

Hydrogen is free. The Hydrogen site says it is "All open source" and offers to "Host for free with Oxygen", Shopify's hosting for it. The cost is developer time.

Checkout is Shopify's either way

With a theme or with Hydrogen, customers go to a Shopify-hosted checkout. Shopify's migration guide says customers are "always directed back to a Shopify-hosted checkout". Going headless does not give you a custom checkout.

What you can customise depends on your plan, per Shopify's checkout help page:

  • The checkout and accounts editor, and apps on the thank-you and order status pages, are available on Basic and above.
  • Apps on the information, shipping and payment pages, and the Checkout Branding API, need Shopify Plus.

If you want headless to get a different checkout, Hydrogen does not solve it. Plus might.

When Hydrogen is worth it

Hydrogen earns its keep when the shopping experience is the product:

  • A configurator where customers build a made-to-order item and see it update live.
  • A storefront that blends several data sources.
  • Transitions and layouts that sections and blocks cannot express.
  • A team with React developers shipping changes every week.

It is usually not worth it for a nicer look, a faster launch, or "being future-proof". A well-built theme covers those. For costs, see Shopify store cost in India. Odd Dozen, our concept online store, is a custom storefront built without Shopify, and it is not client work.

Decision checklist

If most answers are "no", start with a theme.

  1. Have we tried a customised theme and found a specific thing it cannot do?
  2. Can we name that thing in one sentence?
  3. Do we have developers for every future change?
  4. Does each app we depend on have a headless option?
  5. Do we accept that checkout stays Shopify's, and does our plan allow the checkout changes we want?
  6. Is the need big enough to justify rebuilding what a theme gives us free?

Start with a theme, measure what holds you back, then consider Hydrogen for the part that needs it. New to Shopify? See how to start a Shopify store in India or Shopify vs WooCommerce in India. Tell us about your project for a second opinion.

Frequently asked questions

Is headless Shopify worth it?

Only when a theme cannot do something you need, such as a live product configurator, and you have developers for every change. Headless gives custom pages but not a custom checkout, and removes the theme editor and many theme apps.

Is Hydrogen free?

Yes to use. Shopify's Hydrogen site says it is "All open source", with free hosting on Oxygen, Shopify's hosting for it. You still pay for your plan and the developers.

Can I use Shopify apps with a headless store?

Some, not all. Apps that add blocks to a theme have no theme to attach to. Shopify says there are apps built for headless storefronts. Check each app with its maker.

Does headless make a Shopify store faster?

Not automatically. Shopify describes Horizon as fast-loading, and Hydrogen caches Storefront API data by default. Either can be slow with too many scripts, heavy images or apps.

Is it worth buying a theme on Shopify?

Sometimes. Paid themes are one-time purchases, worth it if they already include the layouts, sections and features you need and support your apps. If a free theme with a few custom sections covers it, do not pay.

Next articleShopify payment gateway in India: Razorpay, UPI and COD