To understand what headless e-commerce is, it’s helpful to know why it exists in the first place.
Throughout this century e-commerce has been increasingly significant. Especially in the last five years – culminating in 2020, where COVID-19 lockdowns drove more businesses online than ever before. We’re at a point now where a customer’s online experience is as important as their offline experience – perhaps even more so.
Brands spend large amounts of time and money making sure their offline stores are kept fresh and engaging – often redesigning every month, week, or even every day. The store design is always done with the customer in mind. A strong brand message is presented from the entrance to exit, and continual redesigns keep the brand feeling relevant in the mind of their customers.
If brands invest these efforts into their physical stores, and if online shopping is now as important as offline (if not more so), then they must invest them into their e-commerce store too. They must make the online equivalent of the brand experience that customers enjoy in the physical stores. This is where headless architecture comes in.
What is headless architecture?
Headless architecture is the separation of the front and back-ends of a store. Often referred to as ‘decoupling’. As a result, a number of different software can power a store – each of them specifically designed for the task they’re given. Ultimately creating an optimised, and more advanced, online shop.
Traditionally, e-commerce platforms were all-in-one affairs. The front and back-ends sat together on the same application, in a so-called ‘full-stack’ or ‘monolithic’ structure.
There are good reasons for why this was the case, mostly to do with simplicity. Shopify’s great strength lies in giving users everything they need all in one place. They can build a solid e-commerce store from scratch without knowing a single line of code. Its monolithic structure makes this possible. But when a solid store doesn’t cut it anymore, when brands need something extraordinary, this way of doing things is obsolete.
Because the trouble with a full-stack approach comes when you ask for more from your e-commerce platform. Shopify is a good all-rounder, but in certain areas, it simply can’t handle the very top-end. A headless Shopify store uses Shopify’s excellent back-end (the ‘body’), but the front-end (the bit the customer sees, the ‘head’ of the store) has been detached and placed in the hands of a more advanced system.
Contentful is a top-end CMS, capable of handling high definition media and multilingual translations. In other words, it’s capable of doing things the Shopify platform cannot.
Modern e-commerce stores need high-definition media – images, videos, animations, 3D modelling – to give customers memorable brand experiences that today’s market demands. Providing this on Shopify, therefore, requires some technical wizardry.
Contentful sits on the front-end of our Shopify Plus headless stores and is integrated into Shopify’s back-end with an API. This means Shopify can take care of the stuff it does best – inventory management, customer information, order histories – whilst Contentful focuses on the content. This is headless architecture at work.
Why go headless?
Besides those we’ve already alluded to, there’s a number of advantages to a headless store:
1. Performance
Separating the front and back-end means the teams working on each respective area can do so without impacting on the other. The development team has the freedom to choose the latest coding frameworks to develop the front-end, rather than being bound to the coding standard provided by the platform you use. We’ve seen that higher performances are achieved with frameworks like React, rather than with HTML and CSS.
2. Flexibility
With the day’s most advanced tools at their disposal, design and development teams working on headless are free to create a more varied experience for the customer.
Today, we shop on our phones, tablets and watches. We shop on Facebook, Instagram, Snapchat and TikTok. With voice recognition devices, interactive mirrors and augmented reality. Meeting all of these touchpoints is essential for the brands that want to get ahead in e-commerce. And doing so requires a level of flexibility that a monolithic structure simply doesn’t have.
Additionally, there’s always another technology edging its way over the horizon. Artificial Intelligence and Virtual Reality are both becoming more and more prominent, and before long will be points of sale. Headless architecture places e-commerce stores in the best position to meet these future developments, rather than get left behind.
3. Innovation
With the freedom to use any technology on the front-end of your platform, you can easily adopt the latest development trends. This will subsequently have a positive impact on your developers, giving them an improved workflow.
4. Multilingual stores
As we’ve explained in more detail elsewhere, multilingual stores are a common reason for brands converting to headless. Shopify’s lingual limitations are an issue for businesses selling across international markets, and the two standard ‘solutions’ are both sub-par. Headless swerves the issue by taking translation out of Shopify’s hands and delegating it to a superior CMS. Read more about the whole issue here.
Pros and cons of headless e-commerce
We’ve covered a lot of the benefits of headless architecture above, but as a quick round-up, we’ve listed them below. Whilst reading, it’s important to keep in mind that traditional e-commerce architecture cannot achieve any of them. These are not only the benefits of headless architecture but the reasons that distinguish it from full-stack development.
1. It uses the best-in-class software
Headless separates all the tasks for running an e-commerce store, and developers can designate them to specific softwares that are tailor-made for that role.
2. Flexible customer experience
From browsing on their laptop to scrolling through Instagram, customers can reach a checkout through a multitude of channels and receive a consistent brand experience whilst doing so.
3. Multi-channel content from one CMS
It keeps things simple, keeping all content in one place and dispersing it across all points of contact.
4. Future-focused
New technologies and trends arrive all the time. Headless stores can incorporate them quickly, keeping brands at the cutting edge.
5. Multiple languages and currencies
International markets are there for the taking as headless stores can add new languages and currencies with (relative) ease.
6. Faster sites and better SEO
No matter how much functionality they have. No matter how many languages and 3D models. Headless stores stay fast, which subsequently improves conversion and SEO rankings.
On the flip side, certain strengths of a monolithic platform are lost when converting to headless. Some of these strengths are important to many brands and many projects, and could therefore be reasons not to go headless.
Development time and expertise. Headless is not something a novice will be able to accomplish. Advanced understanding of coding is a prerequisite, usually requiring the time and skill of a professional developer. Both of which cost money.
“Plug and play” / “click and drag”. Finding a new application and simply dragging it onto an e-commerce store becomes impossible with headless. For those brands who like to have complete control over their store, and enjoy building it themselves using the blocks provided in Shopify’s app store, headless may not be the way to go.
Theme templates. With the front-end no longer attached to the back, site themes can no longer be used after converting to headless architecture. This means stores need specialised design, which again often leads to the services of a professional.