Should you build a headless Shopify store?

Maybe you have or haven't seen Hydrogen. Maybe you heard the word "headless" or even "composability" but you don't know what the hell it means when it comes to e-commerce. That's what I want this blog to be a primer for.

Before we can even start talking headless solutions let's discuss the status quo, and, probably, for most people the best decision. Vanilla Shopify.

From here on out, I am going to start firing from the hip and making some assumptions from what we've seen. Expect to catch strays.

Regular Shopify build

We're going to harp back to this a lot but Shopify Vanilla is the default Shopify experience. It's pretty good if you're building something that is a default kind of store. We're talking maybe a couple hundred products, shared between a list of product listing pages and category pages.

Look at these, if your e-commerce idea fits the bill for these, then this is what I would use.

Product landing page

This is a product landing page, as a general rule it has some kind of filter or search. If you're using vanilla Shopify, look at this page when you're looking for a theme as it's arguably the most important to get right.

You also want to run it through something like Google's JSON-LD testing tool to see if the products are getting listed in an optimal way with Google.

Product details page

Same principle as above, this is a product

Positives

• It's cheap as hell to build, you can probably run your entire site on the cost of a Wetherspoon's breakfast. Just with less indigestion.
• The preview is really nice, it's all going to work whatever you throw at it
• Somebody already did all the hard work with building the theme, all you have to do is provide good product imagery and a decent logo

Negatives

• Anything you need to do custom is probably a plugin and probably will cost X% of your profits or way too much money for a monthly fee
• Performance is kind of ok, not great. It'll get worse as the store scales into the thousands of products
• This option gets a real bad reputation because of drop-shipping wankers on YouTube

Fully customised Shopify theme

I'm going to be completely honest with you: this is usually a waste of money. You generally get a worse experience than using a default theme. Why? Well because that theme above has been used by hundreds if not thousands of people, open sourced, or sold multiple times across multiple environments, meaning that a good chunk of the edge cases would have been encountered and fixed. However, trusting an agency to build a brand new template, which has never been before tested. I can almost guarantee you'll hit the edge cases when doing this and then you're stuck reliant on the agency to get it fixed. You see why we're so cynical about this right?

Positives

• If you have complex filtering requirements - faceted search, multi-attribute filters, custom product matrices - but still want all of Shopify's native features (checkout, apps, payments), this is your sweet spot
• If your brand is so distinctive that no theme can contain it, this is the only vanilla option
• You're still within Shopify's ecosystem, so checkout, payments, and apps just work

Negatives

• You're paying agency rates to reinvent wheels that theme developers already perfected
• Liquid developers are harder to find than JavaScript developers. When something breaks, your options are limited
• Every edge case is yours now. Gift cards breaking on mobile Safari? Yours
• The agency that built it is now your permanent dependency. Their retainer rates are now your problem
• Performance is still Shopify infrastructure. You're paying custom prices for theme-tier speed

Hydrogen headless build

Hydrogen is Shopify's official headless framework, built on Remix. Not Next.js.

Why did I specify that last bit... Well I knew Remix is in abit of a weird spot:

It merged into React Router, which is now being superseded by Remix v3, which is dropping React entirely.

Take a second to read that last bit. "droping react entirely". Needless to say when that gets dropped, so does years of libraries, patterns, performance optimisations and reference content on the web. If you're thinking of doing anything agentically in the future, this is going to be a nightmarish experience consistently having to retcon "this is remix v3 that doesn't use React".

