What is headless Shopify development?
Headless Shopify development is building your own storefront that talks to Shopify through its APIs instead of using a Liquid theme. Shopify keeps doing the hard commerce work; your developers control every pixel the shopper sees.
On a normal store, the theme and the commerce engine are one package. You pick a theme, install apps that inject code into it, and edit sections in the theme editor. On a headless store, the theme is switched off for shoppers. A separate application, usually written in React, asks Shopify for product data, builds the pages, manages the cart and hands the shopper to Shopify’s checkout when they pay.
That split is what people mean by “decoupled”. The storefront can live on Shopify’s Oxygen hosting or anywhere else. It can pull editorial content from a CMS, reviews from a review service and stock from Shopify, then combine them on one page. And the same Shopify back office can feed a mobile app, a kiosk or a wholesale portal through the same APIs.
What does not change is just as important. Orders, customers, discounts, taxes, shipping rates and payouts stay in Shopify admin. Your team keeps fulfilling orders exactly as before. Headless Shopify development changes the shop window, not the warehouse.
Is headless Shopify worth it for your brand?
It is worth it when the theme is costing you sales or blocking growth you can name, and when you can afford developers after launch. It is not worth it just because a competitor did it or because “headless” sounds modern.
We use a blunt test on the first call. Write down the three things you want the new storefront to do that your theme cannot. If the list says “faster”, “prettier” and “better SEO”, a theme audit is the cheaper first step, because all three are often fixable inside Liquid. If it says “show the same content on our app and site”, “build an interactive fabric configurator” or “run a content-led store where every guide is also a product page”, headless starts to earn its cost.
- Go headless when design, content or multi-channel needs outgrow sections and blocks.
- Go headless when a mobile app and the website should share one storefront layer.
- Go headless when you already employ or retain React developers.
- Stay on a theme when your store depends on many theme-only apps you cannot replace.
- Stay on a theme when nobody will own the code after launch.
- Stay on a theme when slow speed traces back to apps and images, not the theme itself.
If you land in the middle, a hybrid is possible: keep the theme for the shop and build a headless content hub or campaign microsite beside it. That keeps risk small while you learn.
How the Storefront API powers headless Shopify development
The Storefront API is the doorway every headless Shopify storefront uses to read products and collections and to create carts. Shopify’s documentation states that it is available only in GraphQL, with no REST version for storefronts.
GraphQL lets the storefront ask for exactly the fields a page needs. A collection grid might request title, handle, one image, price range and availability for 24 products, while a product page asks for every variant, media item and metafield. Smaller responses mean faster pages, especially on mid-range Android phones on mobile data.
Two details from Shopify’s documentation matter for planning. First, the Storefront API scales with buyer traffic, and requests from real buyers are not held to a fixed requests-per-minute limit, which removes a common worry about sale-day spikes. Second, it is versioned, and your code names the version it uses, so upgrades are a deliberate task rather than a surprise. We note the version in the runbook and schedule upgrades inside your care plan.
Carts are created and updated through the API too. When the shopper is ready to pay, the cart supplies a checkout URL, and Shopify’s own checkout takes over, with your configured payment methods, taxes and shipping rules.
Shopify Hydrogen and Oxygen, explained in plain words
Hydrogen is Shopify’s own framework for headless storefronts, and Oxygen is Shopify’s hosting for it. Together they are the path of least resistance for headless Shopify development.
Shopify’s documentation describes Hydrogen projects as React Router apps preconfigured with Shopify-specific features. In practice that means ready-made pieces for cart handling, product media, SEO tags, analytics and caching, all wired to the Storefront API. Pages render on the server by default, so the shopper and the crawler both receive real HTML rather than an empty shell.
Oxygen is described by Shopify as a global deployment platform for Hydrogen storefronts at the edge, running on a worker-based JavaScript runtime built on Cloudflare’s open-source workerd. Shopify states that Oxygen is available at no extra charge on paid Shopify plans. Deployments come from your GitHub repository, every branch can get a preview URL, and rolling back a bad release is a click.
The catch is focus. Hydrogen is built for commerce storefronts. If your project is mostly a large marketing site with a small shop attached, or your team already runs everything on another platform, Next.js may fit better. We explain both routes in the next section.
Hydrogen vs Next.js for headless Shopify: which should you choose?
Choose Hydrogen when the storefront is the product and you want Shopify-maintained building blocks and hosting. Choose Next.js when the shop is one part of a wider web platform, or when your developers and hosting already live in the Next.js world.
Where Hydrogen wins
Shopify-specific components and hooks save weeks on cart, variant selection and analytics. Oxygen hosting is included with paid plans, so there is one less vendor bill. Shopify’s own templates track new Storefront API features quickly. For a brand whose whole website is the shop, this is usually the lower-risk route.
Where Next.js wins
Next.js has a very large ecosystem and many developers who know it, which helps when you hire later. It suits sites mixing commerce with a big content section, logged-in dashboards or other data sources. You choose the host, often Vercel, and pay that host directly. Our Next.js developer page covers that side in more depth.
Where neither matters much
Both render on the server, both can cache aggressively, and both reach good Core Web Vitals when built with care. Speed differences between them come far more from image handling, third-party scripts and data fetching than from the framework name.
Our default for a pure D2C store is Hydrogen on Oxygen. We switch to Next.js when there is a clear reason, and we write that reason into the proposal so you can challenge it.
Pairing a CMS such as Sanity with headless Shopify
Shopify stores products well but is a basic editor for long-form content; pairing it with a headless CMS like Sanity gives marketing teams a proper place to build lookbooks, guides and campaign pages that reference live products.
Sanity offers an official Shopify app, Sanity Connect, which its App Store listing says syncs product, collection and variant data from Shopify into Sanity so editors can enrich it. Editors then drag real products into a story, and the storefront shows current price and stock from Shopify while the words and images come from Sanity.
You do not always need a separate CMS. Shopify metaobjects and metafields handle structured content such as size guides, ingredient lists, store locations or FAQ blocks without another subscription. Our rule: if one or two people edit a handful of content types, stay inside Shopify; if a content team publishes weekly campaigns with layouts, add Sanity. The broader choice between CMS platforms is covered in our headless CMS development guide.
Whichever route you take, content types are modelled with SEO fields, preview links and clear help text, so editors can see a draft on the real storefront before it goes live.
What happens to checkout, apps and customer accounts when you go headless?
Checkout stays on Shopify, most theme apps stop working as-is, and customer accounts move to Shopify’s account APIs. These three changes decide more of the budget than the page designs do.
Checkout. A headless storefront hands the cart to Shopify’s hosted checkout, so payments, taxes, shipping and order creation behave as they did on the theme. That is good news for risk. Checkout branding and extensions are configured in Shopify, and deeper checkout customisation depends on your plan, which we cover on the Shopify Plus developer page.
Apps. Theme apps that work by injecting scripts or app blocks into Liquid do not appear on a headless storefront. Apps that expose an API (reviews, subscriptions, loyalty, search) can be connected, usually with a custom component. Back-office apps for fulfilment, accounting or inventory keep working untouched, because they never depended on the theme.
Accounts. Login, order history and addresses are rebuilt against Shopify’s customer account APIs, or you can link shoppers to Shopify’s hosted account pages to save budget.
- List every installed app and mark it: back office, API-ready, or theme-only.
- Price a custom replacement for each theme-only app you must keep.
- Confirm which tracking tags move to Shopify’s pixel settings and which live in the storefront.
Does headless Shopify development improve speed and SEO?
It can, because a server-rendered storefront ships only the code each page needs, but it does not happen automatically. A headless site loaded with heavy scripts is as slow as a bloated theme.
The gains come from control. You decide which JavaScript loads on a product page, you stream above-the-fold content first, and you cache collection pages at the edge. Google’s web.dev guidance sets “good” Core Web Vitals at Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less and Cumulative Layout Shift of 0.1 or less, measured at the 75th percentile of page loads. We agree a budget against those numbers for each page type before building.
For SEO, server rendering means crawlers read full product details, prices and structured data in the first HTML response. We rebuild Product, Offer, BreadcrumbList and Organization schema in the templates, generate XML sitemaps from the catalogue, and keep canonical tags consistent across variant URLs.
The honest caveat: if your current theme already passes Core Web Vitals, a headless rebuild will not transform your rankings. Content, links and product-page quality still carry most of the weight. Our Shopify SEO page covers those levers, and nobody can guarantee rankings either way.
Moving from a Shopify theme to headless without losing rankings
Keep the same URLs wherever you can, redirect every one you cannot, and launch with sitemaps, canonicals and schema already in place. Most ranking drops after a headless launch come from skipped redirects, not from the framework.
Shopify themes use predictable paths such as /products/handle, /collections/handle, /pages/handle and /blogs/news/handle. A headless storefront can mirror those exactly, and for most brands it should, because changing them buys nothing. If you do restructure, we export every indexed URL from Google Search Console and the old sitemap, map each to its new home and test the redirects on staging.
- Crawl the live theme and export its URL list, titles and meta descriptions.
- Match every product, collection, page and blog URL on the new storefront.
- Carry over titles, descriptions and image alt text from Shopify fields.
- Rebuild structured data and check it with Google’s Rich Results Test.
- Submit the new sitemap in Search Console on launch day.
- Watch coverage and click reports daily for the first four weeks.
We also keep the old theme unpublished but intact for a few weeks, so a rollback is possible if something unexpected shows up in Search Console.
How much does headless Shopify development cost in India?
With BtechWaleTech, a headless Shopify storefront starts at ₹50,000 (US$750), and storefronts with custom accounts, B2B pricing or configurators start at ₹60,000 (US$900). The final figure depends on page templates, app replacements, CMS pairing and migration work.
Quotes from other developers vary widely, and the gap usually comes from scope rather than skill. One quote may assume Shopify’s hosted account pages; another rebuilds accounts from scratch. One may skip app replacements and add them later as change requests. Ask every bidder to split the price into design, storefront templates, cart and search, app replacements, CMS, migration and handover.
Our quote lists each template (home, collection, product, cart, search, content, account) and each integration as its own line, with the assumptions written beside it. Nothing is billed before you approve the itemised quote in writing, and payments follow milestones by UPI or bank transfer in India, or Wise, bank wire or PayPal from abroad.
Headless Shopify total cost of ownership vs a theme
Over three years a headless storefront almost always costs more than a theme, because every visual change is developer work and you run more services. It pays off only when the extra revenue or saved effort outweighs that.
Think in four buckets. Platform: your Shopify plan fee is the same either way. Hosting: Oxygen is included with paid plans for Hydrogen; a Next.js storefront adds a hosting bill that grows with traffic. Content tools: metaobjects cost nothing extra; Sanity has a free tier and paid plans by usage. People: theme stores can go months without a developer; headless stores need one on call for framework updates, API version upgrades and new landing pages.
On the other side of the ledger sit the reasons you went headless: conversion from a faster, more tailored storefront, fewer hours spent fighting theme limits, and one storefront layer shared with an app. We ask brands to estimate those in their own numbers before committing. If the estimate is vague, the theme is usually the better investment for now.
After our two free months, care plans start at ₹8,000/mo (US$120/mo) a month and cover dependency updates, API version bumps and small template changes.
Headless Shopify development process and timeline
A headless storefront for a mid-size catalogue usually takes six to ten weeks from signed scope to launch; adding Sanity, custom accounts or a large redirect map moves it toward the upper end.
Weeks one and two cover the assessment, app audit, component list and design sign-off. Weeks three to six build templates on a preview deployment you can open on your phone at any time. Weeks seven and eight connect the CMS and API-based apps, load real content and run speed and SEO checks. The final stretch is user testing, redirects, launch and editor training.
You get short written updates on WhatsApp and a preview link that always shows the latest build, so there are no surprise reveals at the end. Scope changes are written down and priced before anyone codes them.
Who owns the headless storefront code, hosting and Shopify store?
You own everything: the Shopify store, the GitHub repository, the Oxygen or Vercel project, the CMS project and the domain. We work as collaborators on your accounts and you can remove us at any time.
Ownership is more layered on a headless store than on a theme store, so we document it. The handover runbook lists every service, which account it sits under, who pays for it, how to deploy, how to roll back and how to rotate API tokens. Storefront API tokens and environment variables live in your hosting settings, not in our laptops.
Because the storefront is standard React code, any competent React developer can pick it up. That portability is one of the quieter benefits of headless Shopify development done properly: you are not tied to a theme vendor or to us.
Headless Shopify risks and red flags before you sign
The biggest risks are paying for headless when a theme fix would do, discovering critical apps do not work after launch, and being left with code nobody on your side can maintain. Each one is avoidable with questions asked early.
- No app audit in the proposal: expect expensive surprises mid-build.
- A developer who never mentions staying on the theme as an option.
- Storefront pages that fetch product data only in the browser.
- Hosting, GitHub or CMS accounts created under the developer’s name.
- No redirect map or Search Console plan for launch.
- No agreed speed budget, so “fast” is never measured.
- No runbook, leaving deploys and rollbacks as tribal knowledge.
Our own limits, stated plainly: we work remotely, we do not run on-site workshops, and a three-person team is not the right fit for a programme needing a dozen developers at once.
Headless Shopify development for Indian D2C brands
For Indian brands, headless is mainly about mobile speed on mid-range Android phones, content in more than one language and one storefront layer shared with a shopping app. Payments stay in Shopify’s checkout, so UPI, cards and cash on delivery work through whatever providers you already configured there.
Most Indian D2C traffic arrives on phones through Instagram and WhatsApp links. A server-rendered storefront that sends a lean first page helps those visitors on patchy 4G. We test on a mid-range Android handset, not only on a laptop. Hindi or regional-language storefronts are possible with Shopify Markets and translated content; you supply or approve the translations.
Brands we hear from include apparel labels in Jaipur and Surat, knitwear makers in Tiruppur and Ludhiana, beauty and wellness start-ups in Mumbai and Delhi, spice and coffee sellers in Kochi and home-decor exporters in Moradabad. GST invoices are raised where applicable, and our work is billed in rupees by UPI or bank transfer.
Headless Shopify readiness checklist
Tick these before you commit budget. If more than two are unticked, fix those first or stay on the theme for another season.
- You can name revenue or effort the theme is costing you.
- A developer or care plan is budgeted for after launch.
- Every installed app is classed as back office, API-ready or theme-only.
- You know whether editors will use metaobjects or a CMS such as Sanity.
- Current Core Web Vitals are measured, so improvement can be proven.
- The full indexed URL list is exported from Search Console.
- All accounts (Shopify, GitHub, hosting, CMS) are in your company’s name.
- Tracking and consent needs are listed for the new storefront.
- Someone on your side will test on real phones before launch.
Worked example: a block-print apparel brand weighing headless (hypothetical)
Say a Jaipur block-print apparel brand sells around 600 products on a premium Shopify theme. It wants lookbooks that mix editorial photography with shoppable products, a Hindi version for domestic buyers, and a shopping app next year. Its theme editor cannot produce the lookbook layouts, and three page-builder apps have slowed the product pages.
Our assessment would first test whether removing the page builders fixes speed; suppose it helps but lookbooks and the app plan remain. That tips it toward headless. We would propose Hydrogen on Oxygen, Sanity for lookbooks with products synced through Sanity Connect, the same /products/ and /collections/ URLs, and reviews connected through the review app’s API. Customer accounts would link to Shopify’s hosted pages in phase one to save budget.
On our starting prices, the storefront begins at ₹50,000 and the later app at ₹40,000; the real quote would follow the template and app audit. This is an illustration of how we reason, not a past client or a promised result.