Headless Shopify, and what it costs you

Partner

Shopify Plus runs the catalog, the orders, and the checkout. Everything in front of that is yours to build, and that is where a headless storefront is won or lost.

We build headless Shopify storefronts on Next.js and Vercel, with Prismic for editorial and Algolia for search, and we have taken a legacy monolith to composable without losing the customer base. This page is about how we build them, and when going headless is not worth it.

How we build

From monolith to storefront, without losing the catalog

01
Map the catalog before the design
Products, variants, metafields, and collections come first. A storefront modeled on last year's PDP is a rebuild waiting to happen. We agree the data model in Shopify before a component gets built.
02
Move customers, then move design
Birchbox came to us on a legacy monolithic ecommerce platform with millions of customers to bring across. Migration order is a business decision, not a technical one: accounts, order history, and subscriptions land first, and the new front end goes live behind them.
03
Build the storefront, keep the checkout
The Storefront API gives you full control of everything up to the cart. Checkout stays on Shopify, where PCI scope, fraud tooling, and payment methods already work. We build the rest in Next.js on Vercel.
04
Hand it back to merchandisers
Shopify admin stays the merchandising surface. Editorial lives in the CMS. Neither team waits on a deploy to change what they own.

The grain

Working with Shopify, not around it

Keep checkout on Shopify
Every hour spent rebuilding checkout is an hour spent recreating fraud rules, tax logic, and payment methods that already work. Own the storefront. Rent the checkout.
Don't take the admin headless
Merchandisers know Shopify admin. Replacing it with a bespoke interface trades a tool your team already understands for one you now maintain.
Model the catalog in Shopify, the story in the CMS
Product data belongs where orders are. Campaign copy, landing pages, and editorial belong in the CMS. Goodnature runs Prismic beside Shopify for exactly this split, and the line holds under load.
Search is its own system
Native storefront search is fine until the catalog has depth. Goodnature runs Algolia because a commercial juicing catalog has real facets, and faceted search is not something to hand-roll.
A CDN will not hide a slow API
Edge caching makes a fast page faster. It does not fix a product query that fans out. Fix the query.

In production

What we build on Shopify Plus

Headless storefronts on Next.js and Vercel. Storefront API, server components, edge caching, and a design system that merchandisers can lay out without a developer.
Platform migrations off monolithic commerce. Birchbox moved from a legacy monolithic platform to composable, with the customer base intact.
Storefronts outside React. Goodnature runs Svelte with Shopify, Prismic, Algolia, and Stripe on Vercel. The framework is a decision with a rationale, not a default.
Editorial alongside commerce. Prismic or Sanity for campaign pages, sitting next to the catalog rather than on top of it.
Payments beyond the cart. Stripe for the flows Shopify checkout is not built to hold.

Projects Built with Shopify Plus

Headless is not free. It buys you a storefront you control, at the cost of a front end you now own, and for a catalog that changes slowly with a team that likes Shopify's themes, it is the wrong trade. We will say so.

Where it earns its keep is a brand with real editorial ambition, a catalog with depth, and a front end that has to move faster than a theme allows. Monogram is a Shopify Plus Partner, and our work on the platform runs from the enterprise migration for Birchbox to the commerce build for Goodnature. Start a conversation.