Shopify Hydrogen is an open-source framework for creating fully customized headless storefronts using Shopify's Storefront API.
Shopify Oxygen is Shopify's edge-hosting platform for Hydrogen, included at no extra cost with all paid Shopify plans.
Together, Hydrogen and Oxygen give DTC brands and Shopify Plus merchants faster storefronts, complete design freedom, and improved SEO, but only if you have React developer resources.
Shopify apps built for Liquid themes don't automatically work on Hydrogen. Bundle, discount, and checkout apps need API-first integration rather than theme embeds.
Most growing stores should optimize their Liquid theme first. Hydrogen makes commercial sense when your GMV exceeds $1M, and your UX requirements genuinely exceed what Liquid can build.
E-commerce is evolving rapidly, and traditional Shopify themes may no longer meet the needs of fast-growing brands that demand high-performance, customizable storefronts.
This is where Shopify Hydrogen and Oxygen come in: powerful tools that enable headless commerce on Shopify.
Hydrogen is a React-based framework for building custom Shopify storefronts, while Oxygen is Shopify’s serverless hosting designed to support these storefronts.
Together, they deliver faster load times, better SEO, and limitless design flexibility for brands.
In this guide, we’ll break down what Hydrogen and Oxygen are, how they work, their benefits and drawbacks, and who should use them, all in simple terms.
What Is Shopify Headless Commerce?
Before getting into Hydrogen and Oxygen specifically, it helps to understand what headless commerce means on Shopify.
In a traditional Shopify store, your frontend (what customers see) and your backend (products, inventory, checkout, orders) are tightly connected through Liquid, Shopify's templating language. Everything runs together as one system.
Headless commerce decouples these two layers.
Your backend stays on Shopify: handling products, inventory, payments, and fulfillment, but your frontend is built separately using a modern JavaScript framework and communicates with Shopify via the Storefront API.
The result is a storefront that looks and behaves exactly as you design it, with no constraints imposed by Shopify's theme system. Hydrogen and Oxygen are Shopify's recommended tools for building and hosting this kind of storefront.
What Is Shopify Hydrogen?
Shopify Hydrogen is Shopify's official open-source React framework for building custom headless storefronts. It is distributed as the @shopify/hydrogen npm package and is free to use.
Hydrogen currently uses React Router v7 in its stable release, following the merger of the Remix framework into React Router. Modern Hydrogen storefronts are therefore structured as React Router applications with Shopify-specific commerce primitives layered on top.
However, Shopify announced a new developer preview in June 2026 that reimagines Hydrogen as a framework-agnostic commerce toolkit rather than a React-only framework. It means the new architecture allows developers to use Hydrogen's commerce primitives with frameworks such as Next.js, React Router, SvelteKit, Astro, SolidStart, and Nuxt.
Current production Hydrogen storefronts include several built-in capabilities:
A typed Storefront API client for GraphQL queries and mutations
Pre-built cart, product, and collection primitives mapped to Shopify APIs
Server-side rendering (SSR), streaming, and caching
First-party analytics with consent handling
Server-side cart and request handlers
Framework-specific bindings that make Hydrogen feel native to your chosen stack
The current stable release is @shopify/hydrogen@2026.4.0, released on April 9, 2026. Shopify uses calendar-based versioning (year.release.patch), with quarterly releases aligned to the Storefront API lifecycle.
Special Note: Shopify recently introduced a framework-agnostic version of Hydrogen in developer preview. The examples in this guide refer to the current stable release (2026.4.0), while the new architecture is still evolving and additional framework bindings are expected in future releases.
What Is Shopify Oxygen?
Shopify Oxygen is Shopify's global edge hosting platform built specifically for Hydrogen storefronts. It is available at no extra charge on all paid Shopify plans, from Basic ($39/month) through Shopify Plus, and is not available on Starter plans or development stores.
Why it matters
Faster global storefront delivery.
Easier deployment through Shopify’s Hydrogen workflow.
Better fit for brands that want a headless storefront without having to manage extra infrastructure.
Key facts
It is part of Shopify’s Hydrogen stack.
It supports preview and production-style deployments.
Shopify added Storefront MCP support, enabling Hydrogen storefronts to share live product and customer data with AI agents.
It is not a full Node.js implementation; it runs on a worker-based JavaScript runtime, so some Node.js APIs are unavailable.
If Hydrogen is the storefront engine, Oxygen is the hosting layer that helps it run fast, scale globally, and deploy cleanly inside Shopify.
How Do Hydrogen and Oxygen Work Together?
Hydrogen and Oxygen form Shopify's recommended headless stack. Here is how the layers connect:
A customer request flows like this:
The visitor's browser sends a request ⇒ Oxygen serves it from the nearest edge location ⇒ Hydrogen renders the page server-side using data from the Storefront API ⇒ the rendered page reaches the browser in milliseconds.
Shopify Hydrogen vs Liquid Themes: What's the Difference?
This is the question most Shopify merchants ask before committing to Hydrogen. Here is an honest comparison across the dimensions that matter.
Dimension
Shopify Hydrogen
Shopify Liquid Themes
Performance
Can outperform Liquid for complex experiences when properly optimized with SSR, streaming, and edge caching
Fast out of the box and sufficient for most storefronts
Customisation
Complete frontend control with React and headless architecture
Limited to Shopify theme architecture and Liquid conventions
SEO
Full control over rendering, metadata, and structured data implementation
Strong built-in SEO capabilities for most stores
App compatibility
Many Shopify apps require API-first or custom implementations
Broad native app compatibility with minimal setup
Development cost
Higher upfront investment and ongoing engineering costs
Lower implementation and maintenance costs
Developer requirement
Requires React and modern frontend expertise
Usually manageable without a developer for everyday edits
Ongoing maintenance
Requires ongoing engineering support and API upgrades
Lower maintenance burden for most stores
Best for
Brands with complex UX requirements, high traffic, and dedicated engineering resources
Most Shopify stores, especially startups and mid-market brands
The honest summary: Liquid themes are better by default without optimization. A well-built Hydrogen store with proper SSR, edge caching, and streaming can outperform Liquid, but that level of performance requires active developer tuning. If your team cannot maintain that setup, Liquid is the safer choice.
Benefits of Shopify Hydrogen and Oxygen
Complete design freedom: Hydrogen removes every frontend constraint imposed by Shopify themes. Any layout, any interaction, any UI pattern. If it can be built in React, it can be a Shopify storefront.
Performance at scale: Hydrogen’s server-side rendering, combined with Oxygen’s global edge hosting, can deliver exceptionally fast storefront experiences. According to research from Google and Deloitte, a 0.1-second improvement in load speed increased retail conversions by 8.4% and average order value by 9.2%.
Full SEO and metadata control: Hydrogen gives developers direct control over every structured data element, meta tag, canonical URL, and Open Graph property, something Liquid themes make difficult to customize at scale.
Free global hosting: Oxygen is included with every paid Shopify plan, with no hosting fees, no bandwidth charges, and no scaling configuration required.
Agentic commerce readiness: Shopify added Storefront MCP support, enabling Hydrogen storefronts on Oxygen to expose real-time product and customer data to AI agents. Shopify President Harley Finkelstein confirmed that AI-referred traffic to Shopify merchants is up 7x since January 2025. Hydrogen's architecture is built for this shift.
Limitations of Shopify Hydrogen: What to Know Before You Switch
This section is the most important one if you're seriously considering Hydrogen. These are the real blockers merchants hit, not the ones in marketing copy.
App compatibility is the biggest real-world challenge: Most Shopify apps are built for Liquid themes. They inject JavaScript into your theme, use Liquid variables, or depend on theme architecture that simply does not exist in Hydrogen. When you go headless, you lose plug-and-play app compatibility.
Apps that typically work through the Storefront API (subscriptions, reviews, some analytics) can be integrated with engineering effort. Apps that rely on theme embeds, Liquid metafields, or the theme editor (including many bundle builders, upsell widgets, popups, and page builders) require significant custom development to replicate their functionality.
Before committing to Hydrogen, audit every app you currently use and check whether it has headless documentation. If it doesn't, factor the integration cost into your build estimate.
Most meaningful integrations require a developer: Unlike a Liquid theme, where a marketer can install an app and have it working in five minutes, Hydrogen integrations require an engineer. Analytics setup, A/B testing tools, live chat widgets, loyalty programs, email capture, everything that's a one-click install on Liquid becomes a development task on Hydrogen.
You lose Shopify's visual editing experience: One of the biggest operational trade-offs with Hydrogen is the loss of Shopify's theme editor. Merchants and marketers can no longer make many frontend changes themselves. Unless you implement a headless CMS or visual editing layer, even simple content changes may require developer involvement.
The real cost is higher than the build cost: The build itself runs $10,000 – $150,000+, depending on complexity. But the ongoing cost is where brands are often surprised. You need at least one developer permanently available for: Storefront API version upgrades (every quarter), framework updates, new integrations, and Shopify platform feature adoption. Shopify platform updates that automatically apply to Liquid (new checkout features, Shop Pay integrations, new metafield types) require engineering effort to adopt on Hydrogen.
Storefront API versioning requires active maintenance: Shopify updates the Storefront API every quarter. If you are using Hydrogen version 2026.1.0, you are on Storefront API 2026-01. When 2026-04 drops, your team needs to review the breaking changes and update them. Neglecting this means your build drifts from the current API and eventually breaks. This is a permanent operational commitment, not a one-time setup.
Oxygen has Node.js limitations: Oxygen is a worker-based runtime built on Cloudflare's workerd. It does not support all Node.js APIs. If your project depends on specific Node.js modules that aren't web-standard, you will need to self-host or restructure your code.
How Apps Like Skai Lama Work With Shopify Hydrogen
Shopify Hydrogen is a headless storefront framework, meaning your store's frontend is custom-built in React rather than running on a standard Shopify theme. It gives brands full design control and faster storefronts, but it also changes how apps integrate.
Here is the honest picture of how Skai Lama's apps behave on a Hydrogen store.
CheckoutWiz works out of the box
Because CheckoutWiz customizes Shopify's own hosted checkout page and not your storefront theme, it is completely unaffected by going headless. Your upsells, trust badges, branding, and shipping customizations carry over with zero rebuild required. This is the one Skai Lama app where Hydrogen changes nothing.
Easy Bundles and Kite work in part
The discount logic and pricing rules for all three apps run server-side through Shopify Functions. That means the actual discounts, say, bundle pricing, volume tiers, free gift thresholds, still apply correctly at checkout regardless of how your storefront is built. What does not transfer automatically is the storefront widget: the bundle builder UI, the mix-and-match selector, the free gift progress bar. These are built for Liquid themes and do not render on a Hydrogen frontend without custom development work by your dev team.
The practical implication for merchants
If you are on Hydrogen or planning to move there, the backend logic of Skai Lama's apps keeps working: your bundle pricing holds, your discounts fire, your checkout customizations stay intact. What your development team would need to rebuild is the customer-facing selection interface on the storefront side, wiring it to the same data the apps already expose.
Most Shopify merchants are on standard Online Store themes, where all Skai Lama apps work fully without any of the above considerations. Hydrogen is a specialized setup typically used by larger brands with dedicated development teams. If you are running a standard Shopify theme, nothing in this section affects you.
Who Should Use Shopify Hydrogen and Oxygen?
Hydrogen is the right choice if:
Your annual GMV is $1M or more, and your Liquid theme is genuinely limiting your conversion or UX
You need a custom shopping experience that Liquid cannot build: interactive product configurators, real-time personalization, complex filtering, multi-brand storefronts on a single codebase
You have a React developer (or team) available full-time for building and ongoing maintenance
You are a Shopify Plus merchant who needs higher Storefront API rate limits for high-traffic pages
You are building for agentic commerce and want Storefront MCP integration out of the box
Hydrogen is not the right choice if:
Your store is under $1M GMV. A well-optimized Liquid theme will deliver comparable performance at a fraction of the cost
You rely heavily on Shopify apps that are not headless-compatible
You do not have in-house React expertise or an agency relationship with Hydrogen experience
Your team needs marketers to edit content or manage the storefront independently: headless storefronts require engineering involvement for most content changes unless you add a visual CMS layer
Should You Use Shopify Hydrogen?
If you are unsure, start here: can you achieve your goal with a well-optimized Liquid theme or a Shopify Plus checkout extension?
If yes, do that first.
If the answer is genuinely no, or you have a UX requirement that Liquid physically cannot support, then Hydrogen is the right next step.
Hurrify customers to buy within a given timeframe with a sales countdown timer & improve conversions
Another popular Shopify checkout app is Checkout Promotions. The app comes with the ability to leverage a collection of highly robust visibility rules that help show customers one-click post purchase upsell promotions after an order payment has been made. Some of its key features include:
Features
AI recommended and manual recommendations for upselling.
Complete branding control.
Checkout Upsell for increasing AOV.
AI recommended and manual recommendations for upselling.
Pricing
Development
Free
Monthly Plan
$99/ month
Plus Plan
$99/ month
Plus Plan
$99/ month
FAQs on Shopify Hydrogen and Oxygen
What is Shopify Hydrogen?
What is the difference between Shopify Hydrogen and Liquid?
Does Shopify Hydrogen work with Shopify apps?
Is Shopify Oxygen free?
Do I need Shopify Plus to use Shopify Hydrogen?
When should I not use Shopify Hydrogen?
Neetika M
Neetika is the founder of Skai Lama. Passionate about building SaaS, Product Development, and Marketing, she talks about eCommerce Growth, Product Bundling, Gifting, Retention, and Shopify.
.svg)
.svg)
.svg){kind=icon}
.svg)
.jpg)
.png)
.svg)
.svg)
.avif)
