Shopify Hydrogen Development

Headless Storefronts on Hydrogen + Oxygen.

Custom React storefronts on Shopify's Hydrogen framework, hosted on Oxygen's global edge. Storefront API, Customer Account API, headless CMS (Sanity / Contentful / Storyblok), Markets, Checkout Extensions, Shopify Functions, Core Web Vitals 90+ — the full headless toolkit. Built for Shopify Plus brands ready to outgrow themes. Pair with Plus B2B or subscription brands on the same stack.

6-16 week engagement

Hydrogen + Oxygen

Plus prospects

Fixed-price option

Book a Discovery Call Chat on WhatsApp

Tech Stack

Hydrogen

Oxygen

React

Remix

Storefront API

GraphQL

Why Headless

When Themes Stop Scaling. Hydrogen Starts.

High-GMV Shopify brands hit a ceiling with Liquid themes — performance plateaus, customization gets hacky, multi-market complexity explodes, and CMS workflows fight with merchandising. Hydrogen + Oxygen unlocks a custom React storefront with sub-1.5s LCP, complete UI control, and a workflow that scales with the org. The investment is significant; the payoff is structural — especially for brands above USD 1M GMV with a dev team or budget for one. Compare costs in our Shopify cost calculator or read the Shopify India pricing guide before deciding.

⚡

Performance Ceiling

Hydrogen on Oxygen delivers LCP <1.5s, INP <100ms — numbers themes cannot match. SEO and CR gains compound.

🎨

Pixel-Perfect UI

No Liquid constraints. React + Tailwind + your design system. Custom interactions, animations, and component reuse.

🌐

Multi-Market Native

Markets + Hydrogen routing handles currencies, languages, tax rules, and pricing at the route level — no app duct tape.

🧰

CMS-First Workflow

Editorial team works in Sanity / Contentful / Storyblok. Merchandisers work in Shopify Admin. Clean separation of concerns.

Hydrogen fit check

Should you go headless?

✓

You're on Shopify Plus or planning the upgrade — checkout extensions, Functions, and Markets Pro are Plus-only.

✓

GMV is USD 1M+ — the build pays back through CR uplift and SEO gains, not theme savings.

✓

Custom UX is strategic — configurators, builders, immersive PDPs, content-heavy editorial pages.

✓

Multi-market or B2B — multiple currencies, languages, B2B catalogs, complex pricing.

Need to launch in <6 weeks — pick a Liquid theme build, revisit Hydrogen post-launch.

No in-house dev capacity for ongoing maintenance — themes are the lower-burden choice.

Tech Stack

The Hydrogen Toolchain.

Battle-tested combination we ship on every Hydrogen build.

Hydrogen

Framework

Oxygen

Hosting

React 18

Rmx

Remix

Routing

TypeScript

Language

GQL

GraphQL

API

Tailwind

Styling

Sanity

CMS

Ctf

Contentful

CMS

Sto

Storyblok

CMS

Alg

Algolia

Klv

Klaviyo

12 Capabilities We Ship

Everything a Headless Build Needs.

From storefront architecture to migration — the full scope of a production Hydrogen engagement.

app/root.tsx

routes/products.$handle.tsx

routes/collections.$slug.tsx

routes/cart.tsx

components/ProductCard.tsx

01 · Foundation

Hydrogen Storefront Architecture

Hydrogen scaffold with Remix routing, React Server Components, route-level data loaders, server / client component boundary, error boundaries, and TypeScript throughout. Production-grade architecture from day one.

TTFB42 ms

Edge nodes200+

02 · Hosting

Oxygen Edge Deployment

Oxygen is Shopify's global edge runtime — built on Cloudflare Workers, 200+ POPs worldwide. Sub-50ms TTFB, automatic preview deploys per PR, zero-config CI / CD, instant rollback. Native Shopify integration, no DNS setup.

query Product ($handle: String!)

product(handle: $handle) {

title

priceRange { ... }

variants { ... }

}

200 OK · 38ms

03 · Data

Storefront API Integration

GraphQL Storefront API for all read operations — products, collections, cart, customer, blog, pages, metaobjects. Type-safe queries with codegen. Cart and checkout APIs maintained on Shopify's backend, fully PCI-compliant. Wire Razorpay native for Indian checkout.

👤

Anika SharmaMember since Mar 2024

Orders12

Saved cards2

Addresses3

Wishlist8

04 · Accounts

Customer Account API

Shopify's new Customer Account API replaces the legacy storefront customer endpoints — OAuth-based authentication, secure session management, order history, addresses, payment methods, B2B context. Native Shopify identity, zero password handling.

Sanity

Live preview

