Shopify headless commerce: when it pays off, and how to build it
"Headless" has become one of the most over-sold words in e-commerce. Done well, a headless Shopify build gives you a fast, flexible storefront you fully control. Done for the wrong reasons, it doubles your maintenance cost for no measurable gain. This guide is about telling the two apart, and building the first kind.
What "headless" actually means
In a standard Shopify theme, the storefront (what the customer sees) and the commerce engine (cart, checkout, inventory) are tightly coupled through Liquid. Going headless means you keep Shopify as the commerce backend but build the storefront separately — typically with a framework like Next.js — talking to Shopify through the Storefront API.
Checkout almost always stays on Shopify. That is a feature, not a limitation: Shopify's checkout is PCI-compliant, converts well, and is hard to beat. You own everything up to the "Checkout" button.
When it pays off
Headless is worth the extra complexity when at least one of these is true:
- Content and commerce are deeply intertwined. You run a content-heavy brand where editorial, localisation and merchandising need a real CMS (Sanity, Storyblok, Contentful) sitting alongside products.
- You need performance the theme can't deliver. Core Web Vitals matter for both SEO and conversion. A well-built Next.js storefront with edge rendering and image optimisation can outperform a heavy theme.
- You have bespoke front-end requirements — complex configurators, B2B portals, multi-brand storefronts sharing one backend.
If none of these apply, a well-optimised Online Store 2.0 theme is cheaper and perfectly capable. Be honest about which camp you are in.
A reference architecture
A headless Shopify build we are happy to ship looks like this:
- Next.js (App Router) on the front end, deployed to the edge.
- Shopify Storefront API over GraphQL for products, collections and cart.
- A headless CMS for editorial content and merchandising, fetched at build or request time.
- Incremental Static Regeneration (ISR) for product and collection pages, so most traffic hits cached HTML while prices and stock stay fresh.
- Shopify checkout via the Cart API
checkoutUrl.
// Create a cart and redirect to Shopify's hosted checkout
const cart = await storefront(CREATE_CART_MUTATION, { lines });
window.location.href = cart.checkoutUrl;
The traps to avoid
Over-fetching the Storefront API. GraphQL makes it easy to request deeply nested data on every page. Query only what the page renders, and cache aggressively.
Forgetting webhooks. When a product or price changes in Shopify, your cached pages need to revalidate. Wire up products/update and collections/update webhooks to trigger revalidation, or your storefront will quietly serve stale data.
Re-implementing checkout. Don't. Keep checkout on Shopify and spend your effort on the storefront experience instead.
Ignoring SEO during the rebuild. A headless migration is the most common moment to accidentally drop canonical tags, structured data and redirects. Treat the SEO surface as a first-class deliverable, not an afterthought.
How to decide
Start with the question "what can't my current theme do?" If you can answer it in one concrete sentence tied to revenue or content, headless is probably worth it. If the answer is "it would be more modern," keep the theme and invest the budget elsewhere.
If you are weighing a headless build and want a straight answer about whether it fits your case, book a discovery call — we will tell you honestly which side of the line you are on.
Let's build your next scalable system together
In a single discovery call we will clarify the architecture, technology choices and timeline — and send you a detailed proposal within a few working days.