Headless Shopify on Storefront API
Shopify as the commerce engine, Next.js or Hydrogen as the experience.
· Reviewed by senior engineers
01 What it is
What this service is
Headless Shopify is the architecture where Shopify continues to own the commerce engine — products, inventory, orders, customers, checkout — but the storefront itself runs on a separate codebase, typically Hydrogen (Shopify's Remix-based framework) or Next.js, communicating via the Storefront API and Customer Account API. You get Shopify's reliability and ecosystem with the performance, design freedom, and editorial flexibility of a custom-built frontend.
It is a significant step up in complexity from a Liquid theme. You are running real application infrastructure: a CDN, edge functions, a build pipeline, content sources beyond Shopify (often a headless CMS like Sanity or Hygraph for marketing pages), and your own observability stack. In return you get faster pages, richer interactions, the ability to share a frontend across multiple Shopify stores, and freedom from Liquid's constraints.
The checkout itself usually stays on Shopify-hosted infrastructure for PCI and conversion reasons, with Checkout Extensibility powering any customisation. You can run a fully headless checkout in some cases — we have done it — but the trade-offs rarely favour it for most brands.
02 What it's for
What it's for
Headless Shopify is the right architecture for brands where the storefront is part of the brand and templated themes will not cut it. A premium fashion label whose content team ships editorial features weekly and needs CMS-driven storytelling alongside the product feed; a consumer electronics brand running aggressive PDP experiments and personalisation; a global beauty brand where each region has localised content, imagery, and product narratives but the catalogue stays in one Shopify Plus account.
It is also the right call when performance is a hard business metric. Hydrogen on Oxygen and Next.js on Vercel routinely outperform Liquid themes on Core Web Vitals by a wide margin, and for SEO-sensitive verticals (publishers, complex catalogues, content commerce) that gap shows up in organic revenue.
It is the wrong call when your team is small and your roadmap does not justify the operational overhead. We will tell you when sticking with a well-optimised Plus theme is the right answer for two more years and a headless migration becomes the right next step once revenue and team size justify it.
03 How to use it
How to engage devinsta
We start with a fit assessment — current performance, team shape, roadmap, content needs. If headless is the right call, we run a four-to-six-week foundation sprint: framework choice, hosting decision, CMS integration, design-system kit-out, and the first product detail page and listing template shipped end-to-end. This proves the architecture before we commit to a full migration.
From there we build out templates in priority order: PDP, PLP, search, cart, account, then marketing pages. Migration is done route by route via edge rewrites on Vercel or Cloudflare, with traffic shifting incrementally. The legacy theme stays live as a fallback until each route is proven and converting at or above baseline.
Post-launch we run a structured optimisation programme — A/B tests through LaunchDarkly or VWO, weekly performance reviews, and quarterly architecture reviews as Shopify ships new APIs (the Storefront API and Customer Account API both move quickly).
04 How to deploy
How we deploy it
Hydrogen storefronts deploy on Shopify Oxygen by default — a Cloudflare-Workers-based platform tightly integrated with Shopify's edge network. Next.js storefronts deploy on Vercel with edge runtime for product and category routes, and ISR for marketing pages. For brands that want to own the infrastructure end-to-end we deploy on Cloudflare Pages with Workers for personalisation logic.
We use the Storefront API for catalogue and cart, the Customer Account API for the new account experience, and the Admin API for back-office integrations. Search runs on Shopify Search & Discovery for smaller catalogues and Algolia or Typesense for larger ones. Product data is cached at the edge with on-demand revalidation hooks from Shopify webhooks, so a product update propagates globally within seconds.
For checkout we keep customers on Shopify-hosted checkout for PCI scope and conversion. Checkout Extensibility provides post-purchase upsell, custom shipping and payment options, and brand-customised checkout UI. We instrument the full funnel from PDP through to thank-you page with consistent event names in GA4, Mixpanel, or Snowplow, with consent-mode signalling for GDPR and CCPA compliance. Image delivery uses Shopify's image CDN with automatic format negotiation; video uses Mux or Cloudflare Stream depending on the catalogue.
05 What we provide
What you get from us
- Architecture decision document covering Hydrogen vs Next.js, hosting, and CMS
- Headless storefront on Hydrogen/Oxygen or Next.js/Vercel with edge rendering
- CMS integration with Sanity, Storyblok, Contentful, or Hygraph for content pages
- Search and discovery via Shopify, Algolia, or Typesense with merchandising rules
- Checkout Extensibility build with post-purchase upsell and custom UI
- Migration plan with edge routing, route-by-route traffic shift, and SEO redirect map
- Performance baseline at sub-1.5-second LCP and Lighthouse 95+ on mobile
- A/B testing infrastructure, analytics instrumentation, and a documented event taxonomy
FAQ
Common questions
Hydrogen or Next.js — which should we pick?
Hydrogen is purpose-built for Shopify and ships with Oxygen hosting, server-rendered cart, and tight platform integration. Next.js has a much larger ecosystem and is the safer bet if your team already knows it. We help you pick based on team skills, content architecture, and how integrated the rest of your stack is with Shopify.
Do we lose Shopify apps when going headless?
Apps that inject Liquid into themes — review widgets, popups, badge apps — generally need replacing with headless equivalents or rebuilt as components consuming the same data. Backend apps (subscription, ERP sync, OMS) keep working because they integrate via Admin API, not theme. We audit your app stack as part of the discovery and flag what needs replacing.
Will SEO suffer during the migration?
Not if you do it properly. We preserve URL structures where we can, build a complete 301 redirect map for anything that has to change, maintain structured data, and validate the full crawl path in staging before flipping any traffic. Most brands see SEO improve post-migration thanks to better Core Web Vitals.
How do you handle internationalisation?
Shopify Markets handles the commerce side — currency, tax, payment availability, language. The frontend integrates via the Storefront API to render the right market context. We layer in CMS-driven localisation for editorial content, structure URLs as /en-gb, /de-de, /es-mx and so on, and generate hreflang automatically across the site.