Hydrogen — Shopify's React framework.
Built on Remix + React Router, with first-class Shopify primitives (Cart, Product, Money). Fastest path to a fully custom storefront with Shopify checkout still handling payments.
HEADLESS SHOPIFY
Custom React storefronts on Hydrogen. Edge-cached, Lighthouse 95+, Shopify checkout untouched.
We build headless Shopify storefronts using Hydrogen (Remix + React + Storefront API) deployed to Oxygen edge hosting. Pixel-perfect custom UX, multi-storefront from one codebase, sub-50ms TTFB globally — without giving up Shopify's checkout, Shop Pay, or PCI compliance.
Single-storefront builds from $15,000 USD · 10–12 weeks · 60-day post-launch support
WHAT'S INCLUDED
Six things every Hydrogen build ships with.
Storefront API + GraphQL.
Every product, collection, customer, cart, and checkout operation via Shopify's GraphQL Storefront API. No Liquid limits — render anything you can dream up in React.
Oxygen edge hosting.
Shopify's free-tier edge runtime running V8 isolates close to your customers. Sub-50ms TTFB globally without paying for a separate CDN.
Shopify checkout, untouched.
Custom storefront, Shopify checkout. PCI compliance, fraud protection, Shop Pay, accelerated checkout — all stay native. You don't lose Shopify's #1 strength.
Multi-storefront from one codebase.
One Hydrogen project can power 5+ branded storefronts (e.g., country-specific subdomains) sharing the same Shopify backend. Massive maintenance win for global brands.
Edge-cached, Lighthouse 99.
Static product pages cached at the edge with stale-while-revalidate. Mobile Lighthouse 95-99 is achievable on Hydrogen out of the box. Beats any traditional theme.
IS HEADLESS RIGHT FOR YOU?
Honest answer: most stores don't need it.
Headless is powerful — and overkill for the majority of Shopify merchants. Here's when each path makes sense:
When headless is the right call
- You need pixel-perfect custom UX that Liquid/themes can't deliver
- You're running 3+ branded storefronts (country/brand/B2B) on one backend
- You have an in-house React team that wants ownership of the storefront
- You need to integrate complex 3rd-party data (PIM, ERP, content) into product pages
- Your design language is unique enough that customising a theme would cost more than building from scratch
- You need editorial / content-heavy pages that are awkward in Liquid
When headless is overkill
- You're a small store doing under $500K/year — the cost rarely pays back
- Your team is non-technical and you'd be locked in to an agency for every change
- You don't have a unique design — Dawn / Sense / Trade can do 95% of what you need
- You're not using multi-region / multi-storefront features
- Your bottleneck is conversion / marketing, not the storefront itself
- You need to ship fast — headless takes 8-12 weeks vs 4-6 for a custom theme
THE PROCESS
Six steps. Ten weeks. Edge-deployed.
Hydrogen builds are larger than theme builds. Each phase has clear sign-off before moving on so there's no scope creep.
- 1
Discovery & fit check
Week 1Honest assessment: do you actually need headless? Most stores don't. We'll help you decide vs a custom OS 2.0 theme. If headless is right, scoping doc + fixed quote.
- 2
Architecture design
Week 2Component library plan, routing structure, data fetching patterns (server-side / client-side / streaming), CMS integration if needed (Sanity, Contentful), Oxygen vs Vercel decision.
- 3
Hydrogen build
Week 3-8Component library in Storybook, all storefront pages (home, PLP, PDP, cart, account), Storefront API queries, search (predictive + filters), customer auth, multi-language.
- 4
Performance + SEO pass
Week 9Lighthouse mobile + desktop ≥95 target. SSR for SEO, structured data (Product, BreadcrumbList, Organization), sitemap generation, meta tag system, image optimization.
- 5
Launch + Oxygen deploy
Week 10Coordinated DNS cutover. Oxygen edge deployment with preview URLs. Monitoring set up (real-user CWV, error tracking, Sentry). Old store kept as backup for 30 days.
- 6
Post-launch + 60-day support
Week 10 + 60 daysDaily monitoring for week 1, weekly for next 2 months. Bug fixes free. Knowledge transfer to your in-house team if you have one. Ongoing retainer optional.
TECH STACK
What we build with.
- ✓ Shopify Hydrogen (Remix + React Router)
- ✓ Storefront API GraphQL
- ✓ Oxygen edge runtime (V8 isolates)
- ✓ TypeScript end-to-end
- ✓ Tailwind or vanilla-extract for styling
- ✓ Storybook for component library
- ✓ Sanity / Contentful / Hygraph for headless CMS (when needed)
- ✓ Cloudinary for image transformations (when needed)
- ✓ Sentry for error monitoring
FAQ
Headless questions, answered.
How much does a headless Shopify build cost?
Standard headless builds start at $15,000 USD for a single-storefront launch. Multi-storefront, B2B, or content-heavy builds run $25K–$60K. Enterprise builds (10+ storefronts, complex integrations, custom checkout customisations on Shopify Plus) start at $80K. Always a fixed quote, with milestone-based billing.
How long does headless take vs a custom theme?
Single-storefront headless: 10-12 weeks. Custom Online Store 2.0 theme: 6-8 weeks. So roughly 50% longer. The trade-off is pixel-perfect custom UX and edge-level performance you can't match with a theme. We'll honestly tell you in the scoping call if a theme would serve you better.
Does headless break my SEO?
Not if it's done right. Hydrogen ships with SSR by default — Google sees fully-rendered HTML, just like a Liquid theme. We bake in structured data (Product, BreadcrumbList, FAQPage), sitemap generation, robots.txt, and meta tag system. Done correctly, headless Shopify often outperforms Liquid stores on Core Web Vitals (which IS a ranking signal).
Will my Shopify apps still work?
It depends. Apps that integrate via theme app extensions (app blocks for OS 2.0) won't work — they need Liquid templates. Apps that integrate via webhooks, Admin API, or Storefront API (most modern apps) work fine. We do an app compatibility audit in week 1 — if a critical app won't work, we either find an alternative or build a custom replacement.
What about the Shopify checkout?
Stays untouched. Your Hydrogen storefront sends customers to checkout.shopify.com (your store domain) for the actual checkout flow. PCI compliance, fraud detection, Shop Pay, Apple Pay, Google Pay — all native Shopify, all unchanged. You only own the pre-checkout experience.
Can I switch back to Liquid later if headless doesn't work?
Yes. Your products, customers, orders all live in Shopify regardless of the storefront. To switch back: rebuild the Liquid theme (or buy a stock one), point DNS, retire the Hydrogen build. We'd never recommend this — but it's reassuring to know you're not locked in. We don't proprietary anything.
Do I need a React team to maintain a headless build?
If you want to make code changes yourself: yes, ideally one React/TypeScript developer. If you're happy with us (or another agency) on retainer for changes: no, you can stay non-technical. Many of our headless clients use us as their de-facto storefront team for $2K-5K/month after launch.
Hydrogen vs Next.js — which is better for Shopify?
Hydrogen, almost always. It's built specifically for Shopify with all the right primitives (Cart, ProductProvider, Money component, Storefront API client baked in). Oxygen hosting is free for Hydrogen apps. Next.js works fine but you reinvent a lot of what Hydrogen gives you free. We use Next.js only when teams already have Next infrastructure they need to integrate with.
Want an honest fit-check?
We do free 30-min consultations to figure out whether headless is right for your store. We'll tell you to stick with a theme if a theme would serve you better — we'd rather not take a project than oversell one.