Before we get started, we’d like to point out that although this is written with headless Shopify in mind, the same problems are going to arise for headless stores using alternative platforms within their setups.

We’ll also mention that, if you landed on this page, we’re assuming you’re pretty familiar with what headless e-commerce is. Perhaps you already have a headless store, or you’re considering switching to this architecture. If this isn’t the case, let us point you to a post that’ll bring you up-to-speed on all things headless firstly.

Good to go? Let’s get to it.

Building a content model is complex

Firstly, headless architectures demand their own content models be built — something that no brand would ever have to do in a normal Shopify setup. And doing it is no mean feat.

There can be confusion around product structuring and which information fields belong in the CMS vs which belong in Shopify. For instance, we’ve seen CMSs suggest that you should use Shopify as the PIM (product information management) solution and simply reference product handle/IDs from the CMS. However, sometimes the CMS is the only place possible to store certain information about these products. For example, it might be the only place with multiple locales available, meaning the majority of your products’ information can only ever live there.

The concept of a ‘Page’ content type is also a tricky subject in headless. A content model shouldn’t care too much about how the front end is rendering the content, but ultimately you need somewhere to store the concept of a Page i.e. something with a URL slug, meta title and meta description. Should this reference other sections? Or, should you have different page types in your content model? It’s not easy to know this sort of stuff at the start of a project.

Solution: detailed and careful preparation is key here. Creating the perfect content model really isn’t easy, so expect to allow a fair amount of time for this. Planning and designing around admin user experience is also important — something we take for granted with a monolithic Shopify build where the admin flows are pre-determined and simply excellent. Moreover, it’s crucial your agency partner has the experience and resource to tackle this one, so make sure of that before committing to them.

Integrating services requires major development work

A second area in which headless setups warrant much more bespoke development is when integrating the different services to connect various parts of the architecture. Again, something standard Shopify spoils us with, is giving brands huge flexibility to broaden their tech stacks and try new apps whenever they fancy. The Shopify app ecosystem is huge in variety, from marketing, to shipping, to integration, to accounting integrations. All of which are easy to install, as they all connect to a well-understood API and platform. With a headless architecture, by contrast, swapping technologies out isn’t all that simple. To illustrate:

Shopify + Contentful -> Algolia

International pricing engine + Contentful + Shopify -> Feeds/feed manager (with Shopify, you just install one app to do this)

International pricing engine -> Shopify for order pricing details

Because of this, you have a much larger project at hand.

Solution: a thorough, up-front discovery process is your answer. Use it to pin down all the services that need to be in scope and avoid the headache of trying to swap things in-and-out retrospectively. This will also help you fully understand the budget requirements of your project from the off. Once again, make sure you’re dealing with an experienced agency so all those integrations happen without hiccups.

Internationalization: getting localized information across to apps requires more legwork

If you’re a brand that sells to multiple regions, you’ll have the added complexity of getting localized information (such as languages and currency rates) across to all these integrations as well. Think reviews, smart search, personalizations, loyalty programs (to name a few).

But when we look at how this aspect of internationalization compares to standard Shopify, we can see the appeal. If you can’t use Shopify Payment multi-currency and/or the Shopify multi-language API, a traditional multi-region setup can mean needing a store per currency and language, for example, and there are complexities attached to that too (learn more about selling internationally on Shopify here). Hence, reducing this to a single, headless store that’s able to power 20-30 different language/currency combinations can feel really compelling. We just have to appreciate that to transfer localized information across to your apps, you’ll need to manually build connections to transfer translations and prices as needed.

Solution: again, it’s a case of detailed and careful preparation. You’ll need to be a fair bit of planning before writing up any code. This means close involvement with your agency partner and clear, up-front documentation. And needless to say, working with an agency who specialize in international...

Project milestones can be trickier to manage with headless

Now, a point on project management. The need for custom connections when integrating services doesn’t just create extra development work, but also adds more project management complexity.

For instance, if you’re not going headless, you know how Shopify’s product catalog will work. The entire ecosystem understands the Shopify content model and so, we can make a lot of assumptions about connecting apps — and them working. It’s why leaving your integrations until the last few weeks of your project is no biggy. We know how they’re going to end up, so it poses a pretty small risk.

But with a headless architecture? It’s a bit riskier. The flow of information amongst all these integrations is both more bespoke and less predictable — and with that, you’re more vulnerable to errors. This is precisely why you need to test these things nice and prematurely. But of course, until the integration partners populate the test content, you’ll have a hard job getting that done.

Solution: end-to-end testing is more important and takes more of your timeline to get to on a headless project, which needs factoring into your project plan. There’ll be lots of different stakeholders involved that need lining up tightly, so agreement on this from each and every party is fundamental.

