All articles
E-commerceJune 10, 2026 6 min read

Headless Shopify Is Not Free: A Honest Look at Hydrogen vs Liquid for Mid-Market Stores

We've shipped both Hydrogen storefronts and heavily customized Liquid themes for stores doing $5M–$50M GMV. Here's where headless actually pays for itself, and where it quietly bleeds money for two years before anyone admits it.

Headless Shopify Is Not Free: A Honest Look at Hydrogen vs Liquid for Mid-Market Stores

Every few months a founder forwards us a Hydrogen demo and asks if their Liquid theme is holding them back. Sometimes the answer is yes. More often, the honest answer is: going headless will cost you a senior frontend engineer for a year and shave maybe 200ms off a page that wasn't your bottleneck anyway.

This is the conversation we wish more agencies had upfront. We've built both — production Hydrogen storefronts on Oxygen, and Liquid themes that have survived three Black Fridays without a rewrite — and the tradeoffs are sharper than the marketing suggests.

What you're actually buying when you go headless

Let's strip the pitch down. A Hydrogen storefront on Shopify in 2026 gives you four concrete things:

  1. A React-based rendering layer (Remix under the hood) you fully control.
  2. Oxygen, Shopify's edge hosting, with deploys tied to your Git repo.
  3. The Storefront API and Customer Account API as your data plane.
  4. The freedom to compose content, search, and personalization from outside Shopify.

That's it. You're not buying speed. You're not buying SEO. You're buying control over the rendering pipeline and the data layer. Whether that control is worth the cost depends entirely on what you plan to do with it.

What you're giving up

This part gets glossed over. When you leave Liquid, you lose:

  • The entire Shopify theme app ecosystem. Most apps inject Liquid or Script Tags; on Hydrogen you reimplement them via the Storefront API or skip them.
  • The theme editor. Merchandisers who used to drag sections around now file Jira tickets.
  • Shopify's built-in image CDN transforms via image_url filters — you reimplement with the image query and <Image> component, which is fine but it's work.
  • A lot of "it just works" behavior around checkout extensions, discounts, and gift cards. Most still work, but each one is a thing you have to verify.

If your merchandising team owns the homepage and edits it twice a week, headless is a tax on them, paid in engineering tickets.

Where Liquid is still the right call

We'll say something unpopular: for the majority of stores under roughly $20M GMV with a standard catalog, a well-built Liquid theme on Dawn or a Dawn fork is the correct architecture in 2026.

Here's why. Shopify has spent the last three years optimizing Liquid rendering at the edge. Section rendering API, lazy section hydration, native Web Vitals work in Dawn — the baseline is genuinely good. We've seen Liquid PDPs hit sub-2s LCP on mid-tier Android over 4G with nothing exotic, just disciplined app hygiene and a tight critical CSS budget.

The cases where Liquid stops being enough are specific:

  • You need server-rendered personalization that varies per visitor (not per segment) and the Shopify Functions / _shopify_essential cookie story doesn't cover it.
  • You're building a multi-brand or multi-region storefront sharing one component library across distinct Shopify stores.
  • Your content lives in a separate CMS (Sanity, Contentful, Storyblok) and you need real composition, not iframe embeds.
  • You're running complex client-side state: configurators, quote builders, B2B with negotiated pricing, AR previews.
  • Your team is React-native and rewriting them as Liquid contractors isn't realistic.

Notice none of these are "we want it to be faster." Speed is almost never the actual reason, even when it's the stated reason.

A concrete comparison: PDP rendering

Here's a stripped-down Liquid PDP fetching a product and its variants:

{% liquid
  assign product = product
  assign current_variant = product.selected_or_first_available_variant
%}

<section class="pdp" data-product-id="{{ product.id }}">
  <h1>{{ product.title }}</h1>
  <p class="price">{{ current_variant.price | money }}</p>

  {% render 'variant-picker', product: product, current_variant: current_variant %}
  {% render 'add-to-cart', variant: current_variant %}
</section>

