Competition for custom is fiercer than ever. Every pound spent online is contested by tens or even hundreds of brands. In order to beat that competition, and secure ongoing custom, many brands are turning to ‘headless’ commerce. Want to know more? Then keep reading…
What is headless commerce?
Headless commerce is an e-commerce store where the customer-facing part of the store (front-end or the “head”) is separate from the systems and tools used to run the business in the background (back-end). In simple terms, headless commerce is where the front-end and back-end are independent of each other. It’s this that gives merchants more flexibility when creating customer experiences.
How does headless commerce work?
The secret to headless commerce is the API (application program interface). An API is what connects the front-end and back-end, sending information back and forth in real-time.
With headless shopfronts, you can leverage multiple back-end systems depending on your business needs. These systems include:
- Content management system (CMS).
- Progressive web app (PWA).
- Customer relationship management (CRM).
-
Digital experience platform (DXP).
As a result, you can leverage multiple tools at the back end, as opposed to being limited to one back end platform.
Conversely, you can utilise multiple front end systems (such as POS, mobile apps, marketplaces etc) and the API will seamlessly send information from those systems (such as customer interactions) through to the back end systems.
As you can see, a headless setup then, provides a ferocious amount of flexibility and choice.
Instead of being restricted to a single homogenous front and back end platform, you can create the perfect ‘stack’ of front and back end apps to meet your exact requirements.
What are the benefits of headless commerce?
Headless commerce offers merchants lots of great opportunities, and it comes with a lot of significant benefits over more traditional e-commerce setups, such as…
1. Faster to market
With a headless Shopify website, customer-facing (front-end) work can be done separately without having to wait for back-end work, and vice versa.
For example, this means your marketing team is able to create and execute marketing campaigns faster, amending content layout and product placement without affecting back-end processes, which means less time from concept to execution.
Take this thinking further, and you can see that a headless setup also reduces the chances of things breaking. A front-end change won’t adversely affect a backend system (and vice versa).
2. Increased speed
It’s no secret that page speed is one of the highest factors affecting bounce rate, but with headless, site speed isn’t a problem.
Boasting sub-second load times even on mobile, headless commerce is one way you can tackle the problem of speed directly without having to compromise on design.
In other words, with a headless Shopify store you really can have it all. Gorgeous, sumptuous design and media and a blazingly fast user experience.
As we’ve written previously, site speed is an important ranking factor for search engines like Google. So, a headless setup can have a beneficial impact upon your SEO, too.
3. More control
The powerful APIs that act as the ‘spinal cord’ of a headless website provide you with an immense amount of control. To be more precise, a headless setup will allow you to integrate your existing systems (ERP, PIM, IS etc) and design and build customer experiences using the programming language of your choice.
4. Even more personalisation
Headless Shopify stores give you the ability to split test what you want to build so you can create customer experiences that are more likely to convert.
Headless commerce allows you to collect and share data across multiple customer touchpoints. For example, if a customer creates an account on your e-commerce store and then continues their shopping journey on their smartwatch, the headless architecture lets you sync their data across the two devices and provide a personalised, seamless shopping experience.
With 80% of consumers admitting they are more likely to make a purchase when brands offer personalised experiences, going headless gives you the tools you need to keep up with ever-changing customer acquisition trends.
5. Makes expansion easier
Another benefit of headless is that its open architecture makes it easier to add expansion stores, which come in handy for brands looking to expand into new international markets.
If you have a lot of reusable data in the back-end, such as a large product catalogue, content, etc, but want to change pricing and language for different regions, you can configure front-ends for each.
6. Customisable URLs for improved SEO
The way your URLs are structured on your website plays a significant role in your ranking position in search engines like Google.
The higher you rank, the more eyes on your store.
In order to signal to Google that your product page is relevant to a customer’s search, you need your product page URLs to be flexible enough to accommodate detailed product descriptions.
This is where headless comes in really handy. When you build site pages within a headless architecture, it gives you more control over your URL structure, so you get more out of your SEO returns.
Is headless commerce for every e-commerce business?
In short, no. A headless Shopify store is not a good fit for every e-commerce business.
If you’re doing well using traditional e-commerce architecture, then it might not be worth the money to invest in headless. It depends on your long-term goals and the current challenges your business is facing.
If you’re unsure, we suggest you think about:
-
Project costs: headless commerce can cost anywhere from £40,000 to £400,000, plus other annual fees, depending on the functionality, tools, and level of customisation you require. Keep in mind headless is an enormous project, so if you want to keep costs low, headless probably isn’t for you.
-
Ownership costs: maintaining a headless site requires a deep developer skill set, which means you’ll need to hire an external agency.
-
Shopify app ecosystem: with headless, you still have access to Shopify’s app store, but it’s not as simple as ‘plug-and-play’ when it comes to installation. These apps need to have APIs for the features you want to use, which again requires development work at an additional cost.
- Shopify theme: if you’re happy with your Shopify theme or template and aren’t looking for further customisation, again, headless probably isn’t worth it.
Headless vs traditional Shopify websites
Headless commerce ultimately provides merchants with more tools to deliver a better customer experience than traditional solutions. The separation of your front-end and back-end saves you time since changes to one can be made without disrupting the other.
This independence allows you to test what works best to convert more customers. Most commonly you can push content to the front-end through an existing CMS instead of the commerce platform itself. That way, you can alter on-site content without having to go through the back-end.
If you wanted to sum up the benefits of headless commerce in a single sentence, it’s that it offers the ultimate in flexibility.
So, you’ve decided headless is for you? Here’s what you need to do next if you’re on Shopify Plus:
-
Make a list of the apps your e-commerce business relies on that have APIs and can communicate with the Shopify Storefront API. Then, determine which apps you absolutely need on your headless site (be scrupulous with your selection, get rid of the nice-to-haves).
-
Then do some thorough research and testing on your Shopify Plus store, e.g. what your initial Lighthouse score is and what might affect it. This provides you with a benchmark to help quantify the benefits of headless and evaluate its success once launched.
-
Given the investment that can be required for headless websites, we’d also recommend researching your current site’s conversion rate and revenue. This can help you assess whether a headless store could be a worthwhile investment or not.
- Finally, decide the route to headless you’d like to go down. Option 1: do it yourself, option 2: build it with an agency or option 3: use a frontend-as-a-service provider.
Brands that have gone headless on Shopify
A whole host of major brands have made the leap to a headless Shopify store. As you’ll see from the examples below, a headless Shopify store allows them to provide a lightning fast, content-rich experience to their customers.
Furthermore, the flexibility of headless commerce and the ability to rapidly A/B test campaigns and website changes has turned these brands into revenue-generating powerhouses.
1. KOTN
Exceptionally quick, and offering a content-rich experience, headless has enabled KOTN to fulfil their mission of producing ethical, sustainable clothing.
2. Allbirds
New Zealand footwear brand Allbirds uses a Shopify-powered headless setup to create a series of international e-commerce stores that are rapid, scalable and very conversion focused.
3. ILIA
ILIA’s website shows the extent to which a headless setup allows you to use myriad systems. E-commerce functionality is provided by Shopify, whilst Contentful provides the CMS. Numerous JavaScript frameworks allow for a highly-interactive and appealing front end.
4. Seedlip
Non-alcoholic beverage brand Seedlip has taken the plunge into the world of headless commerce to provide a consistent brand experience regardless of users’ devices.
5. Chilly’s
Sustainable bottle company Chilly’s has leveraged a headless setup to provide an ultra-fast browsing experience for would-be and returning customers.
The site’s tech stack includes an interesting headless CMS which clearly allows the Chilly’s marketing team to provide an immersive, content-rich experience at pace.
Ready to go headless?
If you’re a scaling brand on Shopify Plus, but want to reap the benefits of headless commerce then speak to Velstar today.
We can help you assess whether a headless setup is right for your brand and advise you on the best way forward.