Contentful

Enterprise

Storyblok

Visual edit

Builder.io

Drag-drop

05 · Content

Headless CMS Integration

Sanity (live preview, structured content), Contentful (enterprise scale), Storyblok (visual editing), or Builder.io (drag-drop). Editorial team owns content workflows independent of merchandising. We design schemas, migrate content, and integrate previews.

🔍linen shi

Linen Shirt

Cream · M

₹2,499

Linen Shift Dress

Sage · S

₹3,299

06 · Discovery

Search & Discovery

Algolia, Klevu, Searchspring, or Shopify Search and Discovery API. Instant search, faceted filters, typo tolerance, synonyms, personalized rankings, merchandising boost rules. Sub-50ms response times. Built into Hydrogen routes natively.

🇮🇳

Indiaen-IN · INR

₹

🇺🇸

United Statesen-US · USD

🇬🇧

United Kingdomen-GB · GBP

🇦🇪

UAEar-AE · AED

07 · Global

Markets & Multi-Region

Shopify Markets routing in Hydrogen — currency, language, tax, pricing, shipping, content variations per region. Localized URLs (/en-in / /en-us). Markets Pro for compliance, duties, and merchant-of-record where needed. Indian shipping via Shiprocket multi-courier.

Subtotal

₹2,499

Shipping

₹0

Add gift wrap Ext

+₹99

Total

₹2,598

08 · Checkout

Checkout Extensions (Plus)

Native UI extensions on Shopify checkout — gift wrap upsells, custom fields, loyalty redemption, age verification, B2B PO numbers, cross-sell carousels. Plus-only, React-based, deployed through Shopify CLI. PCI scope stays with Shopify.

Discount Fn

LIVE

Payment Fn

LIVE

Shipping Fn

LIVE

Cart Fn

LIVE

09 · Backend

Shopify Functions & Custom Apps

Custom discount logic, payment method customization, shipping rule customization, cart transform — all written in Rust / JS, deployed as Functions. Plus custom apps (private apps, admin extensions, webhooks). All scoped via Shopify Partners.

RoastMedium-dark

CycleEvery 30 days

Subscribe & save-15%

Total₹509/mo

10 · Retention

Subscriptions & Loyalty

Recharge, Skio, or Shopify Subscriptions integrated natively in Hydrogen. Loyalty via LoyaltyLion, Smile, or Yotpo — redeemable directly in cart and checkout via extensions. UPI Autopay for Indian recurring billing. See our subscription brand build.

LCP

1.2s

Good

CLS

0.02

Good

INP

68ms

Good

11 · Performance

Core Web Vitals Optimization

LCP under 1.5s, CLS near zero, INP under 100ms — benchmarks themes cannot reach. Image optimization via Shopify CDN, route-level code splitting, React Server Components, prefetching, edge caching. Lighthouse 90+ on PDP / PLP / Home. Track with our GA4 + Web Vitals setup.

25%

Audit + planTheme spec, metafields, apps

50%

Build newHydrogen on subdomain

75%

Traffic split10 / 25 / 50 / 100%

100%

DecommissionTheme retired

12 · Migration

Theme to Hydrogen Migration

Phased migration from existing Liquid theme — audit, parallel build on subdomain, gradual traffic split (10 / 25 / 50 / 100%), monitor performance and CR, decommission theme. Zero downtime, full SEO preservation via 301 mapping.

Performance Delta

Hydrogen vs Liquid Theme. The Numbers.

Side-by-side benchmark from production migrations — same brand, same catalogue, same traffic. Hydrogen + Oxygen wins every metric that matters for SEO and CR.

Metric

Liquid theme

Hydrogen + Oxygen

Delta

LCPLargest Contentful Paint · mobile

2.8s

1.2s

-57%

CLSCumulative Layout Shift

0.18

0.02

-89%

INPInteraction to Next Paint

280ms

68ms

-76%

TTFBTime to First Byte · edge cached

340ms

42ms

-88%

Lighthouse mobilePDP / PLP / Home avg

+52%

Mobile CRPost-migration, 90 days

2.1%

2.6%

+24%

Engagement Model

Our 4-Phase Build Process

From discovery to migration — how we ship a production Hydrogen storefront.

Discovery & Architecture

Week 1-2

Audit existing theme + apps + metafields. Map features to Hydrogen routes. Choose CMS, search, subscription tools. Architecture diagram + sprint plan. Deliverable: signed scope + SOW.

Design & Component Library

Week 2-5

Tailwind tokens + component library (Storybook). PDP / PLP / cart / collection / search / accounts. Figma to React with TypeScript. Accessibility (WCAG AA) baked in. Mobile-first.

