Headless Commerce on Shopify: What You Take On, and When It Pays Off

Headless commerce separates the storefront a shopper sees from the system that holds products, carts, orders and checkout, and connects the two through APIs. On Shopify, Shopify keeps running the backend and the checkout while you build, host and maintain the storefront. The buying decision comes down to which jobs move from Shopify’s side of the ledger to yours, and whether what you get back is worth owning them.

Nearly every source here is Shopify documenting its own product, so read those as vendor statements. Each one is linked in the sentence that uses it. The one independent measurement is HTTP Archive’s field data. We read these pages in September 2026, and Shopify revises its docs often, so recheck the one your decision turns on.

We build Shopify storefronts on both architectures, and this is the ledger we walk a merchant through before either one gets scoped.

HTTP Archive’s 2025 Web Almanac ecommerce chapter (opens in new tab) describes headless or API-first platforms as ones that “provide the commerce backend as a service, while the merchant owns the frontend experience and hosting.” It sorts platform types by control rather than by features: “The important variables are who controls hosting, who controls the runtime and upgrade path, and how much freedom you have to change the frontend and backend.”

That framing works for headless commerce on any platform. On a theme-based Shopify store, Shopify hosts the storefront and renders your Liquid theme, and you control the theme. In a headless commerce build, you control the frontend, the runtime it runs on, and usually some or all of its hosting, while the commerce backend stays with the platform.

Is headless commerce a different platform? No. Headless ecommerce is a way of using a commerce platform, and on Shopify the products, inventory, orders and admin stay exactly where they are.

Shopify documents three ways to build a headless storefront (opens in new tab). Hydrogen is a React Router app with Shopify’s commerce tooling built in. Hydrogen React is Shopify’s component library dropped into a third-party React framework. The Headless channel lets you use any framework you like against the Storefront API alone.

The same page says order attribution works at the channel level and treats a Headless storefront as a channel. Sales from a headless commerce storefront still show up by channel in the Shopify admin. Shopify’s Hydrogen fundamentals page (opens in new tab) calls React Router the open-source framework Hydrogen is built on, and adds that you can self-host Hydrogen if you’d rather not use Shopify’s hosting.

Choosing among these options only comes up once you’ve decided headless commerce is worth doing. If you’re already there, our breakdown of Hydrogen in 2026 covers the migration decision and the test we’d apply to it.

The table below summarizes the rest of this section. Each row is backed by Shopify’s documentation in the subsections that follow.

A headless storefront builds the cart through the Storefront API, then sends the buyer to Shopify for checkout. Shopify’s cart management docs (opens in new tab) tell you to query the Cart object for its checkoutUrl, and state: “The response includes a URL that redirects customers through Shopify’s web checkout.” The same page says to request that URL when the buyer is ready to go to checkout, and to request it again if it’s gone stale.

For Hydrogen, Shopify’s consent guide (opens in new tab) adds a domain requirement: “To make sure your Hydrogen site works correctly, assign a subdomain for your storefront to checkout.” So headless commerce on Shopify doesn’t give you a checkout you build yourself. The storefront is custom and the checkout is still Shopify’s.

Checkout logic works the same way on both architectures. Shopify’s Scripts page (opens in new tab) says Shopify Scripts were deprecated as of June 30, 2026, and any Scripts still published have been deactivated. Checkout customizations now move to Shopify Functions whether your storefront is headless or Liquid.

Shopify’s API limits page (opens in new tab) states: “Requests from real buyers aren’t subject to a fixed request-per-minute limit.” That covers real buyers on the Storefront API and nothing else. Shopify rate-limits automated traffic such as bots and crawlers, and the page adds that “Unsigned, anonymous bots receive the strictest limits.”

Two more conditions on the same page affect a headless ecommerce build. “Shopify limits the amount of checkouts that can be created on the Storefront API per minute.” And “Shopify may temporarily reduce API rate limits to protect platform stability.”

