A client called me in late 2022 — a fine jewelry brand based in Hatton Garden, doing about £2.4 million a year online, almost entirely on Shopify. Good numbers. But she was furious. Her conversion rate on engagement rings (the highest-margin product in her catalogue) had flatlined at 0.8%, while her studio's in-person close rate was sitting at something like 34%. The gap wasn't the product. The product was gorgeous. The gap was theexperience— and Shopify, for all its strengths, was giving her a website that looked and felt like a slightly upmarket Etsy shop.
That conversation is what pushed me to properly think through headless commerce for luxury product categories. Not in the abstract "future of retail" sense that agency blogs love. In the concrete, messy, expensive, sometimes-worth-it sense.
So. Here's what I've learned from building and advising on headless projects specifically for fine jewelry and high-ticket accessories brands.
---
Why Shopify Specifically Runs Out of Road
Let me be clear about something first: Shopify is brilliant. I've built well over a thousand Shopify stores across the Seahawk portfolio. For most brands, it's exactly the right answer. Fast, reliable, the ecosystem is mature, and a competent dev can ship a beautiful storefront in three or four weeks.
But fine jewelry isn't most brands.
The problems tend to cluster around three areas. First:animation and interaction fidelity. Liquid, Shopify's templating language, is a server-rendered system. You can bolt on JavaScript, obviously — but creating the kind of fluid, cinematic scroll experiences that luxury jewellers want (think Van Cleef's website, or Graff's, or even a well-funded independent brand) requires fighting the theme architecture at every turn. You end up with patches on patches.
Second:product storytelling depth. An engagement ring isn't a SKU. It's a 4C breakdown, a provenance story, a 360° video, a configurator that lets you swap bands and stones, a ring-sizing guide with hand photos — and ideally all of that lives on one URL without the page collapsing under its own JavaScript weight. Shopify's metafield system has improved significantly with the 2.0 theme architecture andOnline Store 2.0, but it still bends awkwardly when you're building genuinely complex product templates.
Third:performance at richness. Jewelry sites are image-heavy. They're video-heavy. They have high-resolution zoom. Getting a Lighthouse score above 70 on a media-rich Shopify theme without stripping out half the experience is genuinely hard work. I've done it — but it requires heroic image optimisation work and a lot of compromises.
The 0.8% Conversion Problem Is Usually a Trust Problem
Here's the thing that took me a while to connect: for high-ticket purchases,perceived quality of the website is a proxy for trust in the brand. A £4,800 engagement ring sold from a site that feels like it loads a bit slowly, where the product images feel slightly compressed, where the checkout journey breaks the visual language of the store — that site is quietly destroying conversions.
People don't articulate this. They just leave.
---
What "Headless" Actually Means in This Context
Quickly, for anyone who needs the grounding: headless commerce means you decouple the front-end (what the customer sees and interacts with) from the back-end commerce engine (cart, checkout, inventory, orders). Shopify's Storefront API lets you use Shopify purely as a back-end while building your front-end in whatever framework you want.
The most common stack I've recommended and built on:Next.json the front end, Shopify as the commerce back-end, and a headless CMS — usuallySanityor Contentful — managing the editorial and storytelling content. Sometimes a dedicated search layer like Algolia on top.
That's the architecture. Sounds elegant. And it can be — but the cost implications need to be stated plainly.
---
The Real Cost Breakdown
People get starry-eyed about headless and then blanch at the invoice. So let me be honest about what this actually costs.
A properly built headless Shopify storefront for a fine jewelry brand — custom Next.js front-end, Sanity CMS, Algolia search, configured product configurator, proper animation work — is going to run you somewhere between£40,000 and £120,000for the initial build. That's a wide range, and it depends heavily on the configurator complexity and the animation scope.
Ongoing, you're looking at a more complex hosting and infrastructure setup. Vercel for Next.js hosting is the obvious choice — theirEdge Networkhandles the performance side well — but you're paying for it. A meaningful Sanity plan, Algolia costs, developer time for content model changes that a Shopify merchant would do in the theme editor themselves. The total-cost-of-ownership is genuinely higher.
And here's what I tell every client who comes to me excited about going headless:the operational overhead is real. Your marketing team can no longer just install a Shopify app to add a review widget or a loyalty programme. Every integration now requires developer involvement. That's not a dealbreaker, but it's a fundamental change in how your organisation operates.
When the Cost Is Worth It
The maths starts working when:
- Your average order value is above £1,500 — because even a 0.5% conversion rate improvement generates meaningful revenue
- You have editorial content (brand stories, provenance features, designer profiles) that needs to live alongside product and be managed by a non-technical team
- You're running significant paid media and your landing page experience is visibly sub-par — headless gives you the flexibility to build campaign-specific experiences fast
- You have a product configurator requirement (ring builder, engraving, stone selection) that is simply not feasible within Shopify's native architecture without becoming a maintenance nightmare
---
The Stack I Actually Recommend
After building and inheriting several of these projects, here's what I reach for:
- Next.js 14 (App Router)— the React Server Components model is genuinely useful for performance here; you can stream product data without blocking page render
- Shopify Storefront API— not the Admin API; the Storefront API is what headless front-ends should be hitting for customer-facing data
- Sanity v3— the GROQ query language is a joy once you're past the learning curve, and the content lake model suits brands that want to reuse editorial content across web, app, and email
- Algolia— especially useful for brands with large catalogues where faceted filtering by metal type, gemstone, price band, and collection needs to be instantaneous
- Framer Motion— for the animation layer; it integrates cleanly into Next.js and gives you the scroll-triggered, physics-based animations that make a luxury site feel alive
- Vercel— hosting, CI/CD, preview deployments for the content team to review before pushing live
What I've Stopped Recommending
Gatsby. I know some people still swear by it but I built two headless jewelry stores on Gatsby between 2020 and 2021 and the build times were punishing and the ecosystem has clearly lost momentum. The Next.js App Router has made Gatsby largely redundant for this use case.
I've also stopped recommending full custom back-ends. Shopify's Storefront API, combined with Shopify's native checkout (which you don't replace in a headless setup — you still use Shopify checkout), gives you PCI compliance, payment methods, Shop Pay, and a checkout that converts. Don't rebuild that. Ever.
---
The Configurator Problem — and the Honest Answer
This is where most fine jewelry headless projects either succeed brilliantly or collapse expensively.
A ring configurator — where customers choose a setting style, a metal, a stone shape, a carat weight, and see a rendered or photographed result — is an enormous undertaking if you're doing it properly. I've seen brands try to build this inside Shopify using variants and metafields. For simple cases (two or three choices), it works. For real configurators with dozens of combinations? The variant limit (100 per product in Shopify) becomes a hard wall very quickly.
Seahawk had a project with a Mayfair jeweller back in 2023 where the configurator required 18 setting styles × 4 metals × 7 stone shapes × 5 carat bands. That's over 2,500 combinations. Each with its own price logic. Shopify's native variant system simply doesn't support that. We ended up building the configurator logic in the Next.js layer, storing configuration state in the URL and cart attributes, and using a custom Shopify line item property structure to pass the selected configuration through to fulfilment. It worked beautifully. But it took three developers six weeks.
That's the honest answer. It's possible. It's not quick.
---
What Headless Doesn't Fix
I want to push back on something I see in agency discourse around headless — the idea that it's a silver bullet for conversion problems.
It isn't.
If your product photography is mediocre, a headless architecture won't save you. If your ring-sizing guide is confusing or your returns policy is buried, your conversion rate will remain awful regardless of how cinematic your scroll animations are. I've seen beautifully built headless stores underperform because the brand had no real editorial content to populate the CMS with, so the pages were half-empty and oddly sparse.
Going headless amplifies what's already there. If the brand is strong and the content is rich and the photography is excellent, headless gives you the canvas to express all of that with genuine creative freedom. If those things are missing, headless is an expensive way to discover that your problem was never technical.
---
FAQ
Is headless commerce only for large brands with big budgets?
Pretty much, yes — at least in fine jewelry. The build cost and ongoing overhead make it a hard sell for brands doing under £500k a year online. Below that threshold, I'd spend the money on better photography, a conversion rate optimisation audit, and a really well-configured Shopify theme like Dawn or Prestige before even thinking about headless. The ROI just isn't there yet.
Can I use Shopify's native checkout with a headless front-end?
Yes, and you should. Shopify'sCheckout Extensibilityhas improved significantly — you can customise the checkout appearance and add UI extensions without replacing it. Replacing Shopify checkout with a custom-built one is a decision you will regret within eighteen months when you need to support a new payment method or comply with a new fraud rule.
How long does a headless build actually take?
For a fine jewelry brand with a product configurator, editorial content requirements, and a meaningful catalogue? Realistically 16 to 24 weeks from discovery to launch. Anyone telling you 8 weeks is either cutting scope aggressively or planning to hand you something unfinished. I've seen both.
What's the performance difference versus a well-optimised Shopify theme?
Honestly, less than people expect. A well-optimised Shopify theme usingShopify's CDNand compressed media can hit Lighthouse scores in the mid-80s. A poorly optimised headless site can score in the 50s. The performance advantage of headless is real but it's not automatic — it requires disciplined implementation. The bigger advantage is interaction quality and animation fidelity, not raw load speed.
Should I migrate my existing Shopify store or rebuild from scratch?
Rebuild. I have tried migrating existing Shopify stores to headless architectures twice, and both times the technical debt from the existing store infected the new project. Start clean, migrate your data (products, customers, order history), and leave the old theme behind entirely.
---
The Hatton Garden client, by the way, rebuilt on a Next.js / Shopify / Sanity stack. Took us nineteen weeks. Her engagement ring conversion rate moved from 0.8% to 2.1% within ninety days of launch. She also told me her marketing team was upset because they now needed a developer to change a homepage banner. Both things are true at the same time.
That's headless commerce for you. Genuinely powerful. Genuinely demanding. Worth it — but only when the brand is ready for what it asks of you in return.