Headless means new product knowledge — for all of us!

Another beauty of standard Shopify you’re going to lose with a headless setup is product knowledge. E-commerce teams love Shopify. It’s simple, can be picked up in no time, and has tons of guides available to give brands a helping hand. With headless, however, you’re creating a custom product that’s new to you — and your agency partner.

Solution: there’s going to be way more custom training and documentation needed on the specifics of how your online store works.

Headless stores aren't always faster than Shopify

Now, let’s look at site speed, a factor that impacts a load of top-tier e-commerce metrics, and a common reason brands contemplate a headless e-commerce structure to begin with. We hate to say it, but we’re realizing that the idea of headless guaranteeing better site performance is a bit of a misconception.

We appreciate that on a standard Shopify setup, broadening your tech stack can slow your online store down as more apps get thrown into the mix. It’s why we recommend cutting any unnecessary ones when discussing how to speed up your Shopify store.

But with headless, you’ll still rely on third-party services that can damage your site speed just as badly. Just because your app is static on Netlify, doesn’t mean it’s fast.

Solution: ensure you benchmark a performance goal and create a performance strategy for front and back-end. You’ll have to take ownership of performance in terms of compression, combining and otherwise optimizing JS and CSS… of course, this can lead to more optimized builds, but only if done well.

Designing your own URL structures isn’t without SEO implications

There are also going to be SEO implications of going headless. We appreciate that breaking out of Shopify’s fixed URL structure and gaining full control of these can be a real benefit of headless. But the tradeoff is that it puts the onus on brands to design domains and slugs that search engines will take kindly to.

Solution: it’s fine to move away from the URL structures Shopify restricts you to. But from an SEO perspective, you need to know what you’re doing. If you don’t, there need to be some conclusive conversations with your agency partner early on in the project, to define exactly what URLs are being built.

With headless, your checkout is open to bots (hype brands, we’re looking at you)

Does your brand drop products in limited quantities and see fans around the world queue for hours to cop your latest releases? Then keep reading. The reality is, you’re going to be getting a lot of bots trying to grab your products, checking out much faster than your valuable, long-term customers could ever hope to.

Now, with a normal Shopify theme setup, you can activate ‘bot protection’ to prevent this. But Shopify have informed us that because this depends on signals from the theme layer to help detect bots, it won’t work with the Storefront API — which is what’s used to power headless builds. So this leaves you with no secret weapon, unless you build your own.

Solution: if you’re concerned your inventory is at risk of largely being sold to bots over live customers, you should either stick with a Shopify theme or independently build the ability to detect bots.

It's on you to control high-volume checkout requests

If you’re a high-traffic site, another pain-point is checkout throttling. Across busy periods, there’ll be nothing there to control the number of checkout requests that go into your store.

For instance, once a store approaches around 4000 checkouts per minute, new customers are entered into a queue. On a normal Shopify build, you’d relax knowing Shopify would be sorting this through a built-in queue mechanism that handles the throttle automatically. But, as you can probably guess by now, with headless, you’re on your own.

Now, we appreciate that not all brands are going to face flash sales. But in reality, a lot will experience some high-traffic moments that can really overload their systems. If you’re not equipped for these periods, your customers will be timed-out and met with a very basic error response that screams “broken website”.

Solution: if you’re expecting harsh spikes in traffic, you’re going to have to handle your own checkout queues. Specifically, you’ll need to build an error handler for checkout requests that then places customers into a queue.

You'll need to make sure your marketing emails are in the right locales

Our last point is about ensuring your customer email comms are in line with the same locales your customers are shopping in. With a headless architecture, you can use the CMS to store your content in different locales. But in your commerce layer (in this case being Shopify), you might be wondering how you translate your email communications in line with these?

Solution: firstly, you’ll need to manage all languages from a single email template. For example, order confirmation emails will include all language options. Then, during check-out, whichever language the customer is browsing in must be attached to the customer order object. This means, when you send an email, the template has conditional statements that automatically send it in this same language. Just like that! To show an example:

Headless risks and solutions, in short

There’s clearly a lot of complexities that arise with headless. When stacking up the pros and cons, we like to use the analogy of it being a bit like ‘building your own house’; if you’ve got the budget, the resource, the experience... you can make a real success of it. But brands mustn’t overlook all the lengthy considerations, meticulous planning, and fair bit of elbow grease it demands.

We hope this post helps you understand some of these complexities and gets you thinking about the solutions you might need to apply to your own headless build. If you’re considering implementing anything specific and would benefit from a bit more detail on these solutions, our team of headless Shopify specialists are always around.