Server-rendered storefronts carry one more requirement. The Storefront API reference (opens in new tab) says: “Without the Shopify-Storefront-Buyer-IP header, Shopify can’t differentiate requests from different buyers, which can result in throttled API requests, limited bot protection, and unauthenticated flows at checkout.” If your server calls the API on the shopper’s behalf, it has to pass along each shopper’s IP. Otherwise Shopify has no way to tell those buyers apart.

Can you load test a headless commerce storefront? Yes, but Shopify’s Hydrogen production checklist (opens in new tab) warns that its anti-bot system may treat your load test as bot traffic and throttle it. It says: “Ensure that you allocate three to five weeks for load testing in your rollout plans so that each party has sufficient preparation time.” That lead time belongs in the launch schedule before anyone commits to a date.

Logged-in shopping needs extra wiring. Shopify’s Customer Account API getting-started page (opens in new tab) says the API requires Shopify’s customer accounts and the Headless or Hydrogen sales channel, and that your client has to implement the OAuth 2.0 authorization spec. It also rules out localhost and any http-based URL. The API limits page (opens in new tab) lists the Customer Account API at 100 query-cost points per second as standard, 200 on Advanced and Plus, and 400 for enterprise Commerce Components.

Checkout login is also your job. Shopify’s checkout authentication docs (opens in new tab) document two ways to carry a buyer’s headless login into checkout: a customer access token set on the cart, or the buyer’s session on the Customer Accounts domain. With the token method, the buyer might need to log in separately to see customer account pages such as order history. With the session method, checkout treats the buyer as a guest once that session has expired, even if the cart carries a valid token.

For international selling, the market data still comes from Shopify. The international pricing guide (opens in new tab) says the @inContext directive takes a country code and automatically filters out products that aren’t published for that country. Leave the directive out and you get the products published for the primary market, priced in the shop’s currency. The same guide says each country’s currency has to be enabled manually in payment settings, and queries for countries that aren’t enabled fall back to the store currency.

Market-specific content is different. Shopify’s help page on online store market customizations (opens in new tab) says per-market theme customizations are applied to your published theme through the theme editor, and require the Advanced plan or higher. In a headless commerce build, any per-market content beyond prices, publishing and languages is something you build.

Shopify’s theme app extensions documentation (opens in new tab) describes app blocks as something merchants add to Online Store 2.0 themes, and states: “Theme app extensions automatically expose your app in the theme editor.” That page doesn’t mention headless or custom storefronts, and it doesn’t say app blocks fail on them either. It only documents them as a theme feature, so any app that delivers its storefront UI through app blocks needs its own plan on a headless build. Shopify’s headless overview (opens in new tab) points to a separate category: “Extend your custom storefront with apps built for headless commerce.”

Editing works the same way. The theme editor help page (opens in new tab) describes customizing your online store’s content, layout, typography and colors through a theme’s sections and settings, with no code. For Oxygen, Shopify’s deployments docs (opens in new tab) describe preview as a unique URL for every deployment, with shareable links on the Basic plan and above. So on a headless storefront, what your merchandisers can edit without a developer depends on what the build gives them, which is often a CMS.

Pixels follow the same pattern. Shopify’s pixels overview (opens in new tab) states: “Pixels automatically load on the Storefront, Checkout, Thank you page, and Order status page.” The developer pixel docs (opens in new tab) describe pixels as code that runs on the online store, and neither page mentions headless storefronts. On Hydrogen, Shopify’s tracking guide (opens in new tab) documents sending events to third-party analytics services through the Analytics provider, so before a build, confirm with each marketing vendor whether its tracking can be wired that way.

Shopify’s Hydrogen analytics docs (opens in new tab) describe recommended patterns that send storefront metrics to the Shopify admin, and its analytics tracking guide (opens in new tab) says Hydrogen includes analytics by default as of version 2024.4.3. The same tracking guide warns: “If you haven’t configured consent through the Customer Privacy API, then analytics events won’t fire and no data is tracked.” The consent guide (opens in new tab) puts consent-law compliance for everything your Hydrogen site sends on you, and notes that the cookie banner won’t work on default Oxygen URLs.

