Hydrogen, Oxygen and Next.js
Headless commerce development on Shopify
OUXP builds headless Shopify storefronts for brands that have outgrown a theme: content-led commerce, product configurators or one catalog behind a website, mobile app and in-store screens. We build the storefront in Hydrogen or Next.js, and Shopify keeps running products, orders and checkout behind it. Headless, when it’s actually the right answer: we recommend it only when it will pay for its ongoing cost, and tell you plainly when a theme is the better buy.
Is headless worth it for your store?
Headless means your storefront becomes a separate application that talks to Shopify through its APIs. It removes the limits of a theme – and its conveniences. Here is when that trade pays off, and when it doesn’t.
Headless is worth it when…
- The storefront is part of the product: editorial commerce, configurators or app-like shopping journeys a theme can’t express
- One Shopify backend has to feed several touchpoints – website, mobile app, kiosk and marketplaces
- Your performance or interaction requirements go beyond what a Liquid theme can reach, even after it has been properly optimized
- You have a frontend team that works in React and wants full control of the code, releases and tooling
- You can fund a frontend codebase every year, not just at launch
Stay on a theme when…
- “Our theme is slow” – performance optimization fixes that in typically 2–4 weeks, for a fraction of the cost
- “We want a modern design” – that is theme customization or a custom theme, not a new architecture
- Your team is small: headless means owning hosting, previews and a frontend codebase for good, a cost many brands underestimate
- The store runs on apps that plug into the theme – review widgets, upsells, page builders – and rebuilding each one isn’t worth it
- Merchandisers change pages daily in the theme editor and nobody will own a separate CMS
Custom rules don’t need headless either
Custom pricing, discount, shipping and payment rules are built with Shopify Functions in Shopify Plus development, and they work the same behind a theme or a headless storefront. Most stores that ask us about headless need performance optimization, theme customization or Plus development instead – and when that’s the case, that’s what we recommend.
Theme, hybrid or fully headless?
There are three ways to get a custom frontend on Shopify. The middle one is often overlooked: a theme that keeps the editor and your apps, with custom JavaScript components only where the experience needs them.
| What matters | Customized theme | Hybrid: theme with custom components | Headless storefront |
|---|---|---|---|
| How it works | An Online Store 2.0 theme in Liquid, with custom sections and templates | The same theme, plus React or other JavaScript components mounted in sections – a configurator, a bundle builder | A separate application in Hydrogen or Next.js that reads products, carts and customers through the Storefront API |
| Page editing | Theme editor | Mostly Theme editor, except inside the custom components | No theme editor A headless CMS such as Sanity or Contentful, or Shopify metaobjects |
| Storefront apps | Install Added through app blocks and embeds | Install Same as a theme | Integrate Each app’s feature connected through its API or SDK – or replaced |
| Hosting | Included Shopify | Included Shopify | Separate Oxygen at no extra charge on paid plans, or Vercel, Cloudflare or your own cloud |
| Checkout | Shopify checkout | Shopify checkout | Shopify checkout – the storefront hands the cart over |
| Who maintains it | Shopify and the theme vendor; you own your customizations | The same, plus the components | You own the whole frontend: code, dependencies, framework upgrades and hosting |
| Fits when | Most stores | One or two experiences need app-like behavior and the rest of the store is standard | The cases listed above: multi-channel, content-led or app-like storefronts with a team to own them |
Broad comparison; the details depend on your store. Platform facts as of October 2026.
What changes when the theme goes away
A theme quietly handles a lot: apps, SEO basics, page editing and analytics. A headless storefront has to rebuild each of them. These five decide whether a launch goes well.
-
Apps that plug into the theme stop working
How we handle it
Many Shopify apps add their storefront features through the theme – app blocks, app embeds, injected scripts – and a headless storefront has no theme. Before we scope the build, we sort every app: works through its API or a headless SDK, needs a custom integration or should be replaced. That list and its cost go into the proposal, not into a surprise after launch.
-
Search rankings can drop at launch
How we handle it
Pages render on the server, URLs stay the same where possible and every URL that changes gets a 301 redirect. Your team keeps managing redirects in the Shopify admin – the storefront checks them whenever a page isn’t found. Sitemaps, canonical tags, metadata and structured data are rebuilt and compared page by page with the old site before launch.
-
Merchandisers lose the theme editor
How we handle it
We design the content model with your team: what lives in a headless CMS such as Sanity or Contentful, and what stays in Shopify as metafields and metaobjects. Editors preview every change before it publishes, and we document which changes still need a developer.
-
Checkout, accounts and markets have to connect correctly
How we handle it
The cart is built through the Storefront API and handed to Shopify’s checkout, so payments, PCI compliance and checkout customizations stay with Shopify. Customers sign in with Shopify’s passwordless customer accounts (through the Customer Account API), and each country sees its own prices and language from Shopify Markets.
Need single sign-on from another site? On Shopify Plus, customer accounts can sign shoppers in through your own identity provider over OpenID Connect. Multipass, the older route, is no longer available to new stores, so we don’t build new sign-on on it.
-
Analytics, consent and speed become your job
How we handle it
We wire Shopify analytics events and the Customer Privacy API (or your own consent tool) into the storefront, so the reports in your Shopify admin keep working, within the consent each shopper gives. Every release has a performance budget – agreed limits for Core Web Vitals and page weight – and is checked against it before it ships.
Which stack fits: Hydrogen or Next.js?
We build on Shopify’s own stack by default and on Next.js when your architecture calls for it. Both read Shopify data through the Storefront API and GraphQL, and both are written in TypeScript and React.
-
Hydrogen on Oxygen
Shopify’s React framework, built on React Router, with ready-made pieces for cart, analytics, SEO and customer accounts. It deploys to Oxygen, Shopify’s edge hosting, with a preview for every push and instant rollbacks.
- Hosting
- Oxygen, at no extra charge on paid Shopify plans
- Best when
- Shopify is your only commerce backend and you want the shortest path to production
- Keep in mind
- Upgrades follow Shopify’s quarterly API releases – budget for at least one a year
-
Next.js on Vercel or Cloudflare
The React framework many in-house teams already run. Shopify data comes through the Storefront API, and the Shopify-specific pieces – cart, analytics events, consent and customer accounts – are wired in with Shopify’s Hydrogen React library or custom code.
- Hosting
- Vercel, Cloudflare or your own cloud, billed by the provider
- Best when
- You already run Next.js, pull content from several systems or the store is one part of a larger web app
- Keep in mind
- More integration work up front than Hydrogen
What every headless build includes
The storefront is only part of the job. These eight pieces are in every headless project we scope, so nothing a theme used to handle goes missing at launch.
- Architecture design: the stack, the hosting and how data flows between Shopify, the CMS and your other systems, written down
- Storefront build in Hydrogen or Next.js, in TypeScript, reviewed by a senior engineer before every release
- CMS integration with a content model your editors can use, previews included
- Checkout integration: the cart hand-off to Shopify checkout, and Checkout UI extensions if you’re on Shopify Plus
- App review: every storefront app kept, integrated or replaced
- Analytics, consent and performance budgets: Shopify analytics and your consent tool wired in, and every release checked against agreed speed limits
- SEO parity: URLs, 301 redirects, sitemaps, metadata and structured data
- Handover documentation – or ongoing ownership through a retainer
ERP, PIM, OMS and 3PL connections behind the storefront are scoped as commerce integrations.
How a headless project runs
Six steps, and the second one can end the project: if a theme does the job, we say so before you pay for a build.
- 1
Architecture review
We read your store, apps, integrations and goals, and benchmark the current theme before assuming headless is the answer.
- 2
Recommendation
Headless, hybrid or theme – in writing, with the reasons. If a theme does the job, we scope that instead.
- 3
Proposal
The build price and timeline, next to the yearly cost of hosting, CMS, upgrades and app integrations.
- 4
Content and data model
CMS structure, metaobjects, the URL plan and the app list are agreed before the first line of code.
- 5
Build in preview
Features ship to preview environments first. You review each one on a preview link before it reaches production.
- 6
Launch and ownership
SEO and performance checks, a launch with a rollback ready, then handover or a monthly retainer.
What headless costs – to build and to keep running
A headless storefront costs more than theme work up front, and it keeps costing more after launch, because you own a frontend that Shopify no longer maintains for you. We scope the build after the architecture review and put the yearly running cost next to it in the proposal, so you decide on the full number.
| Cost line | With a theme | With headless |
|---|---|---|
| Build | Small changes from $500, most single customizations $1,000–$5,000, redesigns and theme rebuilds scoped as projects | Scoped as a project after the architecture review |
| Hosting | Included in your Shopify plan | Oxygen at no extra charge on paid Shopify plans; Vercel, Cloudflare or your own cloud billed by the provider |
| Framework and API upgrades | The theme vendor ships updates; Shopify maintains the platform | Shopify releases a new Storefront API version every quarter and supports each for at least 12 months, so plan at least one upgrade a year; Hydrogen releases follow the same cycle. Bigger shifts happen too: in May 2025 Hydrogen moved from Remix to React Router 7, and every Hydrogen storefront had to migrate to keep receiving updates |
| Content editing | Theme editor, included | A headless CMS subscription, unless your content fits in Shopify metaobjects |
| Storefront apps | Install and configure | Integration work per app – and again when an app changes its API |
| People | Developer time when something changes | Someone who owns the frontend code: your team, a retainer or a dedicated engineer |
Platform facts as of October 2026. Hosting and CMS prices depend on your traffic, seats and plan – we estimate them for your store in the proposal.
After launch, the frontend can stay with us – on a retainer (from $2,500/month for 20 engineering hours, month-to-month with 30 days’ notice) or with a dedicated engineer in your sprints – or move to your own team with our handover documentation.
Weighing headless against your current theme? An engineer can tell you which pays off before you spend on a build.
Already headless? Takeovers, upgrades and the way back
If the team that built your headless storefront has moved on, we can take it over – Hydrogen, Next.js or another React framework – starting with a review of the code, hosting, integrations and deployment.
-
Stabilize
- What you see
- Errors, broken carts or slow releases, and nobody is sure how deployment works.
- What we do
- Review the code and the deployment, fix what is critical first and document how the storefront runs.
-
Upgrade
- What you see
- A Storefront API version near the end of support, or a Hydrogen app still on Remix.
- What we do
- Plan the upgrade, run it in a preview environment and release it with a rollback ready.
-
Rethink
- What you see
- The headless storefront costs more to run than it returns.
- What we do
- Move it to Hydrogen on Oxygen, where hosting costs nothing extra on paid plans, or back to a Shopify theme when that is the right call – with URLs and SEO carried over.
What merchants say about our development work
Quoted word for word from the Shopify Partner Directory. Neither is a headless project – they are the custom builds closest to one: a custom bundle page and a trade-only storefront with gated accounts and member pricing.
-
“Another great project done by OUXP. The new bundle page is amazing! We have many many orders from this page and customers love this.”
True Classic trueclassictees.com (external site) via Shopify Partner Directory (external site) Theme customization About this project
A custom bundle page built on True Classic’s Shopify theme – the kind of app-like feature brands often assume needs headless.
-
“…We have had some complex needs on our site, where other developers have said it could not be done. ‘Outstanding Experience’ has been able to get it done every time.”
Wall Snobs wallsnobs.com (external site) via Shopify Partner Directory (external site) Store build About this project
‘Outstanding Experience’ in the quote is OUXP’s full name. We built Wall Snobs’ trade-only storefront, with gated trade accounts and member-only pricing. Read the Wall Snobs case study
Emergency support
Store down? Checkout broken?
- Store down or showing errors
- Checkout or payment failures
- A theme or app update broke something
- ERP, inventory or fulfillment sync stopped
Commerce engineers, not a help desk. Every request gets a first response within 30–60 minutes during business hours. Retainer clients with the 24/7 emergency add-on are covered around the clock. Not a client yet? Call anyway.
+1 (818) 651-3226 Emergency line 24/7 · Business hours Mon–Fri, 9 AM–9 PM ET
Headless commerce questions
Something else? Ask an engineer – first response within 30–60 minutes during business hours (Mon–Fri, 9 AM–9 PM ET).
Is headless faster than a Shopify theme?
It can be, but architecture alone doesn’t make a store fast. Headless gives you full control over every script a page loads and can render pages at the edge, but a well-built Online Store 2.0 theme still beats a badly built headless site. Most slow Shopify stores are slow because of app scripts, heavy media and legacy theme code, which performance optimization fixes in typically 2–4 weeks. We benchmark your current theme against your requirements before recommending either.
What does a headless storefront cost long-term?
More than a theme. Beyond the build, you own a frontend codebase for good: hosting (at no extra charge on Oxygen, billed separately on Vercel or Cloudflare), a CMS subscription if you use one, integration work for every storefront app and upgrades as the Storefront API releases a new version each quarter. Someone has to own that code – your team, a monthly retainer or a dedicated engineer. OUXP puts the yearly running cost in the proposal next to the build price.
Can we keep Shopify checkout with a headless storefront?
Yes, and we recommend it. A headless storefront builds the cart through the Storefront API and hands the shopper to Shopify’s checkout, which keeps its payment options, conversion work and PCI compliance. Every plan can brand checkout in the checkout editor; apps and Checkout UI extensions on the information, shipping and payment steps need Shopify Plus. Discount, shipping and payment rules built in Shopify Functions apply exactly as they do behind a theme.
Can you take over an existing headless build?
Yes. We start with a review of the code, hosting, integrations and deployment, fix what is critical and document how the storefront runs. From there we keep it running, upgrade it – for example, a Hydrogen app still on Remix that has to move to React Router 7 – or migrate it from another framework to Hydrogen, or back to a Shopify theme when that is the right call.
Do we need Shopify Plus to go headless?
No. Hydrogen and Oxygen hosting are available at no extra charge on paid Shopify plans. Plus matters for what surrounds the storefront: customizing the information, shipping and payment steps of checkout, your own Shopify Functions in a custom app, single sign-on through your own identity provider, expansion stores and B2B at scale – more than 3 catalogs or catalogs assigned to specific companies. As of October 2026, Plus starts at $2,300/month on a three-year term or $2,500/month on a one-year term – see the Shopify Plus pricing guide.
Will our Shopify apps work on a headless storefront?
Apps that work in the Shopify admin – inventory, fulfillment, ERP connectors – carry on as before. Apps that add something to the storefront usually do it through the theme, with app blocks or embedded scripts, and a headless storefront has no theme. Those need the app’s API or headless SDK, a custom integration or a replacement. We sort every app into one of these groups before quoting, because the list can change the business case.
Hydrogen or Next.js – which should we choose?
Hydrogen, if Shopify is your only commerce backend: it is Shopify’s own React framework with cart, analytics, SEO and customer account helpers, and it deploys to Oxygen at no extra hosting cost. Next.js, if your team already runs it, the storefront pulls content from several systems or the store is one part of a larger web application. Both use the same Storefront API, so the choice comes down to your team and your hosting.
Will we lose search rankings by going headless?
Not when SEO parity is part of the build, as it is in every OUXP headless project – though nobody can honestly promise rankings won’t move at all. Pages render on the server so search engines get full HTML, URLs stay the same where possible and every changed URL gets a 301 redirect. Sitemaps, canonical tags, metadata and structured data are rebuilt and checked page by page against the old site before launch; after launch we watch crawl errors and rankings.
Headless or theme? Get the answer in writing
Send the store URL and what your storefront needs to do. An engineer replies within 30–60 minutes during business hours; after the architecture review you get a written recommendation – headless, hybrid or theme – with the yearly running cost next to the build price.