Building Headless Shopify Storefronts with Hydrogen
Build custom Shopify storefronts with Hydrogen and Oxygen. Learn the architecture patterns, deployment setup, and when headless Shopify is the right choice.
Shopify Hydrogen is Shopify's React-based framework for building custom headless storefronts. It ships with commerce-specific components, hooks for cart management, and native integration with Shopify's Storefront API. Oxygen is the hosting platform that deploys Hydrogen storefronts to edge locations globally.
The pitch: use Shopify's battle-tested commerce backend while building exactly the frontend experience you want. The reality is more nuanced. Hydrogen makes sense for specific use cases but adds complexity that standard Shopify themes don't require.
What Hydrogen Actually Is
Hydrogen is a React framework built on top of Remix (now merging with React Router 7). It provides commerce-specific utilities that would take weeks to build from scratch.
Core components included: ShopPayButton, BuyNowButton, Money (formats currency with locale awareness), Image (optimized Shopify CDN handling), CartProvider (context for cart state).
Built-in hooks: useCart, useCartLine, useMoney, useShop for store configuration.
The Hydrogen + Oxygen Stack
Oxygen is Shopify's hosting platform, purpose-built for Hydrogen. It runs on Cloudflare's worker runtime at the edge, meaning your storefront deploys globally and serves from locations closest to customers.
Oxygen is included at no extra cost on paid Shopify plans. This eliminates the Vercel or Netlify costs you'd pay hosting a Next.js storefront, typically $20-400/month depending on traffic.
Hydrogen vs. Next.js: The Honest Comparison
Choose Hydrogen when: Shopify is your long-term platform, you want free optimized hosting through Oxygen, faster time-to-market matters, your team wants pre-built commerce components, and you operate a single Shopify-first store.
Choose Next.js when: You need to integrate multiple backends (Sanity, Contentful, custom APIs), multi-cloud deployment flexibility is required, your team has deep Next.js expertise, you're building enterprise headless commerce, or you want ISR for real-time catalog updates.
When Hydrogen Creates Value
Scenario 1: Custom Product Experiences - 3D product configurators, custom jewelry builders, interactive sizing tools, AR visualization.
Scenario 2: Content-Commerce Integration - Magazine-style content leads to purchases, storytelling is central, SEO depends on content pages.
Scenario 3: Performance-Critical Competition - Server-side rendering with streaming, edge deployment, no third-party app JavaScript overhead.
Scenario 4: Omnichannel Requirements - The @shopify/hydrogen-react package works in any React framework, sharing components between web and mobile.
The Hidden Costs of Hydrogen
Development timeline: A comparable headless MVP takes 8-16 weeks. A Shopify theme customization takes 2-4 weeks.
Maintenance overhead: API version updates, dependency updates, integration maintenance, security patches. Budget 10-20% of initial development annually.
Comparison: Build Costs
Hydrogen storefront build: Simple $40,000-80,000, Full-featured $80,000-150,000, Enterprise $150,000+. Oxygen hosting is included in Shopify plan, saving $3,600/year compared to Vercel Pro over time.
Decision Framework: Should You Use Hydrogen?
- Are you committed to Shopify long-term?
- Do you need experiences themes can't deliver?
- Do you have React/Remix developers available?
- Is the timeline 2-4 months (not 2 weeks)?
- Does the business case justify the $100K+ investment over a $15K theme?
Key Takeaways
Shopify Hydrogen is a powerful framework for building custom headless storefronts. It provides pre-built commerce components, native Storefront API integration, and free edge hosting through Oxygen.
Hydrogen makes sense when Shopify is your permanent platform, theme constraints block required experiences, performance at the edge matters, you're building across multiple channels, and your team has React/Remix expertise.
Hydrogen reduces headless build time by providing commerce primitives, but it's still a significant investment compared to themes. The complexity is worth it when your storefront experience is a competitive differentiator.
At NextBuild, we build headless commerce with both Hydrogen and Next.js, choosing based on client requirements rather than framework preference.