Commerce events are wired route by route. Shopify’s tracking guide, written for stores upgrading from Hydrogen versions older than 2024.4.3, has you add view components such as Analytics.ProductView to product, collection, search and cart routes, and says each one sends its event when the route loads. Any route your team adds needs the same wiring, so the analytics check belongs in launch QA, not the first monthly report.

The Hydrogen production checklist (opens in new tab) lists launch work a theme store doesn’t do. If Meta and Google apps supply your advertising product feeds, those catalogs have to be updated to the new storefront’s domain. If your store has active orders at launch, their order status pages need redirects so customers don’t hit 404s. It also tells you to set up monitoring and an incident response process, and to plan for slowdowns or outages in upstream services, including a CMS.

Hosting on Oxygen comes with limits of its own. The fundamentals page (opens in new tab) caps workers at 10 MB, 30 seconds of CPU time per request and 128 MB of memory, requires startup within 400 milliseconds, and says Oxygen doesn’t support proxies in front of your deployments because proxies can conflict with its bot mitigation. The deployments page (opens in new tab) says runtime logs are available for up to one month. The checklist says Plus stores can set up log drains and trace exports to their own monitoring provider.

SEO moves to the build too. Shopify’s Hydrogen SEO guide (opens in new tab) says that on Oxygen your robots.txt file is only served in the public production environment, and only once a custom domain is set. The rest of the SEO work, and why a headless storefront doesn’t get a ranking advantage from being headless, is covered in our Hydrogen breakdown.

HTTP Archive’s Core Web Vitals Technology Report (opens in new tab) combines Chrome UX Report field data with technology detection. In its August 2026 crawl, 76.5% of Shopify origins (339,448 of 443,647) had good Core Web Vitals on mobile, against 51.3% of detected Hydrogen origins (734 of 1,430). On desktop, the rates were 79.4% for Shopify and 64.4% for Hydrogen. HTTP Archive’s technology page (opens in new tab) defines the metric as the percentage of origins passing all three Core Web Vitals, LCP, INP and CLS, with a good experience.

The individual metrics point the same way. In the same mobile data, 87.3% of Shopify origins had good LCP against 69.0% of Hydrogen origins. Time to First Byte isn’t a Core Web Vital, but it’s where the two groups differ most: 81.9% of Shopify origins had good mobile TTFB, compared with 19.8% of detected Hydrogen origins (278 of 1,407).

These figures compare groups of sites, not one store before and after a change. Stores that commission Hydrogen builds likely differ from the wider Shopify population in catalog size, page complexity and traffic, so the data can’t predict what moving your store would do to its scores. The Web Almanac (opens in new tab) also notes that “Headless implementations reduce platform detectability because the traditional fingerprints in HTML/JS often disappear,” so HTTP Archive only counts the Hydrogen sites it can detect. The data covers Chrome users on origins with enough traffic to appear in CrUX, and it measures speed and stability, not conversion.

Two more checks on the full HTTP Archive series (opens in new tab) help read the gap. Hydrogen’s mobile pass rate rose from 43.7% (409 of 936 origins) in August 2025 to 51.3% in August 2026, while Shopify’s stayed between 76.2% and 79.5%. Our own arithmetic on overlap: even if every Hydrogen origin were also counted in the Shopify group, removing them would move Shopify’s mobile rate from 76.5% to 76.6%, so double-counting doesn’t explain the gap.

Taken together, the population data doesn’t show headless storefronts as faster. Any performance case for headless commerce has to be made for your build, against your current theme’s field data.

