To understand what headless e-commerce is, it is helpful to know why it exists in the first place.
Over the course of this century, e-commerce has become increasingly important. Especially in the past five years – through 2020, when COVID-19 bans drove more businesses online than ever before. We have come to a point where a customer’s online experience is just as important as the offline experience – maybe even more important.
Brands spend a lot of time and money making sure their offline stores stay fresh and engaging – often they are redesigned 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 entrance to exit, and continuous redesigns make the brand feel relevant to customers.
If brands are investing that effort in their physical stores, and online shopping is now as important as offline shopping (if not more), they need to invest it in their ecommerce stores too. You need to create the online equivalent of the branded experience that customers enjoy in physical stores. This is where headless architecture comes into play.
What is headless architecture?
Headless architecture is the separation of the front and back of a business. Often referred to as “decoupling”. As a result, a number of different software can power a business – each one designed specifically for the task they are assigned to. Ultimately, a streamlined and more advanced online store will be created.
Ecommerce platforms have traditionally been all-in-one affairs. The front and rear ends sat together in the same application, in what is called a “full-stack” or “monolithic” structure.
There are good reasons why this was the case, mostly for the sake of simplicity. Shopify’s great strength is in bringing users everything they need in one place. You can build a solid ecommerce store from scratch without knowing a single line of code. Its monolithic structure makes this possible. But when a solid business no longer makes it, when brands need something extraordinary, that way of doing things is obsolete.
Because the problem with a full-stack approach arises when you demand more from your ecommerce platform. Shopify is a good all-rounder, but it just can’t handle the top end in certain areas. A headless Shopify store uses Shopify’s superb back-end (the “body”), but the front-end (the piece the customer sees, the “head” of the store) has been taken down and into the hands of a more advanced one System.
eGuide: Using Smart Data to Achieve Greater Marketing ROI
2 out of 3 top marketers admit that data-driven decisions are beyond gut instinct. Unleash the real potential of your marketing with smart data to accelerate business growth!
Get Your Free Copy!
Contentful is a top-end CMS that can handle high resolution media and multilingual translations. In other words, it is capable of doing things that the Shopify platform cannot.
Modern e-commerce businesses require high-definition media – images, videos, animations, 3D modeling – to deliver unforgettable brand experiences to customers that meet today’s market demands. Deployment in Shopify therefore requires some technical knowledge.
Contentful is located in the front end of our Shopify Plus headless stores and is integrated into the Shopify back end with an API. This means Shopify can take care of the things it does best – inventory management, customer info, order histories – while Contentful focuses on the content. This is headless architecture at work.
Why go headless?
In addition to the ones we’ve already pointed out, a headless business has a number of advantages:
By separating the front and back end, the teams working in the respective areas can do so without affecting the other. The development team has the freedom to choose the latest coding frameworks to develop the front end instead of being tied to the coding standard of the platform you are using. We have seen that higher performance is achieved with frameworks like React, rather than HTML and CSS.
With the most advanced tools of the day, design and development teams working on headless can provide 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 speech recognition devices, interactive mirrors and augmented reality. Reaching all of these touchpoints is vital for the brands that want to move forward in e-commerce. This requires a level of flexibility that a monolithic structure simply does not have.
In addition, there is always another technology that is over the horizon. Artificial intelligence and virtual reality are becoming more and more important and will soon be sales outlets. Thanks to the headless architecture, e-commerce stores are in the best position to cope with these future developments rather than being left behind.
With the freedom to use any technology in the front-end of your platform, you can easily adopt the latest development trends. This then has a positive effect on your developers and offers them an improved workflow.
4. Multilingual shops
As we’ve explained in more detail elsewhere, multilingual stores are a common reason for brands to switch to headless. Shopify’s language restrictions are a problem for companies selling in international markets, and the two off-the-shelf solutions are both below average. Headless bypasses the problem by taking the translation out of Shopify’s hands and delegating it to a superior CMS. Read more about the whole topic here.
Advantages and disadvantages of headless e-commerce
We’ve covered many of the advantages of the headless architecture above, but as a quick summary we’ve included them below. As you read, note that traditional ecommerce architecture cannot achieve any of these. Not only are these the benefits of the headless architecture, but the reasons that set it apart from full-stack development.
1. Best in class software is used
Headless separates all of the tasks of running an e-commerce business, and developers can assign them to specific software programs tailored for that role.
2. Flexible customer experience
From surfing on their laptop to scrolling through Instagram, customers can reach a checkout via a variety of channels and get a unified brand experience in the process.
3. Multi-channel content from a CMS
It keeps things simple, keeps all content in one place and distributes it across all touchpoints.
New technologies and trends are constantly being added. Headless stores can integrate them quickly and keep brands up to date.
5. Multiple languages and currencies
International markets are available as headless businesses can (relatively) easily add new languages and currencies.
6. Faster websites and better search engine optimization
No matter how much functionality they have. No matter how many languages and 3D models. Headless stores stay fast, which improves conversion and SEO rankings.
On the other hand, certain strengths of a monolithic platform are lost when it is switched to headless. Some of these strengths are important to many brands and many projects, so they could be reasons not to go mad.
- Development time and expertise. There is nothing headless that a beginner can achieve. Advanced understanding of coding is a requirement that usually requires the time and skills of a professional developer. Both cost money.
- “Plug and Play” / “Click and Drag”. With headless, it is impossible to find a new application and just drag it into an ecommerce store. For brands who want complete control of their business and want to enjoy building it themselves using the blocks provided on the Shopify app store, headless may not be the way to go.
- Themed templates. Because the front end is no longer attached to the back, site themes cannot be used after converting to a headless architecture. This means that stores need a special design, which in turn often leads to the services of a professional.
Examples of headless Shopify stores
Finally, let’s leave you with a few examples of headless stores we’ve built on Shopify.
- STOX – Compression running socks from Amsterdam. Use multiple currencies and improve the speed of your website.
- Miista – A multilingual, comprehensive brand experience for the East London fashion brand.
- Festival Amsterdam – Headless B2B and B2C stores for the Dutch furniture design brand with augmented reality functions to merge offline and online stores.
- Easywalker – High quality animations and interactive products.