Headless Commerce Explained for SMEs

E-commerce7 min read

Headless commerce means: you use Shopify (or another platform) solely as a product and order backend, but you build the store frontend separately in Next.js, Astro, or a similar framework. Advantage: 2-4× faster site, complete design freedom, content + shop in one system. Disadvantage: 2-4× more expensive to build, developer needed for ongoing maintenance. Worthwhile from €1M turnover or for brands that see speed and design control as a core competence.

What is headless commerce, at a glance

A traditional Shopify store has the platform on both sides: backend (products, orders, customers) and frontend (the site customers see). Liquid templates render the pages, all via Shopify's servers.

Headless commerce splits that: Shopify remains the backend (via the Storefront API or Hydrogen framework), but your frontend runs separately on Next.js/Astro/Hydrogen, hosted on Vercel or Cloudflare. The store is effectively its own Next.js app that retrieves data from Shopify.

Why would you want that?

  • Speed. Headless sites typically load in 0.8-1.5s vs 2-4s for standard Shopify. Direct effect on conversion (~5-15% improvement with better Core Web Vitals).
  • Design freedom. No limitations of Liquid templates. You can build animations, custom interactions, and complex layouts without hacks.
  • Content + shop in one. Blog, magazine, product pages, lookbooks — everything in the same Next.js app, with one codebase and consistent styling.
  • No Liquid jungle. Maintainable code for developers; no {% if customer %}{% else %}{% endif %} spaghetti.
  • Multi-channel. The same Next.js app can be a webshop, a mobile app, and a PWA simultaneously.

Why you probably don't want it

  • Costs. Building a headless shop typically costs €25,000-€60,000 vs €8,000-€18,000 for a good Shopify theme.
  • Maintenance. With Shopify, you get framework updates for free. With headless, you have to keep your Next.js version up to date, update dependencies, and implement security fixes yourself.
  • App ecosystem. Many Shopify apps do not work directly in headless (visual apps for pop-ups, reviews, etc.). You often have to choose alternatives or build them yourself.
  • Developer dependency. A regular Shopify store can be managed by a marketer. A headless store cannot — any adjustment outside of content requires a developer.
  • Time-to-market. A traditional theme project takes 4-8 weeks. Headless 12-20 weeks.

When is headless worthwhile for SMEs?

Three scenarios where it makes a real difference:

  • 1. Conversion-driven brands. If a 5-10% conversion improvement has a significant impact (turnover > €1M/year), you will recoup the extra investment within 12-24 months.
  • 2. Content-heavy brands. Lifestyle, magazine-style shops where storytelling is crucial. With a traditional theme, you will keep running into design limitations.
  • 3. Custom interactions. Configurators, AR product previews, complex filters — things that work clunky at best in Shopify's Liquid.

For the typical SME shop (€100k-€500k turnover, standard product presentation, limited budget): stick to a customized Shopify theme. You won't recoup the extra investment.

Common mistakes

  • Choosing headless "because it's modern". Performance improvement is only valuable if you are conversion-driven. Otherwise, a good traditional theme is just as effective.
  • Forgetting that you still pay for a Shopify license. Headless on top of Shopify Plus means you incur both costs.
  • Underestimating apps. Before building, inventory: which current apps will you continue to use? Do they work in headless?
  • No marketing tooling. Klaviyo, Mailchimp, etc. work differently with headless. Plan integration explicitly.
  • Underestimating maintenance. Expect €1,500-€4,000/month in maintenance — more than traditional.

Frequently asked questions

What is Shopify Hydrogen?

Shopify's own headless framework, built on Remix. Free to use, optimally integrated with Shopify. Best choice if you build headless on a Shopify backend. Alternative: Next.js with Shopify Storefront API.

Does headless also work with WooCommerce?

Yes, via the WooCommerce REST API or GraphQL via WPGraphQL. It is done less often than headless Shopify because WooCommerce itself is already more flexible.

Can I use headless on Shopify Basic?

Technically yes, but you miss features like markets, advanced reporting. In practice, companies with headless ambitions opt for Shopify Advanced or Plus.

What does hosting a headless front-end cost?

Vercel: from free, scales to €20-€100/month for SME volumes. Cloudflare Pages: comparable. For enterprise traffic, it can go up to €300-€1,000/month.

Does SEO work well with headless commerce?

Yes, if built correctly. Server-side rendering (SSR) or static generation is crucial — pure client-side rendering works poorly for SEO. Next.js and Hydrogen both support this well.

Which SMEs successfully use headless?

In the Netherlands, we see it with fashion brands, design-oriented lifestyle shops, and some B2B shops with configurators. Not with standard product shops; there, the extra investment is usually not profitable.

Ready to get started?

Read our approach for building a webshop, or schedule a brief introduction — we'll take a no-obligation look and provide an honest estimate of scope, costs, and lead time.

Back to Journal →
Chat