What is headless commerce?

Headless means "without a head", and the head is the part the shopper sees: the website, with its design and pages. In a headless store that part is built separately, custom, and the commerce platform keeps what is inside. Do not confuse it with a headless browser, the kind used without a window for testing or crawling pages. It matters for a reason that does not usually come up in the proposal: everything the platform's template did on each page becomes the responsibility of whoever builds the frontend, and that includes what search engines and AI assistants read.

How it works

A headless store has two pieces that talk to each other through APIs.

The commerce backend holds the catalog and does the store's work: the cart, checkout, payments and orders. BigCommerce explains it with its own diagram: the storefront is the layer where shoppers interact with products, and it can be a CMS, a mobile app, a kiosk or a static site; an application makes calls to the BigCommerce APIs, and BigCommerce creates the order and processes the payment, so that infrastructure does not have to be built.⁠^{[1]BigCommerce Docs. Introduction to Headless Commerce}

The frontend is the application that requests the data and renders the pages. Shopify sums up the idea as all of Shopify's power underneath and full control over the frontend, and offers two routes: Hydrogen, its official framework for headless commerce, hosted on Oxygen, or any other language and framework connected to its APIs through the Headless channel.⁠^{[2]Shopify (shopify.dev). Build headless commerce} The central piece is the Storefront API, which lets you view products and collections, add them to the cart and check out from any platform: a website, an app or a game.⁠^{[3]Shopify (shopify.dev). Storefront API reference} BigCommerce offers its own APIs and SDKs for the same purpose.⁠^{[1]BigCommerce Docs. Introduction to Headless Commerce}

The difference from a regular store is in who generates the HTML. In a templated store, the platform generates it with its theme system, Liquid on Shopify or Stencil on BigCommerce, and what an app adds to that template shows up on every product page. In a headless store, that template is not used: what an app injected into the theme does not reach a frontend that does not load the theme.

What changes for search engines and assistants

Rendering. Google processes JavaScript in three phases, crawling, rendering and indexing, and renders pages with a current version of Chromium. Even so it recommends server-side rendering or prerendering, because it makes the website faster for users and crawlers, and not all bots can run JavaScript.⁠^{[4]Google Search Central. Understand JavaScript SEO basics} A frontend that paints the product page in the browser shows a crawler that does not run JavaScript an almost empty page. Hydrogen, for example, relies on React Router with server-side rendering.⁠^{[2]Shopify (shopify.dev). Build headless commerce}

Page tags. The title, the meta description and the canonical tag can be set with JavaScript, although for the canonical Google prefers the HTML and asks that JavaScript never change it to a value different from the one in the original HTML.⁠^{[4]Google Search Central. Understand JavaScript SEO basics} But someone has to write that code: the platform stores each product's SEO fields, and it is the frontend that decides whether to read them and put them on the page.

The site's files. robots.txt and the XML sitemap also move to the frontend. Hydrogen's starter template, for example, creates its own routes for /robots.txt and /sitemap.xml.⁠^{[5]Shopify (shopify.dev). Getting started with Hydrogen and Oxygen}

AI channels. Shopify Catalog, the database Shopify uses to distribute products across AI channels, accepts products published on the online store or on the Hydrogen or Headless channels; if you use Hydrogen or Headless, routes have to follow the right format for the product to get in, and it has to be published with an identifiable product URL.⁠^{[6]Shopify Help Center. Requirements for being included in Shopify Catalog}

In a store

Fictional example. Who does what on the same product page, templated and headless:

The last row does not change and the middle ones all change owner. That is why a headless project needs a list of what the theme did before switching it off. Clione, for example, runs on Hydrogen: the frontend renders the structured data graph, the meta tags and the FAQs on the server from the product's metafields.

How to check it

1. Look at a product page's source code, not the browser inspector: the title, the price and the JSON-LD have to be in the HTML that comes from the server.⁠^{[4]Google Search Central. Understand JavaScript SEO basics}
2. Inspect the same URL in Search Console and compare the rendered HTML with the source code. What only appears after rendering depends on the bot running JavaScript.
3. Open /robots.txt and /sitemap.xml on the store's domain and check that they exist and list the frontend's URLs.⁠^{[5]Shopify (shopify.dev). Getting started with Hydrogen and Oxygen}
4. Check a product page's canonical in the source code and in the rendered HTML: if JavaScript changes it to a value different from the original, it breaks what Google asks for.⁠^{[4]Google Search Central. Understand JavaScript SEO basics}
5. If the store is on Shopify, confirm the products are published on the Hydrogen or Headless channel and that their routes follow the format Shopify Catalog asks for.⁠^{[6]Shopify Help Center. Requirements for being included in Shopify Catalog}

Related concept: server-side rendering

Headless is about architecture: who stores the data and who presents it. Server-side rendering is about technique: where each page's HTML is generated. A templated store already renders on the server; a headless store can do so, as Hydrogen does, or not, if its frontend paints the pages in the browser.⁠^{[2]Shopify (shopify.dev). Build headless commerce} The useful question about a headless project is not whether it is headless, but where the HTML is generated, and that is what the JavaScript rendering term is for.

To go further, the publishing by platform reading path orders the rest of the terms, from Liquid and BigCommerce widgets to the catalog API.