Key takeaways
- PureNest runs on Next.js 14 with the Shopify Storefront API. It has a full right-to-left Arabic layout and a day-and-night mode built for a sleep brand.
- Oleum Crete replaced a stock Shopify theme with a Hydrogen storefront, with guided selling across five pressings and Apple Pay at the buy moment.
- A headless storefront separates the shopfront you design from the Shopify checkout underneath. Shopify still handles payment and order data.
- Projects at Meant start at $2,000, at a fixed price in writing after a free 30-minute call. Nothing is billed by the hour.
- Before hiring an agency to rebuild a storefront, you can check its rendering strategy and image weight yourself in a browser's dev tools.
What Counts as a Headless Shopify Storefront?
Most headless Shopify examples share one structure. The pages a customer sees are a separate application, built in React, Next.js or Hydrogen. Shopify runs underneath and handles products, inventory, cart, checkout and orders. At Meant we build both kinds of storefront covered below. The short answer to "what does headless look like" is this: a site that doesn't look or behave like a theme, but still takes payment through Shopify.
That split is the point. You get full control of design, speed and content, and Shopify keeps the parts that are expensive to get wrong.
Headless vs theme: what actually changes
A theme is a set of templates that Shopify renders on its own servers. You can restyle it, add sections and install apps, but you are working inside Shopify's page structure.
A headless Shopify store removes that layer. The storefront asks Shopify for data through the Storefront API (product titles, prices, variants, stock) and renders its own pages. Here is what changes in practice:
- Design: no template limits. Layout, motion and page structure are whatever you build.
- Speed: you decide what loads, in what order, and how images are served.
- Content: you can mix commerce with editorial pages, films or guided selling without app workarounds.
- Maintenance: you now own a codebase. Someone has to look after it.
What stays the same matters too. Orders, customers, payments, tax settings and fulfilment all still live in Shopify admin. Your team keeps working the way it already does.
Where Shopify Hydrogen fits in
Hydrogen is Shopify's React-based stack for headless commerce, now built on the open-source React Router framework. It is Shopify's own answer to "what should I build a headless storefront with". It includes a server-side, edge-rendered cart that handles discounts, metafields and the other details that matter to conversion.
A Shopify Hydrogen storefront is one option. Next.js with the Storefront API is the other common one. Both are custom code, and both talk to the same Shopify backend. You can see both in our Next.js and headless Shopify development work. Which one fits depends on the brand, not on fashion.
Six Headless Shopify Examples, Compared
Most headless Shopify stores in 2026 fall into one of six patterns. Once you can name the pattern, you can predict how the store will behave for speed, search and upkeep.
| Pattern | Typical stack | Rendering strategy | Suits |
|---|---|---|---|
| Hydrogen on Shopify hosting | Hydrogen, React Router, Storefront API | Server-rendered at the edge | Brands that want a Shopify-native stack and a single vendor |
| Next.js, static with revalidation | Next.js, Storefront API, Vercel | Pages pre-built, refreshed on a schedule or on change | Small to mid catalogues, content-led brands, bilingual sites |
| Next.js, server components | Next.js App Router, Storefront API | Rendered per request, streamed to the browser | Larger catalogues, frequent price or stock changes |
| Headless CMS plus Shopify | Next.js or Hydrogen, a CMS for content, Shopify for commerce | Static or server-rendered | Editorial brands with lots of stories, guides and lookbooks |
| Client-side single-page app | React SPA, Storefront API | Rendered in the browser after load | Rarely the right call now; weak for search and first load |
| Partial headless | Headless landing pages, theme for the rest | Mixed | Testing a custom front end before a full rebuild |
How to read the comparison
Start with the rendering column, because it decides most of what follows. Server-rendered and statically built pages send finished HTML to the browser. That helps search engines and gets the main image on screen sooner. Client-side apps send a near-empty page and build it in the browser, which is slower on mid-range phones and harder for crawlers to read.
Next, look at who owns the content. If your marketing team publishes weekly, the CMS pattern saves them from waiting on developers. If the catalogue changes hourly, the per-request pattern keeps prices honest.
Last, check the hosting line. Hydrogen and Next.js both run on modern edge hosting. The difference is mostly about which ecosystem your developers know and which one you want to depend on.
PureNest: Bilingual Luxury Bedding, Built on Next.js 14
PureNest's bilingual bedding storefront is a luxury bedding brand entering the UAE. We designed and built it from scratch. It runs headless on Next.js 14 with the Shopify Storefront API, sitting in the Next.js patterns of the table above. Hydrogen was not used.
It is live at purenestbedding.com. It launched in a polished coming-soon mode, wired to switch on live Shopify selling the moment the brand is ready. That is one quiet advantage of headless: the storefront and the selling can go live on different days without a rebuild.
Catalogue and product pages on the Storefront API
The site carries a complete catalogue, product pages and a slide-out cart, all drawn from Shopify through the Storefront API rather than from theme templates. Products, variants and prices are managed in Shopify admin as normal. The storefront decides how they are presented.
Load is rarely the constraint here. Shopify's own guidance says buyer traffic isn't rate-limited on the Storefront API, though Shopify may temporarily reduce limits to protect platform stability. A busy launch day is mostly a question of how well the front end is built.
The slide-out cart keeps shoppers on the page they were browsing. Checkout itself stays in Shopify.
Right-to-left Arabic layout and the day and night mode
Bilingual stores often fail at Arabic. A translated theme flips the text but leaves arrows, carousels, spacing and icons pointing the wrong way. PureNest uses a true right-to-left Arabic layout, so the whole page mirrors, not just the words.
The second feature is brand-led. The storefront has a warm day-and-night mode, fitting for a sleep brand. It is the kind of detail a theme makes awkward and a custom front end makes ordinary.
Oleum Crete: A Hydrogen Storefront Built for One Buy Moment
Oleum Crete is one of the more distinctive headless Shopify examples we have built. The brand sells single-estate PDO extra virgin olive oil from the Messara Plain of Crete to the UAE. It is live at oleumcrete.ae.
Oleum Crete's Hydrogen storefront replaced a stock Shopify template. Where PureNest is a catalogue built to be browsed, Oleum Crete is built around cinematic scrolling and one moment of decision.
The work went beyond code. We directed a two-day Dubai photoshoot, re-mastered the estate film and rebuilt the technical SEO.
Guided selling across five pressings
Five olive oils from one estate look alike on a grid. Guided selling replaces the grid with a sequence that helps a buyer understand the differences between the pressings and choose one. Building that kind of flow is easier in a custom storefront, because the page structure is written for the product rather than borrowed from a template.
Apple Pay at the editorial buy moment
The buy moment sits inside the editorial scroll, with Apple Pay available right there. The customer reads, watches and buys without hunting for a cart icon. Payment still runs through Shopify.
The zero-downtime domain cutover
Moving a live store to a new storefront means pointing the domain at new hosting without customers hitting errors or search engines losing pages. Oleum Crete's cutover ran with zero downtime.
In general terms, a clean cutover needs three things in place before the switch: redirects for every old URL, the new site tested on its final domain settings, and DNS changes timed so old and new overlap rather than leave a gap.
How to Read Any Storefront's Dev Tools Yourself
You don't need an agency to tell you what a store is built on. Open any site in Chrome, Edge or Firefox and spend ten minutes with the developer tools. You can do this on a competitor, on a store you admire, or on your own headless Shopify store before you pay anyone to rebuild it.
View Source vs the Elements tab
Right-click and choose View Page Source. This shows the HTML the server sent. Then open the Elements tab, which shows the page after JavaScript has run.
- If product names and prices appear in View Source, the page is server-rendered or statically built.
- If they only appear in Elements, the page is built in the browser. That is the client-side pattern.
- Paths containing
/_next/point to Next.js. - References to React Router or Remix context objects suggest Hydrogen.
- Lots of
Shopify.themereferences and theme asset paths mean it is still a theme.
What the Network tab tells you about image weight
Open the Network tab, tick Disable cache, filter by Img and reload. Sort by size. Check three things:
- The largest image. It is usually the hero, and it should not be several times larger than the screen it is shown on.
- The format. AVIF or WebP is a good sign. Huge PNGs and JPEGs are not.
- Mobile. Toggle the device toolbar to a phone. A well-built store sends smaller images to smaller screens.
Throttle the connection to a slower preset and reload. What you see is roughly what a customer on a train sees.
Reading a Lighthouse or PageSpeed score
Lighthouse, in the dev tools, runs a lab test on your machine. PageSpeed Insights adds field data from real visitors where enough traffic exists. Trust the field data more.
Shopify's 2026 benchmarks for storefronts are LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less. In plain terms: LCP is how fast the main content appears, INP is how quickly the page responds to a tap, and CLS is how much the layout jumps around. Shopify bases that analysis on real user metrics from actual visitors across devices, browsers, networks and locations. Treat a single lab score as a hint, not a verdict.
When a Theme Still Beats Going Headless
Headless is not always the answer, and we would rather say so here than after a build. A well-built theme is faster to launch, cheaper to run and easier to hand to a small team.
Low SKU count, low traffic stores
If you sell a handful of products, traffic is modest, and the brand doesn't need custom motion, guided selling or a proper right-to-left layout, a carefully built theme will do the job. The gains from headless show up when design is a selling point, when content and commerce need to blend, or when theme speed has hit a ceiling that apps keep making worse.
Budget and timeline reality
A headless storefront is software. It needs a developer to change templates, and hosting and upkeep are ongoing line items. Shopify headless pricing depends on scope, so read what a Hydrogen store really costs in year one before you commit. If launch is weeks away and the budget is tight, ship on a good theme now and plan the headless build as a second phase.
Frequently asked questions
Is Shopify Hydrogen free to use?
Hydrogen is Shopify's own headless stack, built on the open-source React Router framework. The real costs sit elsewhere: your Shopify plan, hosting, and the time to design and build the storefront. Check your plan's terms for hosting, and budget for the build and upkeep separately.
Can a headless Shopify storefront keep native Shopify checkout?
Yes. That is the standard setup. The custom storefront handles browsing and the cart, and Hydrogen ships with a server-side cart that handles discounts and metafields. Checkout, payment and order data stay in Shopify.
How long does a headless Shopify build take?
It depends on catalogue size, languages, content and integrations, so any figure quoted before scoping is a guess. At Meant we agree the scope, price and timeline in writing after a free 30-minute call, before any work starts.
Does going headless actually improve Shopify SEO?
Not automatically. A client-rendered headless site can rank worse than a theme. Gains come from server rendering, faster pages measured against benchmarks like LCP under 2.5 seconds, clean URLs and properly rebuilt technical SEO, as we did on Oleum Crete.
What does a headless Shopify storefront cost in 2026?
The cost depends on scope, so there is no honest single number. Projects at Meant start at $2,000, are fixed scope and fixed price in writing, and are never billed by the hour. Our year-one Hydrogen cost guide breaks down the running costs.
If you're comparing storefronts and want one built the same way, book the free 30-minute call with Meant. You will get a fixed scope and a fixed price in writing before anything starts.
