Headless Commerce: Revolutionary or Overhyped?

Few topics in the Shopify ecosystem generate more debate than headless commerce. On one side, agencies (and Shopify themselves) promote headless as the future — blazing-fast sites, infinite flexibility, perfect custom experiences. On the other side, pragmatic operators point out that headless is expensive, complex, and overkill for most stores.

The truth is more nuanced: headless is right for specific situations, and wrong for most.

In 2025, the relevant stack is Shopify Hydrogen (Shopify's official headless framework, built on Next.js-like Remix) or custom Next.js 15 connected to Shopify via the Storefront API.

Here's the honest guide.

---

What Is Headless Shopify?

In a traditional Shopify store:

• Shopify hosts both the backend (products, orders, checkout, payments) AND the frontend (the theme — what customers see)
• Customization is limited to what Liquid templates and the Theme Customizer allow

In headless Shopify:

• Shopify handles the backend (products, orders, checkout, payments)
• A separate frontend (Next.js, Remix, Nuxt, etc.) handles what customers see
• The frontend fetches data from Shopify via the Storefront API (GraphQL)
• The checkout still lives on Shopify (or is embedded via Shopify Checkout Extensions)

---

Shopify Hydrogen vs. Custom Next.js 15

Before deciding on headless, you need to choose your approach:

#

Shopify Hydrogen

What it is: Shopify's official headless commerce framework, built on Remix Pros:

• Officially supported by Shopify — no integration code to write
• Purpose-built components: ProductProvider, CartProvider, MediaFile — all handle Shopify data natively
• Oxygen hosting: Deploy directly to Shopify's edge network (included with Shopify Advanced/Plus)
• Streaming SSR out of the box for fast initial loads
• Shopify's component library is well-maintained and updated

Cons:

• Built on Remix, not Next.js — different paradigm (loaders, actions vs. getServerSideProps/Server Components)
• Less community support than Next.js (Remix is smaller ecosystem)
• Shopify Oxygen hosting limits customization vs. self-hosted
• Tighter coupling to Shopify — harder to add non-Shopify content later

Best for: Pure-play Shopify stores that want headless without custom infrastructure

#

Custom Next.js 15 + Shopify Storefront API

What it is: A fully custom frontend built in Next.js 15, connected to Shopify via GraphQL Pros:

• Full Next.js ecosystem (App Router, Server Components, Turbopack, 50k+ npm packages)
• Complete design and UX freedom — not limited by Shopify's component paradigm
• Easy to integrate with non-Shopify content: Sanity CMS, custom blog, landing pages, product configurators
• Deploy anywhere: Vercel, AWS, your own server
• Easier to find Next.js developers than Hydrogen developers

Cons:

• More work to integrate: write your own Storefront API queries, cart management, product hooks
• Checkout complexity: you'll redirect to Shopify-hosted checkout or embed it (Shopify Checkout requires Plus for embedded)
• No official Shopify support — you own the integration
• More moving parts = more potential failure points

Best for: Brands that need deep CMS integration, custom product experiences, or already have a React/Next.js team

---

When Headless Makes Sense

Headless is justified when: 1. Performance Is Existential If your conversion rate drops significantly with page load time (measurable with your analytics), and your current Liquid theme has hit optimization limits, headless can push Lighthouse scores from 60-70 to 90+.

*But first: have you fully optimized your Liquid theme? Most stores can hit 80+ Lighthouse with proper theme optimization — no headless required.* 2. Complex Custom Experiences

• Product configurators (custom engraving, build-your-own products)
• 3D product visualization
• AI-powered recommendation flows
• Complex filtering that Shopify's native search can't handle

3. Multi-Channel Content If your store needs to pull content from a headless CMS (Sanity, Contentful, Storyblok) alongside Shopify products — blog content, editorial pages, lookbooks — a Next.js frontend handles this elegantly. 4. You're on Shopify Plus Shopify Plus unlocks the ability to customize checkout (Checkout Extensibility) and use Shopify Oxygen for hosting. The ROI of headless is much higher when you can customize the entire purchase funnel. 5. Your Tech Team Is Already in the React Ecosystem If you have Next.js developers in-house, the maintenance cost of a headless store is manageable. If you're relying entirely on Liquid-specialist agencies, headless adds complexity without a team to support it.

---

When Headless Doesn't Make Sense

Headless is overkill for:

• Stores under $1M annual revenue: The development cost (₹5-20 lakh for a quality headless build) rarely ROIs at this scale
• Standard product pages with no custom interactions: Shopify Dawn + proper optimization handles this fine
• Teams without in-house developers: Headless stores require developer involvement for routine updates that non-technical operators handle on Liquid themes
• Fast-moving merchandise (fashion, trend-driven): Headless slows down your ability to make visual changes quickly
• Stores that rely heavily on Shopify apps: Many apps only work with Liquid themes (they inject scripts into theme.liquid). Headless breaks compatibility

---

The Performance Numbers (Real Data)

When built correctly, headless Shopify stores outperform Liquid themes on Core Web Vitals:

| Metric | Optimized Liquid Theme | Headless Next.js (well-built) | |---|---|---| | LCP | 1.8–2.8s | 0.8–1.5s | | FID/INP | 80–150ms | 20–60ms | | CLS | 0.05–0.15 | 0.01–0.05 | | Lighthouse | 70–85 | 88–98 |

*Note: A poorly-built headless store is slower than a well-built Liquid theme. Architecture matters more than the framework.*

---

The Build Cost Comparison

Standard Shopify Theme (Liquid)

• Premium theme: $200–500 one-time
• Custom development: ₹50,000–3,00,000 depending on complexity
• Timeline: 3–8 weeks

Headless Shopify (Hydrogen or Next.js)

• Development: ₹3,00,000–15,00,000+
• Timeline: 8–20 weeks
• Ongoing maintenance: Higher (developer required for most changes)

---

ANF STUDIO's Recommendation

For most of our clients, we start with a highly optimized Liquid theme and only recommend headless when: 1. The brand is generating ₹5 crore+ annually 2. There's a clear performance or experience need that Liquid can't meet 3. The team has (or is willing to hire) Next.js development resources

For brands that do need headless, we build on Next.js 15 with the Shopify Storefront API rather than Hydrogen — because Next.js has a larger talent pool and better ecosystem for the multi-channel content architectures our clients typically need.

--- Unsure whether headless is right for your Shopify store? Let's audit your current performance and business requirements. Talk to our team.