Integrations & Performance

Week 5-10

Storefront API, Customer Account API, CMS, search, subscription, loyalty, Markets, checkout extensions, Functions, analytics. Wire Razorpay, Shiprocket, WhatsApp, GA4. Core Web Vitals tuning. Load + a11y testing.

Migration & Launch

Week 10-16

Phased traffic split from theme — 10 / 25 / 50 / 100%. Monitor CR, SEO rankings, error rate, Vitals. 301 redirect map. Editorial & merch training. Post-launch 4-week stabilization.

FAQ

Common Questions From Plus Founders

Don't see your question? Drop us a note →

Hydrogen is Shopify's React-based framework for building headless storefronts. Combined with Oxygen (Shopify's edge hosting), it powers a custom React frontend that talks to Shopify via the Storefront API while keeping checkout, payments, and order management on Shopify's backend. Use Hydrogen when: (1) you need pixel-perfect custom UI that themes can't deliver, (2) you have a heavy editorial / content-led storefront (Contentful, Sanity, Storyblok), (3) Core Web Vitals matter for SEO and conversion, (4) you run multiple markets / currencies / languages, (5) you have a complex catalogue, custom search, or unique checkout extensions. Not the right fit for fast launches under 6 weeks, brands without a dedicated dev team, or stores doing under USD 1M GMV — Liquid themes ship faster and cost less.

No — Hydrogen works on all Shopify plans (Basic / Shopify / Advanced / Plus). However, several advanced features require Shopify Plus: Checkout Extensions (custom UI on checkout), Markets Pro (multi-region tax and compliance), Shopify Functions (custom discounts, payment customization, delivery customization), B2B (catalogs, payment terms), and higher API rate limits. Most Hydrogen builds we ship are for Plus brands because the use cases (heavy customization, multi-market, complex checkout) align with the Plus feature set. If you're on Shopify Advanced and considering Hydrogen, we will help you decide whether to upgrade or stay on the current plan — see our Shopify cost guide.

Hydrogen builds run longer than theme builds because we are building a custom React app, not configuring a theme. Typical engagement timelines: (1) Hydrogen Starter (6-8 weeks) — new headless storefront on Oxygen, 1 market, Sanity / Contentful CMS, core PDP / PLP / cart, no migration, (2) Hydrogen Growth (10-12 weeks) — everything in Starter plus multi-market, advanced search (Algolia / Klevu), subscriptions, checkout extensions, 1-2 custom apps or Functions, full migration from existing theme, (3) Hydrogen Enterprise (14-20 weeks) — everything in Growth plus B2B, complex personalization, custom checkout flows, multi-store federation, internationalization at depth. Pricing is fixed-price per phase or time-and-materials based on scope.

Hydrogen on Oxygen typically delivers Core Web Vitals 30-60 percent better than Liquid themes — LCP under 1.5s (vs 2.5-3.5s on themes), CLS near zero (vs 0.1-0.25 on themes), INP under 100ms (vs 200-400ms). Why: (1) Oxygen is a global edge network with sub-50ms TTFB, (2) React Server Components render only what is needed, (3) granular code splitting per route, (4) image optimization via Shopify CDN at scale, (5) prefetching and partial hydration. Real-world impact: better Lighthouse scores translate to 8-15 percent organic traffic uplift over 6-9 months and 12-22 percent CR uplift on mobile — the entire investment case for going headless for high-GMV brands.

Yes — and we do this for every Plus brand moving headless. Migration approach: (1) Audit existing theme — sections, metafields, custom Liquid logic, third-party apps, custom checkout, (2) Map theme features to Hydrogen routes — PLP / PDP / cart / search / collections / accounts, (3) Decide what moves to CMS vs stays in Shopify — typically marketing pages move to Sanity / Contentful, product data stays in Shopify, (4) Phased rollout — we ship the new Hydrogen storefront in parallel on a subdomain, route traffic gradually (10 -> 25 -> 50 -> 100 percent), monitor performance and conversion via GA4, (5) Decommission theme. Total migration timeline is 10-16 weeks depending on existing complexity. Zero downtime, zero SEO loss with proper 301 mapping. Talk to our Shopify dev team in Bangalore to scope your migration.

Ready to Go Headless

Let's Architect Your Hydrogen Build.

Book a free 45-minute architecture call. We'll review your current stack, growth plan, and target Core Web Vitals — then send a phased proposal in 48 hours. Fixed-price option for in-scope builds. T&M for enterprise. Need a quick estimate first? Try the Shopify cost calculator.

Book Architecture Call WhatsApp Us 📞 +91 81477 17676

Explore More