You have probably seen the term ‘headless’ being thrown around over the past couple of years. It’s been a particularly virulent conversation in the direct-to-consumer space, and in the past 12 months, the number of businesses approaching Eastside Co to discuss building a headless solution on Shopify has certainly increased. In order to understand headless, there are a couple of questions we need to answer.
If you'd prefer to listen to the blog instead of read it, click below.
Shopify SEO audit for your online store TODAY ⬇What is Headless for Shopify?
If you are not 100% sure what a headless Shopify website is, don’t worry. Everyone is throwing the phrase around, but I promise you, most people don’t know the ins and outs, and I’m definitely not going to claim to be an expert.
(At this point, you may be questioning why I’m writing a post about headless if I'm not an expert. Good point. Hopefully, I’ll make that clear before the end of the article.)
In the most simple terms, headless architecture is where you ‘decouple’ the front-end and back-end systems, using APIs to connect the two systems and pass relevant data between them.
Still confused?
If we look at a native Shopify build, the place where the content is stored and displayed is all one system. With a headless Shopify build, you are separating content storage from the presentation layer where the content is displayed.
By separating these two elements, the front-end display layer of your Shopify site is no longer restricted by the functionality and architecture of your back-end system.
In fact, the front-end of a headless solution may not even be a website. It could be a native mobile app or a POS (point of sale) system. In terms of Shopify, thinking of the presentation layer (the front end) as a sales channel is probably not far from the truth.
Even with a Shopify native build, you can think of the ‘online store’ as the front end and the Shopify system as the back end, a distinction that Shopify has made much more clear recently.
So a headless Shopify website is just the explicit decision to avoid building the front end of your solution directly into the back-end.
Hopefully, that’s clear now, but it still doesn’t explain why people might choose to take this route rather than a traditional native Shopify theme.
What Are The Benefits of Headless Commerce for Shopify?
Before I get into some of the reasons that people typically choose a headless solution, it’s worth clearing something up. Many of the benefits that I will talk about are not always inherent in a headless build, but rather are the result of the freedom to choose specific technical approaches that result in specific benefits. (I'll point these out to you as we go, but what’s important to know is you won’t get all of the benefits listed below just because you go headless. The execution will still make a big difference.)
1 - Site Speed
Lightning-fast site speed and headless builds seem to go hand in hand, with site speed improvements often cited as a major benefit of headless. This is, however, one of the instances where your site is not faster because you have chosen headless, it’s faster because by separating your front-end, you have the option to make it statically generated. This means it doesn’t have to do any heavy lifting or calculations when you are serving a webpage.
I have some bad news though. If your main reason for going headless is site speed alone, it’s probably not a good enough reason. Like any cap-ex commitment, you need to do your due diligence. Your site speed will of course have an effect on your customer experience, and in most cases, a headless approach will deliver a faster site than a native Shopify build, but if you were to do a cost-benefit analysis, I am not sure you will always gain more from the increased speeds than the cost of implementing and maintaining a headless tech stack.
2 - CMS Flexibility
Historically, one of the biggest reasons that people opted for a headless build over a native Shopify theme was the restrictions that were inherent in the Shopify CMS. Shopify online store 1.0 was a template-driven system. The only flexibility in content management came when ‘sections’ (modular content blocks) were introduced to the homepage section of your website. For a long time, almost everything else had to be built into the template, hacked into theme settings or achieved via custom fields. Even with all of this, each template outside of the Shopify homepage was largely fixed and required developer intervention if you wanted to fundamentally change a template, add a new content section or indeed build a unique landing page.
With a headless solution and the ability to choose your own CMS e.g. Sanity or Contentful, you could create a CMS that did whatever you wanted it to, and build the pages you wanted in a much more modular way than ever before.
This all changed when Shopify released online store 2.0. In essence, this was the release of sitewide sections (previously confined to the homepage). So now, instead of being stuck with rigid templates, you can build a whole host of content modules that can be used across any page, in any order you like. This has made content editing much quicker and given internal teams much more flexibility to edit existing content and also build new landing pages without developer intervention.
At Shopify Unite London 2022, an agency that had typically focussed on headless builds to achieve this level of flexibility for their clients were actually finding that more and more of their clients were opting to move back to Shopify’s native theme because it had all of the flexibility they needed, without the need to maintain a complex and often expensive tech stack.
3 - Creative & Front-End Flexibility and Freedom
This point is somewhat connected to the CMS flexibility but does differ. A headless approach means you get unlimited flexibility on the front-end. That means your designer can go wild with little to no repercussions - however, that’s not always a good thing.
Complete creative freedom to make your presentation layer look and work however you want sounds incredibly attractive at first glance, but when you dig deeper, it can present some serious issues for your users.
An ecommerce website is fundamentally made up of 4 key areas:
- homepage
- collection/category page
- product page
- checkout
The accepted functionality and behaviour of these pages are ingrained in your users thanks to their familiarity with shopping online over a period of many years. Your users have clear expectations from an ecommerce experience, and forcing them to re-learn known behaviours can be a major roadblock.
If you are a very large operation with an incredibly loyal user base, your customers may take the time to figure things out, but for the most part, they want an experience that feels simple and familiar.
When considering complete creative freedom as a benefit, it’s worth asking yourself how far you can push ecommerce site structure and design before it breaks the customer experience. If what you need is a well-designed and robust ecommerce experience, this is completely possible with a Shopify native theme.
4 - The Ability to Serve Multiple Heads
This may be more applicable to traditional platforms where serving additional sales channels from your main, non-headless storefront is generally more difficult. However, Shopify makes it quite straightforward to have multiple sales channels outside of your main online store.
Is Headless Commerce The Future for Shopify?
The answer is that headless is not a silver bullet that will solve all of your problems. The reasons people chose a headless Shopify solution 2 years ago are not the same reasons they should choose a headless solution today. In fact, many of the reasons people chose headless in the past are the same reasons they are choosing to move back to a native Shopify theme utilising online store 2.0.
For all of the benefits of headless, you have to consider that the initial investment and ongoing maintenance costs of a headless stack are always going to be higher than a native Shopify build. You need to make sure that the total cost of ownership is going to be viable for your specific business in the long run, and that you have the infrastructure to support the technology requirements that it comes with. Take a look at some of the development service options that Eastside Co can deliver.
Headless is becoming more viable with Shopify. With the release of Shopify’s Hydrogen framework, it’s also a good bet that the Shopify app ecosystem will be much easier to integrate into a headless solution meaning you get the benefit of some truly phenomenal tech partners without having to build custom integrations with each one, but this may still be some time off.
When Does Headless Make Sense for Your Shopify Store?
If you are looking for ultimate flexibility, a custom CMS, lightning fast speeds and the ability to support multiple outputs or heads, then headless might be a good solution in the long run, but if you are doing it just for speed or flexibility, there may be better options available.
If however, your Shopify store is going to be part of a wider site or platform that is already headless, there is a requirement to have a completely custom URL structure, or you are dealing with a non-traditional ecommerce experience, headless could very well be the ticket.
If you are considering whether headless commerce is the right solution for you and want an objective view, get in touch and chat with our technical team.