Shopify rolls some performance work out across theme storefronts without merchants changing anything. Its performance team’s post on moderate speculation rules (opens in new tab) reports switching Liquid storefronts from conservative to moderate speculation, and states: “This change is live on all Liquid storefronts.” Measured against navigations already speculated under the conservative setting, Shopify reports desktop median gains of 285ms in TTFB, 224ms in FCP and 228ms in LCP, and says the benefit only applies in Chromium-based browsers for now.

Shopify’s web performance help page (opens in new tab) lists more defaults for theme stores: a Cloudflare CDN, one-year browser caching for cacheable resources, and automatic CSS and JavaScript minification. It names your theme, your installed apps and any third-party code you’ve added as the biggest factors in how fast your store loads. All three can be fixed without leaving Liquid.

That’s the path to try before a rebuild. Our Shopify speed optimization guide covers the LCP, INP and CLS fixes, and our Shopify Core Web Vitals optimization service is where we do that work on a live theme.

The documented benefit is control over the frontend. Shopify’s headless overview (opens in new tab) says you can use any framework, tooling or hosting. The build options page (opens in new tab) says you can build a custom channel alongside your online store, such as a mobile app, or a custom website that replaces it.

The speed claims come from vendors. Shopify’s headless overview describes Hydrogen as shipping with “performance that’s fast by default,” and no measurement is published with that claim. The independent field data above doesn’t back it at the population level.

Does headless commerce increase conversion rates? We found no methodologically documented study showing that headless storefronts convert better than theme-based ones. Every uplift figure we traced came back to companies selling headless platforms, frontends or content systems, citing single-brand case studies or each other. We’re not quoting any of those numbers.

Shopify, which sells headless tooling, says on its enterprise blog: “If your business is prospering with a traditional architecture, it may not be worth the financial and time resources to invest in headless.”

Shopify publishes the hosting terms. The Hydrogen fundamentals page (opens in new tab) says Oxygen comes at no extra charge on paid plans, from Starter through Plus, including Pause and build, and states: “Oxygen isn’t available on Agentic plans.” Shopify’s environments docs (opens in new tab) allow one public environment on Starter, Basic, Grow and Advanced, and 25 on Shopify Plus. Development stores and trial plans get no public environments, though Oxygen itself is available on them for building and testing.

As of September 2026, Shopify’s pricing page (opens in new tab) lists Plus as starting at $2,300 USD a month, and shows the same 1-versus-25 split for headless storefronts. Vendor pricing changes, so check the page before budgeting. None of the pages we read publish a usage-based price for Oxygen bandwidth or requests, or a fee for Storefront API calls. That’s an absence of published pricing, not a promise that usage is unlimited.

Build costs aren’t published. Shopify’s enterprise blog says an enterprise headless project “could cost anywhere from hundreds of thousands to millions upfront, plus annual maintenance costs, depending on the functionality, supporting tools, and level of customization.” That’s Shopify describing enterprise projects, with no method behind it. No primary source we found publishes typical build costs, timelines, team sizes or maintenance costs for a headless Shopify storefront.

You can build a cost list from the ledger instead. It includes three to five weeks of load-test coordination, monitoring and incident response, analytics and consent setup, an editing tool for merchandisers, a plan for each storefront app, and hosting if you self-host Hydrogen (opens in new tab) instead of using Oxygen. Put a price on each line before comparing quotes.

Headless commerce pays off when the storefront you need is one your theme can’t deliver, and you have the people to own everything in the right-hand column after launch. The test for the first half is in our Hydrogen breakdown. The second half comes from the ledger. Before scoping a headless Shopify build, you should be able to answer yes to each of these:

If any answer is no, fix that first or stay on Liquid. For most stores we’d start with the theme: clear the speed problems, measure the result, and only revisit headless if a concrete limit is still in the way.

Want a second read before you commit a budget? Our free Growth Audit is a no-obligation look at why your store isn’t getting found or converting, with a roadmap for fixing it, whichever architecture that roadmap lands on. Not a sales call. Not a quote request.

You built something worth finding. We make sure it gets found.