Oh yeah, also, it deploys to Oxygen (Shopify's edge hosting) and comes with Shopify-specific utilities baked in. Opinionated by design.

When Hydrogen makes sense

• You want headless performance without wiring up the Storefront API yourself
• Your team knows Remix, or is willing to learn
• Shopify's metafields and metaobjects cover your content needs

When Hydrogen is wrong

• You need a CMS beyond products
• Your team is already invested in Next.js
• You want Vercel's preview deployments and ecosystem
• The site isn't primarily a storefront

Positives

• Storefront API integration is solid
• Oxygen's edge caching is genuinely fast
• Customer accounts, cart, and checkout work without drama
• React without starting from zero

Negatives

• It's Remix. Next.js teams will need adjustment time
• Oxygen is not Vercel. Smaller ecosystem, fewer bells
• Locked into Shopify's checkout regardless
• Content management stops at metafields and metaobjects
• When something breaks, you're debugging across two frameworks and Shopify's API. Bring coffee

Next.js + Sanity + Shopify build

This is the best option. I would say that.

It's also the most likely to go wrong. It relies on having a good agency build it, or a team that genuinely understands all three systems. We've inherited builds where they didn't.

This one's for the devs

If you're a marketer, skip to the next section. Devs, carry on.

Next.js is the best way to do this, but do not build account pages custom unless absolutely required.

Two approaches:

1. Custom build using our starter (open-sourcing soon). This uses Sanity Connect, which syncs Shopify products into Sanity. Product data stays in Shopify. The story around the product lives in Sanity.

2. Use Shopify's Storefront API directly with @shopify/hydrogen-react. You get cart management, product queries, and checkout redirects without committing to Remix.

Why this works

Three layers, each doing what it does best:

• Shopify handles products, inventory, orders, payments, checkout. The commerce engine.
• Sanity handles content: blogs, landing pages, product storytelling, SEO. What marketing touches daily.
• Next.js stitches it together with server components, streaming, and Vercel's edge network.

Positives

• Total frontend control. Every pixel, every interaction
• Sanity's editing experience is leagues ahead of Shopify admin for content
• Vercel's deployment pipeline, previews, and analytics
• The React ecosystem you already know
• ISR and streaming mean fast previews without killing build times
• SEO fully in your control

Negatives

• Three systems. Three sets of docs. Three potential failure points
• You need a team that understands all three
• Higher initial build cost than any other option
• Shopify Plus required for headless. £2,000+/month before you write code
• Sanity ↔ Shopify sync needs monitoring. Products change, prices change
• If something goes wrong, you're debugging three separate platforms

Things to consider

Before committing to any headless approach, there are a couple of realities worth understanding.

You don't own checkout

Hydrogen, Next.js, whatever you use - customers are redirected to Shopify's hosted checkout. You can customise it with Checkout UI Extensions, but you're not building custom checkout. Your brand experience ends at the cart.

If you need to own checkout completely, Shopify isn't the platform.

Account pages are a rabbit hole

Shopify has two auth systems:

1. Legacy Storefront API auth - Works, but auth doesn't persist to checkout. Customer logs in, goes to checkout, logs in again.
2. Customer Account API (January 2024) - OAuth-based, maintains session properly, more complex to implement.

Building custom account pages means OAuth flows, token refresh, session state. For most projects, redirect account management to Shopify's hosted pages and move on.

Keep it simple

Our advice: don't build custom checkout or account pages. Just use Shopify's.

Shopify has spent millions on UX research optimising their checkout flow. They've A/B tested every button, every form field, every micro-interaction. You're not going to beat that with a custom build, and you'll spend months trying.

Same with account pages. Order history, saved addresses, password reset - Shopify handles all of it. Point your customers there and focus your development budget on things that actually differentiate your store.

Before you go headless

Going headless is a commitment. Before you spend the budget, consider whether these solve your actual problem:

Checkout UI Extensions - Custom fields in checkout? Upsells? Loyalty points? You can inject React components into Shopify's checkout without going headless. This solves most "I need custom checkout" requests.

Shopify Functions - Custom discount logic? Delivery restrictions? Payment rules based on cart contents? These run custom backend logic during checkout. No headless required.

Online Store 2.0 + Metafields - The newest Liquid themes are good. Combine them with metafields and metaobjects for custom content, and you can build surprisingly flexible storefronts without leaving Shopify.

Wrapping up

Go headless when your content needs justify a CMS, your brand needs to extend through the entire experience, and you have budget for Plus, development, and ongoing maintenance.

Don't go headless because it sounds impressive, an agency said it's "the future", or you want faster performance. Fix your images first.

If you're weighing up your options and want a second opinion, we do this quite a bit. We've built headless Shopify storefronts with Sanity and Next.js, inherited ones that needed rescuing, and talked plenty of clients out of headless when it wasn't the right call. Happy to chat.