Shopify has traditionally been associated with Liquid themes and the Online Store, but Shopify stores no longer have to use Shopify’s conventional frontend.
For businesses that need greater control over performance, user experience, integrations, and frontend architecture, Shopify can operate as a headless commerce backend while a custom storefront handles the customer-facing experience.
One of Shopify’s primary approaches to this architecture is Hydrogen + Oxygen.
Hydrogen provides Shopify-focused tools for developing a custom storefront, while Oxygen provides Shopify’s infrastructure for deploying Hydrogen storefronts globally.
The result is an architecture that can look roughly like this:
Customer → Hydrogen/React storefront → Shopify Storefront API → Shopify commerce backend
Instead of Shopify Liquid generating the entire storefront, developers can build the shopping experience using React while continuing to use Shopify for products, inventory, customers, orders, checkout, discounts, and other commerce operations.
This guide explains how Shopify Hydrogen, Oxygen, React, the Storefront API, and headless commerce fit together—and when this architecture makes sense.
Table of Contents
A traditional Shopify store combines two major layers:
Frontend
The interface customers interact with, including:
Commerce backend
Shopify handles functionality such as:
In a normal Shopify theme, these layers are closely connected through Shopify’s theme system and Liquid.
Headless commerce separates them.
Your Shopify admin remains the commerce engine, but the storefront becomes an independent application.
For example:
HEADLESS SHOPIFY ARCHITECTURE
Customer
│
▼
┌─────────────────────┐
│ React Storefront │
│ Hydrogen │
└─────────┬───────────┘
│
GraphQL / APIs
│
▼
┌─────────────────────┐
│ Shopify │
│ │
│ Products │
│ Collections │
│ Inventory │
│ Customers │
│ Cart │
│ Checkout │
│ Orders │
└─────────────────────┘The customer does not need to know that Shopify is powering the commerce infrastructure behind the site.
Shopify Hydrogen is Shopify’s storefront technology for building headless commerce experiences.
As of 2026, Shopify describes the current Hydrogen stack as an opinionated headless commerce stack built on React Router.
Hydrogen gives developers Shopify-aware components, utilities, API clients, caching tools, cart functionality, customer account integrations, analytics capabilities, and development conventions.
Instead of building every Shopify integration manually, developers start with infrastructure designed specifically around Shopify commerce.
A new Hydrogen project can currently be created with:
npm create @shopify/hydrogen@latestA typical Hydrogen storefront contains:
hydrogen-store/
│
├── app/
│ ├── assets/
│ ├── components/
│ ├── graphql/
│ ├── lib/
│ ├── routes/
│ ├── styles/
│ ├── entry.client.jsx
│ ├── entry.server.jsx
│ └── root.jsx
│
├── public/
├── server.js
├── package.json
├── vite.config.js
└── storefrontapi.generated.d.tsThis structure gives developers considerably more control over the frontend than a conventional Shopify theme.
React is central to the currently supported Hydrogen architecture.
Hydrogen projects are React Router applications with Shopify-specific tooling added around them.
That means developers can create storefront experiences using reusable components such as:
Header
MegaMenu
Hero
ProductCard
ProductGrid
CollectionGrid
PredictiveSearch
ProductGallery
VariantSelector
AddToCart
CartDrawer
Recommendations
RecentlyViewed
FooterA product page might conceptually look like:
<ProductPage>
<ProductGallery />
<ProductInformation>
<ProductTitle />
<ProductPrice />
<VariantSelector />
<QuantitySelector />
<AddToCart />
</ProductInformation>
<ProductDescription />
<ProductRecommendations />
</ProductPage>This component-driven approach can be particularly valuable for large storefronts or brands with highly customized interfaces.
Hydrogen and Hydrogen React are related but not identical.
Hydrogen is Shopify’s opinionated storefront stack.
Hydrogen React is a framework-agnostic collection of React components, functions, and utilities for working with Shopify’s Storefront API.
Hydrogen React is bundled into Hydrogen, but developers can also use it with another React-based application.
This distinction matters when planning a custom architecture.
For a Shopify-first headless storefront, Hydrogen generally provides the more complete starting point.
For an existing React application, Hydrogen React can provide Shopify commerce functionality without necessarily adopting the entire Hydrogen application architecture.
If Hydrogen is the storefront technology, Oxygen is Shopify’s hosting and deployment platform for Hydrogen storefronts.
Oxygen is designed specifically for Shopify’s headless commerce stack.
It provides infrastructure including:
This creates a closely integrated stack:
React
↓
Hydrogen
↓
Oxygen
↓
Shopify APIs
↓
Shopify CommerceInstead of configuring a completely separate hosting infrastructure, teams can deploy Hydrogen directly to Oxygen.
A Hydrogen deployment can be initiated with:
npx shopify hydrogen deployShopify’s CLI builds the storefront and creates an Oxygen deployment.
A production headless store can involve several layers.
VISITOR
│
▼
┌─────────────────────┐
│ CDN / Edge │
│ Oxygen │
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ Hydrogen │
│ │
│ React Components │
│ React Router │
│ SSR │
│ Routes │
│ Loaders │
│ Actions │
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ Shopify APIs │
│ │
│ Storefront API │
│ Customer Account API│
└─────────┬───────────┘
│
▼
┌─────────────────────┐
│ Shopify Backend │
│ │
│ Products │
│ Collections │
│ Inventory │
│ Customers │
│ Checkout │
│ Orders │
└─────────────────────┘Shopify therefore continues doing what it does well: commerce.
Hydrogen controls how the commerce experience is presented.
The Storefront API is a critical part of the headless architecture.
Hydrogen communicates with Shopify through APIs rather than depending on Liquid templates.
For example, a storefront can request product information including:
query Product($handle: String!) {
product(handle: $handle) {
id
title
handle
description
featuredImage {
url
altText
}
variants(first: 20) {
nodes {
id
title
availableForSale
price {
amount
currencyCode
}
}
}
}
}Shopify returns structured product data.
Hydrogen then decides how to render it.
This separation is the fundamental idea behind headless Shopify.
One common misconception is that a React storefront automatically means everything is rendered in the browser.
Hydrogen’s current architecture supports an SSR-first approach.
The server can generate HTML before sending the page to the browser.
Conceptually:
Visitor requests /products/shoe
↓
Hydrogen route
↓
Loader requests Shopify product
↓
Shopify Storefront API
↓
Product data returned
↓
React renders HTML
↓
HTML sent to visitor
↓
React adds client-side interactivityThis architecture can provide benefits for both initial page delivery and search-engine accessibility when implemented correctly.
The currently supported Hydrogen framework is built around React Router.
Three important concepts are:
Loaders retrieve data needed for a route.
For example:
/products/red-running-shoeA loader might retrieve:
Actions handle changes or mutations.
Examples include:
React Router can associate URL structure, components, and data loading.
This can help different parts of the page retrieve data independently and in parallel.
One of Oxygen’s major architectural advantages is that Hydrogen storefronts can run on Shopify’s global deployment infrastructure.
Rather than every request travelling back to one traditional application server, appropriate workloads can execute closer to users.
Conceptually:
Traditional hosting
India customer
│
└──────────────► US Server
Edge architecture
India customer
│
▼
Nearby Edge
│
▼
Shopify servicesActual performance still depends on application architecture, API requests, images, JavaScript, third-party scripts and caching. Headless architecture by itself does not guarantee a fast website.
Caching is an important part of building a performant headless storefront.
Hydrogen provides caching capabilities for Storefront API data, while Oxygen provides caching infrastructure at the edge.
Oxygen also supports full-page caching.
With full-page caching, a generated response—typically HTML—can be stored and reused for subsequent eligible requests.
Conceptually:
First visitor
Request
↓
Hydrogen executes
↓
Shopify API
↓
Generate HTML
↓
Cache response
Later visitor
Request
↓
Oxygen cache
↓
HTML returnedThis can reduce unnecessary storefront execution and improve response times for cacheable pages.
Different content requires different strategies.
For example:
Homepage → cacheable
Collection page → cacheable
Product information → cacheable
Editorial content → cacheable
Customer account → personalized
Cart → personalized
Checkout → personalizedA good Hydrogen implementation therefore does not simply cache everything.
It determines what should be cached, for how long, and when content should be refreshed.
Headless does not automatically improve SEO.
It gives developers greater control over SEO implementation.
That distinction is important.
A poorly built Hydrogen store can have worse SEO than a well-optimized Shopify Liquid store.
A properly engineered Hydrogen storefront can provide precise control over:
Hydrogen provides tools and conventions to support these implementations.
Shopify provides Hydrogen tooling for generating sitemap routes.
For example:
npx shopify hydrogen generate route sitemapA storefront can expose search-engine-friendly sitemap files for products, collections, pages, and other indexable content.
Shopify’s current documentation states that generated Hydrogen sitemap files are cached for 24 hours by default.
Hydrogen’s base template also includes support for robots.txt.
A route can be generated with:
npx shopify hydrogen generate route robotsOxygen has an especially useful safeguard for development deployments.
Shopify states that non-production Oxygen deployments exposed through shareable links or authentication bypass tokens have their robots rules overridden to disallow crawlers.
That reduces the chance of preview versions accidentally being indexed and creating duplicate-content problems.
A serious ecommerce SEO implementation should include appropriate structured data.
Depending on the page, that may include:
Organization
WebSite
BreadcrumbList
Product
Offer
AggregateRating
Review
Article
FAQPageFor a product page, structured data can describe information such as:
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Premium Running Shoe",
"offers": {
"@type": "Offer",
"price": "129.00",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}The implementation should always reflect the actual visible product and commerce data rather than generating misleading schema solely for search engines.
Hydrogen gives developers considerable control over frontend performance, but that freedom also introduces responsibility.
A high-performance storefront should carefully manage:
Do not send large client-side bundles when functionality can remain server-rendered.
Use:
Avoid unnecessary font files and excessive font weights.
Analytics, reviews, chat widgets, personalization engines, tracking systems and marketing scripts can significantly affect performance.
Avoid unnecessary Storefront API and third-party requests.
Cache stable catalog data appropriately.
A Hydrogen storefront with excessive JavaScript and dozens of marketing scripts can still perform poorly.
Architecture matters more than the word “headless.”
Modern ecommerce stores frequently need customer-specific functionality such as:
Hydrogen can integrate with Shopify’s Customer Account API.
This means developers don’t have to recreate Shopify’s entire customer commerce system independently.
Cart interactions are another important part of a headless storefront.
A modern storefront may provide:
Product page
↓
Add to Cart
↓
Cart Drawer
↓
Update Quantity
↓
Apply commerce logic
↓
CheckoutBecause the UI is custom, developers have much more freedom over the shopping experience.
Examples include:
However, every customization also introduces development and testing responsibility.
Headless Shopify does not mean rebuilding Shopify’s payment infrastructure from scratch.
The storefront can create and manage the shopping experience before directing the customer into Shopify’s checkout flow.
This is an important advantage of using Shopify as the commerce backend.
You can create a highly customized frontend without taking responsibility for building a complete payment and order-processing platform.
Shopify can manage product and commerce information, but sophisticated headless websites may also use a separate content management system.
A possible architecture is:
Hydrogen
/ \
/ \
▼ ▼
Shopify CMS
│ │
Commerce Editorial
Data ContentA CMS might manage:
Potential CMS choices include platforms such as Sanity, Contentful or other headless CMS systems.
Whether an additional CMS is necessary depends on the content requirements of the business.
| Area | Shopify Liquid Theme | Hydrogen Headless |
|---|---|---|
| Frontend | Liquid/theme architecture | React-based custom application |
| Hosting | Shopify | Oxygen or compatible external hosting |
| Development complexity | Lower | Higher |
| Custom UX flexibility | High within Shopify theme model | Very high |
| Shopify integration | Native | API-driven |
| Maintenance | Generally simpler | More engineering required |
| Deployment | Theme deployment | Application deployment |
| Caching control | More platform-managed | Greater developer control |
| Server rendering | Shopify-rendered | Hydrogen/React Router SSR |
| Frontend architecture | Shopify theme | Custom application |
| Best fit | Most Shopify stores | Stores needing substantial frontend customization |
Shopify can also be used headlessly with frameworks other than the currently supported Hydrogen stack.
For example:
Option A
Shopify
↓
Storefront API
↓
Hydrogen
↓
React Router
↓
Oxygen
Option B
Shopify
↓
Storefront API
↓
Next.js
↓
Vercel / another hostHydrogen offers a Shopify-first developer experience.
Next.js may make sense when an organization already has substantial Next.js infrastructure or has requirements extending beyond Shopify’s opinionated stack.
The correct choice depends on:
Yes.
Current Hydrogen applications are React Router applications and can be adapted for other deployment environments.
Shopify documents self-hosting approaches for platforms including environments such as:
Moving away from Oxygen can require runtime-specific configuration changes.
For example, developers may need to change:
server.ts
react-router.config.ts
vite.config.ts
entry.server.tsxand remove Oxygen-specific packages or adapters.
Oxygen is therefore convenient, but Hydrogen itself does not mean the storefront is permanently locked to Oxygen.
Shopify’s headless strategy is evolving.
In 2026, Shopify introduced a developer preview of the next Hydrogen architecture.
The distinction is significant.
The currently supported Hydrogen path is approximately:
Hydrogen
↓
React Router
↓
Oxygen / compatible hostingThe developer preview moves toward:
Hydrogen commerce primitives
↓
Any supported JavaScript framework
↓
Any suitable JavaScript runtimeShopify describes the preview as moving Hydrogen from an opinionated framework toward an SDK plus agent skills model.
This potentially allows teams to bring Hydrogen commerce capabilities into the framework and runtime they already use.
However, it is important not to confuse preview technology with the fully supported production path.
For production projects where stability is the priority, Shopify currently recommends the existing React Router-based Hydrogen architecture.
The developer preview is important to watch because it indicates where Shopify’s headless development model is heading.
Hydrogen can be a strong architectural choice when a business requires functionality beyond a conventional ecommerce storefront.
Examples include:
Stores with unusual product discovery, configuration, storytelling or purchasing interfaces.
A company may want commerce integrated into a broader digital experience rather than having the entire website behave like a conventional ecommerce template.
For example:
Editorial content
+
Product discovery
+
Interactive guides
+
Personalization
+
Shopify checkoutHydrogen can combine information from:
Shopify
CMS
ERP
PIM
Search engine
Reviews platform
Loyalty system
Custom APIand present it through one storefront.
Businesses requiring sophisticated localization and market-specific interfaces can benefit from greater frontend control.
Examples include:
Headless architecture is not automatically the better Shopify architecture.
For many businesses, a well-built Shopify theme remains the more practical solution.
Consider staying with a traditional Shopify architecture when:
For example, a relatively standard store selling 100 products usually does not need Hydrogen merely because React sounds more modern.
A carefully optimized Shopify theme may provide better economics and easier maintenance.
With greater control comes greater responsibility.
A development team may need to own:
Frontend architecture
API integration
Caching
SEO implementation
Analytics
Error handling
Accessibility
Performance
Deployments
Monitoring
Testing
Third-party integrations
Application upgradesWith a Shopify theme, Shopify manages more of the storefront platform.
With headless commerce, your development team manages more of the application.
This is one of the most important considerations when deciding between the two architectures.
Another area that requires careful planning is Shopify app compatibility.
Many Shopify applications were originally designed around Liquid themes.
An app may expect:
Theme blocks
Liquid snippets
Script injection
App embeds
Shopify theme DOMThose assumptions may not exist in a custom Hydrogen storefront.
Before adopting headless Shopify, audit important integrations such as:
Check whether each provider supports headless storefronts through APIs, SDKs or dedicated Hydrogen integrations.
For a scalable storefront, keep responsibilities clearly separated.
app/
├── components/
│ ├── global/
│ ├── product/
│ ├── collection/
│ ├── cart/
│ ├── search/
│ └── account/
│
├── routes/
│ ├── _index
│ ├── products.$handle
│ ├── collections.$handle
│ ├── search
│ ├── cart
│ └── account
│
├── graphql/
│ ├── products
│ ├── collections
│ ├── search
│ └── fragments
│
├── lib/
│ ├── seo
│ ├── analytics
│ ├── schema
│ ├── cache
│ └── utilities
│
└── styles/The exact structure will depend on the project, but keeping commerce logic, presentation, API queries, SEO and shared utilities organized makes long-term maintenance easier.
A practical Shopify headless stack could look like:
Commerce
Shopify
│
├── Products
├── Inventory
├── Customers
├── Orders
└── Checkout
Frontend
React
│
Hydrogen
│
React Router
Data
Storefront API
Customer Account API
Hosting
Oxygen
Optional services
│
├── Headless CMS
├── Search
├── Reviews
├── ERP
├── PIM
├── CRM
└── AnalyticsThe key is not to add additional platforms unless they solve an actual business requirement.
A typical Hydrogen project may follow this process.
Configure:
Start the Hydrogen application.
npm create @shopify/hydrogen@latestLink the storefront to the Shopify store and configure Storefront API access.
Run:
npm run devCreate:
/
/collections/:handle
/products/:handle
/search
/cart
/accountDevelop reusable commerce UI components.
Configure:
Validate ecommerce events and consent handling.
Measure:
npx shopify hydrogen deployTest the preview environment before production deployment.
There is no universal answer.
Hydrogen provides more architectural control.
That can allow an experienced development team to optimize:
But a poorly implemented Hydrogen store can easily be slower than an optimized Shopify theme.
The better question is:
Does the project require enough frontend flexibility to justify owning a custom application?
If yes, Hydrogen becomes compelling.
If no, the simplicity of Shopify’s theme architecture may be more valuable.
Yes, Hydrogen can support excellent technical SEO when implemented correctly.
Its SSR architecture means important page content can be rendered into HTML on the server.
Developers also gain detailed control over:
<title>
<meta name="description">
<link rel="canonical">
robots directives
structured data
hreflang
redirects
sitemaps
internal linking
pagination
HTTP responsesBut headless architecture does not remove the need for SEO expertise.
Developers are responsible for getting these details right.
No.
Oxygen is Shopify’s purpose-built deployment platform for Hydrogen and provides a convenient integrated experience.
However, Shopify also documents self-hosting Hydrogen on other infrastructure.
Oxygen makes the stack simpler:
Shopify Backend
+
Hydrogen
+
OxygenExternal hosting provides greater infrastructure choice but can increase configuration and operational responsibility.
Hydrogen itself should not be thought of simply as a Shopify Plus-only frontend technology.
Access and specific Shopify capabilities can depend on the merchant’s plan and the features being used.
Notably, Shopify expanded Oxygen availability in August 2026 to trial-plan stores for development purposes, although trial stores do not receive public Oxygen environments.
Always check current Shopify plan requirements for the specific features needed by a project rather than assuming that all headless capabilities require Shopify Plus.
Shopify Hydrogen is Shopify’s technology stack for developing custom headless commerce storefronts. The fully supported 2026 version is built around React Router and provides Shopify-specific components, APIs and utilities.
Oxygen is Shopify’s global serverless deployment platform designed for Hydrogen storefronts.
Yes. The current supported Hydrogen framework uses React and React Router.
No.
Shopify remains the commerce backend.
Hydrogen replaces or customizes the storefront layer.
For a fully headless storefront, Hydrogen can replace the Liquid theme as the primary customer-facing frontend.
Shopify still powers commerce operations behind it.
Yes.
A Hydrogen storefront can retrieve commerce information from Shopify while retrieving editorial content from another CMS.
Yes. One of the key benefits of using Shopify headlessly is retaining Shopify’s commerce and checkout infrastructure rather than building an ecommerce backend from scratch.
Hydrogen can be self-hosted on compatible platforms. Shopify’s current documentation includes guidance for adapting Hydrogen applications to deployment environments including Vercel.
It can be, particularly when the store has complex frontend, integration or content requirements. Store size alone, however, is not a reason to move headless.
Neither architecture is universally better.
Liquid offers simplicity and tight Shopify integration.
Hydrogen offers considerably greater frontend architectural freedom.
The appropriate choice depends on the project’s requirements.
Shopify Hydrogen changes the role Shopify can play in a modern ecommerce architecture.
Instead of Shopify controlling both the commerce backend and the complete presentation layer, the responsibilities can be separated:
Shopify
=
Commerce Engine
Hydrogen + React
=
Customer Experience
Oxygen
=
Deployment + Edge InfrastructureThis separation gives development teams far more freedom to create custom shopping experiences while retaining Shopify’s established commerce infrastructure.
But headless should be an architectural decision—not a trend-driven one.
For straightforward ecommerce stores, Shopify’s traditional theme architecture remains powerful, efficient and easier to maintain.
For brands that need highly customized experiences, multiple data sources, sophisticated content-commerce integration or application-like storefront functionality, Shopify Hydrogen + Oxygen provides a compelling React-based architecture.
And Shopify’s 2026 Hydrogen developer preview suggests that the ecosystem is moving toward even greater flexibility, with Hydrogen’s commerce capabilities becoming less dependent on one framework or runtime.
For teams considering headless Shopify today, the most important question is therefore not:
“Is headless newer than Liquid?”
It is:
“Does greater control over the storefront create enough business value to justify the additional engineering complexity?”
When the answer is yes, Hydrogen and Oxygen provide one of Shopify’s most direct paths to building a modern, custom headless commerce experience.
The technical details above are based on Shopify’s current 2026 documentation: Hydrogen is presently built on React Router, Hydrogen React can also be used independently in React applications, Oxygen provides Shopify’s global edge hosting, and Hydrogen can be self-hosted on alternative infrastructure. Shopify also released its framework/runtime-agnostic next-generation Hydrogen developer preview in June 2026, so I deliberately separated that preview from the current supported production architecture.
For your website, I’d target the primary keyword “Shopify Hydrogen” and secondary clusters such as “Shopify Hydrogen Oxygen,” “Shopify headless commerce,” “headless Shopify React,” “Shopify React storefront,” “Hydrogen vs Shopify Liquid,” “Hydrogen vs Next.js,” and “Shopify headless store.” The official technical references are Shopify Hydrogen documentation, Hydrogen & Oxygen getting started guide, and Shopify Hydrogen SEO documentation.
Quick Summary: Next.js WordPress in 60 Seconds Next.js WordPress is a headless architecture where WordPress…
Quick Summary Choosing the right NDIS website design is about much more than appearance. A…
Quick Summary Optimizing a Shopify store in 2026 is no longer just about ranking on…
Most people connect Cloudflare to their domain and then do nothing. The default settings protect…
Fastrr Checkout (formerly Shiprocket Checkout) , Razorpay Magic Checkout, and GoKwik all solve the same…
If you've been running a Shopify store the same way you did two or three…