Guide · Shopify
Headless means using Shopify as a commerce backend — inventory, checkout, orders — while serving the frontend from a separate stack. It unlocks things Liquid can't do. It also adds significant complexity. Here's an honest assessment of when the trade-off is worth making.
What headless actually gives you
Liquid runs on Shopify's servers with a constrained template system. A headless frontend runs wherever you deploy it — Astro, Next.js, Nuxt, a native app. You own the full rendering stack. Animations, transitions, layout conventions, data fetching patterns — none of it is constrained by what Liquid exposes.
The Storefront API serves the same product and cart data to a web frontend, a mobile app, a kiosk, and a third-party marketplace. A single source of truth for commerce data, rendered differently per channel. This is the real headless use case — not just "I want a React site."
A statically generated product catalog served from a CDN edge with client-side cart hydration can outperform a Liquid-rendered page — but only if it's actually built that way. Headless doesn't automatically mean fast. A poorly built React storefront is slower than a well-optimized Liquid theme.
What you give up
No more drag-and-drop section editing. No live preview in the admin. The merchant can't customize the homepage layout from the Shopify UI — any content management has to be built separately, usually via a CMS or hardcoded sections that developers update. For merchant autonomy, this is a significant regression.
Most Shopify apps inject into the Liquid theme. Reviews, loyalty, subscriptions, bundles — they have Liquid components that don't work headless. Some apps have API integrations; many don't. Rebuilding app functionality in a headless context is often the majority of the project's dev work.
A Liquid theme has one deployment target: Shopify. A headless storefront has the frontend deployment, the API layer, the caching strategy, the CDN configuration, and the revalidation logic — all separate systems you own and operate. More surface area means more to break.
When it's worth it
Web storefront, mobile app, and physical kiosk all pulling from the same catalog and cart — this is the case headless was designed for. The Storefront API becomes the single source of truth; each channel renders independently.
A brand that publishes significant content alongside its store — editorial articles, lookbooks, video series — may want a proper CMS (Sanity, Contentful, Storyblok) managing content, with Shopify handling commerce. Headless enables both systems to coexist cleanly in a single frontend.
Complex custom animations, non-standard navigation patterns, deeply interactive product configurators — if the design requires a frontend architecture that Liquid genuinely can't support, headless becomes the path. Not because React is inherently better, but because the constraints are real.
Hydrogen or custom?
Shopify's official React-based headless framework. Built on Remix, hosted on Oxygen (Shopify's edge runtime). Has pre-built cart, search, and product components. The fastest path to a headless Shopify storefront if you're comfortable with React and Remix's data model. Lock-in to Shopify's hosting is the main trade-off.
Any framework, any host. The Storefront API is a public GraphQL API — query products, collections, cart operations from anything. More flexibility, more setup. Good when you're integrating Shopify commerce into an existing frontend stack rather than building a storefront from scratch.
Related