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.

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

A headless or API-first platform provides the commerce backend as a service (opens in new tab), while the merchant owns the frontend experience and hosting. Platform types differ by control rather than by features: 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.

There are three ways to build a headless storefront (opens in new tab) on Shopify. 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.

Order attribution works at the channel level, and Shopify treats a Headless storefront as a channel. Sales from a headless commerce storefront still show up by channel in the Shopify admin. Hydrogen is built on React Router, an open-source framework (opens in new tab), and 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.

A headless storefront builds the cart through the Storefront API, then sends the buyer to Shopify for checkout. You query the Cart object (opens in new tab) for its checkoutUrl, and the response includes a URL that redirects customers through Shopify’s web checkout. Request that URL when the buyer is ready to go to checkout, and request it again if it’s gone stale.

Hydrogen adds a domain requirement: to make sure your Hydrogen site works correctly, assign a subdomain for your storefront to checkout (opens in new tab). 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 Scripts were deprecated (opens in new tab) on 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.

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

Two more conditions affect a headless ecommerce build: Shopify limits the number of checkouts that can be created on the Storefront API per minute, and it may temporarily reduce API rate limits to protect platform stability.

Server-rendered storefronts carry one more requirement. Without the Shopify-Storefront-Buyer-IP header (opens in new tab), 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.

Can you load test a headless commerce storefront? Yes, but Shopify’s anti-bot system may treat your load test as bot traffic and throttle it (opens in new tab). 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. The Customer Account API (opens in new tab) requires Shopify’s customer accounts and the Headless or Hydrogen sales channel, and your client has to implement the OAuth 2.0 authorization spec. It also rules out localhost and any http-based URL. The Customer Account API is limited to 100 query-cost points per second (opens in new tab) as standard, 200 on Advanced and Plus, and 400 for enterprise Commerce Components.

Checkout login is also your job. There are two ways to carry a buyer’s headless login into checkout (opens in new tab): 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 @inContext directive takes a country code (opens in new tab) 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. 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. Per-market theme customizations (opens in new tab) 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.

App blocks (opens in new tab) are something merchants add to Online Store 2.0 themes, and theme app extensions automatically expose an app in the theme editor. They’re a theme feature, so any app that delivers its storefront UI through app blocks needs its own plan on a headless build. A custom storefront is extended with a separate category: apps built for headless commerce (opens in new tab).

Editing works the same way. The theme editor (opens in new tab) lets you customize your online store’s content, layout, typography and colors through a theme’s sections and settings, with no code. On Oxygen, preview is a unique URL for every deployment (opens in new tab), 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. Pixels are code that runs on the online store (opens in new tab), and they load automatically (opens in new tab) on the storefront, checkout, Thank you page and Order status page. On Hydrogen, you send events to third-party analytics services (opens in new tab) through the Analytics provider, so before a build, confirm with each marketing vendor whether its tracking can be wired that way.

Hydrogen’s recommended analytics patterns send storefront metrics to the Shopify admin (opens in new tab), and Hydrogen includes analytics by default (opens in new tab) as of version 2024.4.3. If you haven’t configured consent through the Customer Privacy API, analytics events won’t fire and no data is tracked. Consent-law compliance (opens in new tab) for everything your Hydrogen site sends is on you, and the cookie banner won’t work on default Oxygen URLs.

Commerce events are wired route by route. On a store upgrading from a Hydrogen version older than 2024.4.3, you add view components such as Analytics.ProductView to product, collection, search and cart routes, and 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.

A Hydrogen launch includes work a theme store doesn’t do (opens in new tab). 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. You also need 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. Workers are capped (opens in new tab) at 10 MB, 30 seconds of CPU time per request and 128 MB of memory, and have to start up within 400 milliseconds. Oxygen doesn’t support proxies in front of your deployments because proxies can conflict with its bot mitigation. Runtime logs (opens in new tab) are available for up to one month, and Plus stores can set up log drains and trace exports to their own monitoring provider.

SEO moves to the build too. On Oxygen, your robots.txt file is only served (opens in new tab) 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. The metric is the percentage of origins passing all three Core Web Vitals (opens in new tab), 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. Headless implementations are also harder to detect (opens in new tab), 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.

In the full HTTP Archive series (opens in new tab), 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%. 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 switched Liquid storefronts from conservative to moderate speculation (opens in new tab), and the 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.

Theme stores get more by default: a Cloudflare CDN (opens in new tab), one-year browser caching for cacheable resources, and automatic CSS and JavaScript minification. Shopify 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 benefit is control over the frontend. You can use any framework, tooling or hosting (opens in new tab). You can build a custom channel alongside your online store (opens in new tab), such as a mobile app, or a custom website that replaces it.

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

Does headless commerce increase conversion rates? The HTTP Archive data above measures speed and stability, not conversion. An uplift figure from a company selling headless platforms, frontends or content systems is a vendor claim, so ask for the sample, the method and the comparison before it goes into a business case.

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

Oxygen comes at no extra charge on paid plans (opens in new tab), from Starter through Plus, including Pause and build, and it isn’t available on Agentic plans. You get one public environment (opens in new tab) 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.

Plus starts at $2,300 USD a month (opens in new tab), with the same 1-versus-25 split for headless storefronts. Shopify publishes no usage-based price for Oxygen bandwidth or requests, or a fee for Storefront API calls. That isn’t a promise that usage is unlimited.

Shopify publishes no typical build costs, timelines, team sizes or maintenance costs for a headless Shopify storefront. It 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.

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.

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