Headless Shopify Development with Hydrogen

Headless Shopify separates the storefront from Shopify's theme system. Shopify still runs the catalogue, inventory, checkout and orders, while a separate front end, for example a Next.js or React Router app using Hydrogen, renders the pages and reads data through the Storefront API. It gives full control over the front end, at the cost of running a codebase of your own.

Headless is worth it when the storefront needs content and interactions a theme cannot handle well, when several front ends share one catalogue, or when you have engineers to own the code. A theme is better when the store mainly needs speed, conversion work and easy merchandising. Many brands that ask for headless are better served by a faster theme.

Hydrogen is Shopify's headless toolkit. Since the 2026-10 release on 14 October 2026 it is framework-agnostic: it adds Shopify commerce, such as the cart, variant selection, collection filtering and analytics, to frameworks that render on the server, including Next.js, React Router, Nuxt, Astro and SvelteKit. It covers the Storefront API and the Customer Account API.

Shopify provides two starting templates: React Router 7 deployed to Shopify Oxygen, and Vercel Shop, a Next.js 16 template deployed to Vercel. Oxygen keeps hosting inside Shopify; Next.js on Vercel suits teams that already build in Next.js or run other sites there. We recommend one after the architecture stage, based on your team and existing stack.

No. Customers still check out on Shopify's checkout, so payment processing, fraud checks and checkout updates stay with Shopify. You customise checkout the same way as on any Shopify store, through checkout UI extensions and Shopify Functions, some of which require Shopify Plus.

We build on frameworks that render pages on the server, so search engines receive complete HTML. We keep or redirect existing URLs, output canonical tags, sitemaps and structured data from the new front end, and check Core Web Vitals before launch. Most SEO problems on headless builds come from missing redirects and client-only rendering, and we design both out.

Hydrogen works with any CMS that has an API. Sanity, Contentful and Storyblok are common choices, and Shopify metaobjects can hold simpler content without a separate CMS. We pick based on who edits the content and how much structure it needs.

Yes. Since the 2026-10 release, Hydrogen is designed to add Shopify commerce to a stack you already run, not only to start new projects. Your framework keeps routing, rendering and UI; Hydrogen supplies the cart, variant selection, collection filtering and analytics against Shopify's APIs.

Not automatically. A well-built headless storefront can be very fast, but so can a well-built theme, and a poorly built headless site can be slower than both. If speed is the main reason for going headless, a speed audit of the current theme is usually the cheaper first step.

Yes. BigCommerce's reference headless storefront is Catalyst, built on Next.js. If you are choosing between platforms as well as front ends, we compare Hydrogen on Shopify with Catalyst on BigCommerce against your catalogue, integrations and team.

As a fixed scope, quoted in writing after the architecture stage. The quote depends on the number of page templates, the CMS, the integrations and whether you also need a design. We include ongoing hosting and maintenance costs in the proposal so you see the full cost of running headless, not only the build.