(Headless Shopify · Hydrogen · Storefront API · London)
Headless Shopify —
Shopify’s power with
your own frontend.
WebAnts builds headless Shopify storefronts with Hydrogen and the Storefront API — a fully custom React or Next.js frontend with Shopify handling cart, checkout, and commerce. London-based. No deposit.
What headless gives you
- →Fully custom frontend — not limited by Liquid or any theme
- →Shopify Storefront API for product, cart, and checkout data
- →Sub-2-second LCP via edge caching and ISR
- →Custom product visualisers, configurators, and 3D — possible
- →CMS-managed editorial layers separate from commerce data
- →International routing with localised storefronts
- →Multi-brand architecture from one Shopify Plus backend
- →Zero theme limitations on design or interaction
Sub 2s
typical LCP on a well-built headless storefront vs 4–6s for theme-based Shopify
3×
more flexibility than Liquid/theme-based Shopify for UI and editorial customisation
4.9★
WebAnts rating across Google, Clutch, Upwork
£0
deposit required — milestone billing
Common problem
Theme limitations blocking your vision
Liquid themes have a ceiling. Complex product configurators, editorial-commerce hybrids, and custom design systems cannot be built inside a theme — headless removes the ceiling entirely.
Common problem
Slow store damaging rankings
A theme-based Shopify store typically lands 4–6s LCP. Google's Core Web Vitals threshold is 2.5s. A slow store costs you organic rankings and conversion in the same stroke.
Common problem
Editorial and commerce on the same page
Putting rich editorial content — brand stories, lookbooks, buyer guides — alongside product data is clunky in Liquid. Headless makes this a clean, CMS-managed experience.
Common problem
Multi-brand or multi-region in one theme
A single Liquid theme cannot serve three brands with different design systems or five regional storefronts with different UX patterns. Headless architecture handles this natively.
What we build
Eight headless capabilities.
All built in-house in London.
From Hydrogen storefronts to multi-brand platforms — every headless build scoped, architected, and delivered by the team you spoke to.
01
Hydrogen Storefront
Shopify's own React-based headless framework, built for performance and developer experience — streaming SSR, built-in cart hooks, and first-class Shopify data primitives.
02
Storefront API Integration
Full product, cart, checkout, customer, and metaobject data over GraphQL — the complete Shopify commerce layer exposed to your custom frontend, without the theme constraints.
03
Custom Frontend Architecture
Next.js or Remix frontend with your design system — not a modified theme. Component library, design tokens, and routing all purpose-built for your brand.
04
Sanity or Contentful CMS Layer
Editorial content managed in Sanity or Contentful, merged with Shopify product data at the page level — so your content team manages the story and your merchandisers manage the product.
05
ISR / Edge Caching
Incremental Static Regeneration for product and collection pages — static-speed delivery with real-time inventory data on revalidation. No stale prices or out-of-stock products.
06
Custom Product Visualisers
3D product viewers, AR try-on, colour and material configurators, and variant-driven visual updates — all impossible inside standard Liquid, all achievable in a React frontend.
07
Multi-Brand & Multi-Region
Multiple storefronts — each with its own frontend, design system, and domain — all backed by one Shopify Plus organisation. Deploy brand two in days, not months.
08
Core Web Vitals Focus
Every Hydrogen build targets 90+ LCP, 0 CLS, and fast FID — measured against real user device profiles, not just lab scores. CWV tested and confirmed before launch.
Headless vs theme-based Shopify
Know when headless is worth it —
and when it is not.
Headless is not right for every project. We will tell you honestly which approach fits your budget, timeline, and business goals.
| Feature | Theme-based Shopify | Headless Shopify |
|---|---|---|
| UI flexibility | Limited by Liquid | Unlimited — any React component |
| Page speed (LCP) | 4–6s typical | Sub 2s with ISR/edge |
| Editorial content | Sections and metafields | Full CMS integration |
| Development cost | Lower | Higher — more flexible |
| CMS options | Shopify CMS only | Sanity, Contentful, Payload |
| Build time | 4–8 weeks | 8–16 weeks |
| Best for | Most DTC brands | Editorial, luxury, complex UX |
The performance argument
Four performance gains from going headless.
WebAnts is a London headless Shopify agency. Every headless build is measured against real performance targets — not just design deliverables.
LCP improvement
Typical headless builds achieve sub-2s LCP vs 4–6s for theme-based Shopify — a direct impact on Google rankings and paid search Quality Score.
Design freedom
No Liquid, no section schema, no theme structure. The frontend is React — your design system, your component library, your interactions.
Editorial quality
Sanity or Contentful CMS manages brand stories, lookbooks, and guides independently of Shopify product data — no metafield hacks required.
Multi-brand ROI
One Shopify Plus plan backs multiple storefronts. Add a new brand or region as a new frontend deployment — not a new Shopify account.
“Luxury brand goes headless with WebAnts — LCP drops from 5.2s to 1.4s.”
A Next.js + Storefront API build for a London luxury brand — Sanity CMS for editorial, ISR for product pages, and a custom product configurator. LCP improved from 5.2s to 1.4s on real devices. Google organic traffic increased 34% in the first quarter post-launch.
View our work →
From idea to live site in four steps.
Milestone payments — you see progress weekly and own every deliverable the moment it's completed.
Discovery Call & Flat Quote
Every project starts with a free 30-minute call — no pitch deck, no jargon. We ask the right questions about your goals, your audience and your budget, then deliver a written flat-fee proposal within 24 hours. You know the full cost before we touch a single wireframe.
- Free 30-minute strategy call
- Digital brief and business goal analysis
- Written flat-fee quote within 24 hours
- No hourly rates, no scope creep surprises
- Platform and technology recommendation included
Pricing
Flat written quotes.
No hourly surprises.
Every project gets a detailed written quote after a free 30-min discovery call. No deposit. Milestone payments throughout.
Hydrogen Build
From £12,000
Shopify's own Hydrogen framework — React-based, streaming SSR, built-in Shopify hooks.
- ↳Hydrogen storefront with Storefront API
- ↳Custom design system implementation
- ↳Product, collection, and cart pages
- ↳Checkout via Shopify-hosted checkout
- ↳CWV optimisation and testing
- ↳Vercel deployment with edge caching
- ↳Two weeks post-launch support
Most popular
Next.js + Storefront API
From £15,000
Custom Next.js frontend with Shopify Storefront API — maximum flexibility and CMS integration.
- ↳Everything in Hydrogen Build
- ↳Next.js App Router frontend
- ↳Sanity or Contentful CMS integration
- ↳ISR for product and collection pages
- ↳Custom product visualiser or configurator
- ↳International routing (multi-locale)
- ↳Full Lighthouse audit and optimisation
Full Headless Platform
From £25,000
Multi-brand or multi-region architecture from one Shopify Plus backend.
- ↳Everything in Next.js + Storefront API
- ↳Multi-storefront architecture
- ↳Multiple CMS instances or shared content model
- ↳Per-brand design systems
- ↳CI/CD pipeline setup
- ↳Dedicated project manager
- ↳Ongoing care plan (3 months)
Start a project
Free 30-min call.
Flat written quote.
No deposit.
Tell us about your store and your performance goals. We’ll review your current Shopify setup and send a flat written quote within 24 hours. No obligation.
FAQs
Questions about
headless Shopify.
When should I go headless with Shopify?
Headless is the right choice when: your design vision cannot be achieved in a Liquid theme, your store has a chronic Core Web Vitals problem that theme optimisation cannot solve, you need rich editorial content integrated with product pages in a way Shopify sections cannot handle cleanly, or you are building a multi-brand or multi-region architecture. For most DTC brands, a well-optimised Liquid theme delivers excellent results at lower cost. We will tell you honestly which is right for your situation on the discovery call.
What is the difference between Hydrogen and Next.js for a headless Shopify build?
Hydrogen is Shopify's own React framework for headless storefronts — it has built-in cart hooks, streaming server-side rendering, and first-class Shopify data primitives. It is a good default choice and deploys well to Oxygen (Shopify's hosting). Next.js with the Storefront API gives you more flexibility — easier CMS integration, more deployment options, and a more general-purpose React ecosystem. We default to Hydrogen for pure commerce, Next.js when you need a CMS layer or have a complex content architecture.
Which CMS works best with a headless Shopify build?
Sanity is our most common choice — it has a mature Shopify integration, a powerful structured content model, and real-time collaboration. Contentful is a strong alternative for teams already using it. Payload CMS is the right choice when you want self-hosted, TypeScript-native, and no vendor lock-in. We advise based on your team's publishing workflow and technical preferences.
Can I migrate from my existing Shopify Liquid theme to headless?
Yes. The migration path involves: auditing your current URL structure and SEO equity, building the headless frontend against your existing Shopify store data, implementing 301 redirects where URL changes are necessary, and running both versions in parallel for a period before cutting over. Your Shopify product data, customer data, and orders remain untouched — only the frontend changes.
How much does a headless Shopify build cost compared to a theme build?
A headless Shopify build typically costs 2–3x more than a theme-based build for the same design complexity. A custom Liquid theme build costs from £4,000–£10,000. A Hydrogen or Next.js headless build starts from £12,000. The premium reflects the additional architecture, CMS integration, and caching strategy involved. For brands where speed, editorial quality, or multi-brand architecture is commercially important, the return justifies the investment.
What Core Web Vitals improvements can I expect?
On well-built headless storefronts with ISR and edge caching, LCP typically lands sub-2 seconds versus 4–6 seconds on a theme-based Shopify store. CLS is typically 0 when layout is handled in React. FID and INP improve because interactivity is handled in the React component tree rather than through Liquid-rendered scripts. These are real user device measurements — not just Lighthouse lab scores.
Do I need Shopify Plus for a headless build?
No — the Storefront API is available on all Shopify plans. Shopify Plus is required for some features like custom checkout extensibility and B2B portals, but headless frontend builds can be done on standard Shopify, Advanced, or Plus. We will advise on whether your headless requirements warrant a Plus plan.
Can I use my own checkout page with headless Shopify?
Shopify's checkout is not replaceable for payment processing — it handles PCI compliance, fraud protection, and Shopify Payments. What is possible: styling and branding the checkout via the Checkout Branding API (Plus only), adding custom functionality via Checkout UI Extensions (Plus only), and building a fully custom cart experience before the Shopify-hosted checkout step. Most headless builds use Shopify-hosted checkout for the actual payment flow.
What is Shopify's Oxygen hosting and should I use it?
Oxygen is Shopify's global edge hosting for Hydrogen storefronts — included with Shopify Plus. It deploys your Hydrogen app to Cloudflare's edge network for low-latency delivery globally. It is a good default for Hydrogen builds. For Next.js builds, Vercel is our preferred platform — comparable edge delivery with a more mature development toolchain. Both are strong choices.
How long does a headless Shopify build take?
A Hydrogen build typically takes 8–12 weeks. A Next.js + Storefront API build with CMS integration takes 10–14 weeks. A multi-brand or multi-region platform takes 14–20 weeks. We agree firm milestone dates in the proposal before work begins — weekly staging updates throughout.
Can you build custom product configurators on a headless storefront?
Yes — this is one of the primary reasons to go headless. 3D product viewers (Three.js or model-viewer), AR try-on layers, colour and material configurators, and complex variant-driven UI are all achievable in React in ways that Liquid simply cannot support. We scope visualisers individually based on your product data structure and the complexity of the configuration logic.
Do you require a deposit?
No. We work on a milestone payment model — you pay at agreed project checkpoints, only after reviewing and approving each deliverable. No deposit, no prepayment. This is our standard model for every project.
Related services
You might also need
Client stories
4.9★ across Google, Clutch & Upwork. 100+ projects. 14 countries.
“WebAnts built something better than I'd ever imagined — shipped faster than any agency I've worked with.”
LaTisha Ebanks North Pointe Marketing
Dr. Nadish Ravindran
Founder · Elite Scholars
“The team were methodical, fast and honest. Exactly what we needed. No surprises, just results.”
Guillaume Etlin Bro Bread
“We ranked #1 in three London postcodes within 90 days of launching with WebAnts. The ROI has been remarkable.”
Ahmed Hassan Papa Doner
Rachel Piccoli
Founder & CEO · Humming Bliss Acres
“WebAnts delivered our marketing site faster than any agency we'd worked with before. Clean build, great communication throughout.”
Patrick Bishop ReRoute Americas
“Incredible attention to detail. The site launched under budget and our leads doubled in the first month.”
Tom Walker Access Super
“WebAnts built something better than I'd ever imagined — shipped faster than any agency I've worked with.”
LaTisha Ebanks North Pointe Marketing
Dr. Nadish Ravindran
Founder · Elite Scholars
“Incredible attention to detail. The site launched under budget and our leads doubled in the first month.”
Tom Walker Access Super
“The team were methodical, fast and honest. Exactly what we needed. No surprises, just results.”
Guillaume Etlin Bro Bread
“We ranked #1 in three London postcodes within 90 days of launching with WebAnts. The ROI has been remarkable.”
Ahmed Hassan Papa Doner
“WebAnts delivered our marketing site faster than any agency we'd worked with before. Clean build, great communication throughout.”
Patrick Bishop ReRoute Americas
Rachel Piccoli
Founder & CEO · Humming Bliss Acres
Verified ratings
Custom frontend. Shopify backend. →
Free discovery call. Flat quote. No deposit. No offshoring.
About WebAnts Headless Shopify Development London
WebAnts is a London headless Shopify agency building custom storefronts with Hydrogen and the Storefront API. We build React and Next.js frontends connected to Shopify for product, cart, and checkout data — achieving sub-2-second LCP, CMS editorial integration with Sanity or Contentful, multi-brand architectures, and custom product visualisers. WebAnts is rated 4.9 stars on Google and 5.0 on Clutch. No deposit required. Milestone payments only.
Headless Shopify services: Hydrogen storefront, Storefront API, Next.js ecommerce, Sanity CMS integration, ISR product pages, custom product configurators, multi-brand architecture, Core Web Vitals optimisation.