Headless commerce

What is headless commerce?

Headless commerce is an architecture where the storefront (the presentation layer customers see) is decoupled from the commerce backend (products, prices, cart, and orders). The two layers talk to each other through APIs instead of being bundled into one system. “Headless” means the backend runs without its own built-in “head” — the frontend is built separately and pulls data over the API.

Why does headless commerce matter?

With a free-standing frontend you can build exactly the experience your brand needs, without being locked into a theme’s default structure. This often means better performance and flexibility, and makes it easier to serve the same content to web, app, and other channels from a single backend. The trade-off is a significant increase in technical complexity and development cost, because you have to build and maintain the frontend yourself.

Common use cases

• Brands that want a unique, fast storefront and have the developer resources for it.
• Omnichannel setups where web, mobile app, and in-store share the same product data.
• Content-heavy sites built in a separate CMS layered on top of commerce data.
• Businesses optimizing Core Web Vitals without a theme’s constraints.

Shopify perspective

In Shopify, headless is typically built with Hydrogen (Shopify’s React framework) hosted on Oxygen, pulling data via the Storefront API (GraphQL). The classic Liquid theme no longer renders the storefront. Note that checkout still runs on Shopify-hosted checkout for security and PCI reasons — you replace the frontend, not the payment flow.