That renders server-side at the edge, ships maybe 30KB of JS for interactivity, and benefits from Shopify's caching. No data fetching code, no loading states, no hydration mismatch worries.

The Hydrogen equivalent in a Remix route:

import {json} from '@shopify/remix-oxygen';
import {useLoaderData} from '@remix-run/react';

export async function loader({params, context}) {
  const {product} = await context.storefront.query(PRODUCT_QUERY, {
    variables: {handle: params.handle},
  });
  if (!product) throw new Response(null, {status: 404});
  return json({product});
}

export default function Product() {
  const {product} = useLoaderData<typeof loader>();
  const variant = product.selectedVariant ?? product.variants.nodes[0];

  return (
    <section className="pdp" data-product-id={product.id}>
      <h1>{product.title}</h1>
      <p className="price">{variant.price.amount}</p>
      <VariantPicker product={product} selected={variant} />
      <AddToCart variant={variant} />
    </section>
  );
}

More code, but you now own the data fetching, can co-locate CMS queries, can stream non-critical sections with defer, and can compose product data with anything else (reviews, inventory from an OMS, personalization). For a configurator-heavy or content-heavy site, that ownership is genuinely valuable. For a 12-SKU DTC brand, you just wrote more code to do the same thing.

The performance question, honestly

In our experience across both architectures, a well-tuned Hydrogen storefront on Oxygen and a well-tuned Liquid theme land in roughly the same Core Web Vitals band on a PDP. Both can hit good LCP and INP scores. The difference is what "well-tuned" requires.

For Liquid: ruthless app auditing, removing render-blocking scripts, keeping section JSON lean, and avoiding the App Embed graveyard. We wrote about auditing a Shopify app stack — that work matters far more than your rendering layer.

For Hydrogen: disciplined Remix loaders, careful use of defer for below-the-fold data, image component everywhere, and an honest cache strategy on the Storefront API. Get any of these wrong and your headless site will be slower than the Liquid theme it replaced. We've seen it. More than once.

The hidden cost: ongoing engineering

This is the number no one quotes. A Liquid theme, once shipped, can survive 18 months with a part-time developer doing tweaks. A Hydrogen storefront needs ongoing engineering ownership: Remix and Hydrogen versions move, the Storefront API evolves, Oxygen behaviors change, and your dependency tree (analytics, A/B testing, search) needs maintenance.

Budget, roughly, 0.3 to 0.5 of a senior frontend FTE in perpetuity for a Hydrogen site. If you can't commit to that, don't start.

A decision checklist that actually works

When a client asks us, we run through this. Headless is the right call if you can answer yes to at least three:

  • We have or will hire a dedicated frontend engineer (not a freelancer on retainer).
  • Our content strategy needs a real CMS, not Shopify sections.
  • We need server-rendered personalization or A/B testing beyond client-side flicker.
  • We're running multi-region or multi-brand from one codebase.
  • The storefront has significant non-Shopify data (subscriptions, B2B pricing, an external PIM, an OMS for inventory truth).
  • The merchandising team is comfortable filing tickets rather than dragging blocks.

If it's one or two yeses, stay on Liquid and invest the savings in app hygiene, image optimization, and checkout extensibility. The ROI is better and the risk is lower.

What we'd do

If you're on Liquid and unsure: spend two weeks doing a Web Vitals audit and an app audit before you spend six months on a Hydrogen rebuild. Nine times out of ten, the gains you wanted from going headless are sitting in a third-party script you forgot was installed.

If you're committed to headless: start with one route. Build the PDP on Hydrogen, keep everything else on Liquid via subpath routing or a reverse proxy, and prove the architecture pays before you migrate the cart and checkout flows. The teams that ship successful headless storefronts almost always do it in slices. The ones that try a big-bang cutover are the ones we get called to rescue.

If you want a second opinion on which side of this line your store sits on, our e-commerce engineering team has run this audit enough times to be quick about it.

#Shopify#Headless#Performance#Architecture

Want a team like ours?

72Technologies builds production software for the kind of teams who actually read this blog.

Start a project