What is Headless Commerce?
Traditional Shopify uses a "coupled" architecture: Liquid templates render HTML on the server, and the resulting pages are sent to the browser. It works great for most stores.
Headless commerce "decouples" the frontend presentation layer from the Shopify backend. Your frontend is a custom JavaScript application (built with React, Next.js, etc.) that fetches data from Shopify via the Storefront API.
## What is Shopify Hydrogen?
Hydrogen is Shopify's official React-based framework for building headless storefronts. It's built on Remix and includes:
- Pre-built commerce components (Cart, ProductForm, etc.)
- Server-side rendering with streaming
- Edge deployment via Oxygen (Shopify's hosting)
## When Headless Makes Sense
✅ You need sub-1.5s page load times
Traditional Shopify themes, even optimized ones, struggle to consistently hit sub-1.5s LCP on all pages. Headless with proper edge caching can achieve this reliably.
✅ You're doing $1M+/month GMV
The complexity and cost of headless are justified when every 100ms of performance improvement translates to meaningful revenue.
### ✅ You need deeply custom UX
If your product experience requires complex interactions, such as 3D product configurators, AR try-on, or an infinite canvas, that Liquid templates can't deliver, headless opens that door.
### ✅ You're running a content-heavy brand
Brands with editorial content (blogs, lookbooks, editorial pages) benefit from the flexibility of a custom frontend connected to a headless CMS like Contentful or Sanity.
## When Headless Is Overkill
❌ You're under $100K/month GMV
The ROI of headless rarely justifies the cost at this scale. A well-optimized Shopify theme will serve you better.
### ❌ Your team doesn't include React developers
Headless requires ongoing React development. If your team is non-technical or relies on Shopify's admin theme editor, headless removes that convenience.
### ❌ You want to use Shopify's native features
Sections, metaobjects, the theme editor, and native analytics: many Shopify features work differently or require custom implementation in headless.
### ❌ You're on a tight budget
A quality headless build costs $30,000–$100,000+. A premium Shopify theme with customization costs $5,000–$15,000.
## The Hydrogen Stack We Use
When we build headless Shopify, here's our standard stack:
- Framework: Shopify Hydrogen + Remix
- Hosting: Shopify Oxygen (edge CDN, free with Shopify)
- CMS (if needed): Sanity.io or Contentful
- Analytics: Shopify Analytics + GA4 + custom event tracking
- Search: Shopify Predictive Search API or Algolia
- Reviews: Judge.me or Okendo (headless-compatible)
## Should You Go Headless?
For most Shopify stores, a well-built Liquid theme is the right choice. For brands at scale with performance and UX requirements that exceed what themes can deliver, headless is transformative.
[Talk to us](/contact) about whether headless is right for your specific situation. We'll give you an honest answer.
The complexity and cost of headless are justified when every 100ms of performance improvement translates to meaningful revenue.
### ✅ You need deeply custom UX
If your product experience requires complex interactions, such as 3D product configurators, AR try-on, or an infinite canvas, that Liquid templates can't deliver, headless opens that door.
### ✅ You're running a content-heavy brand
Brands with editorial content (blogs, lookbooks, editorial pages) benefit from the flexibility of a custom frontend connected to a headless CMS like Contentful or Sanity.
## When Headless Is Overkill