To understand what headless ecommerce is, it helps to know why it exists in the first place.
Throughout this century, electronic commerce has been increasingly important. Particularly over the past five years – culminating in 2020, where COVID-19 lockdowns have driven more businesses online than ever before. We are now at a point where a customer’s online experience is as important as their offline experience – maybe even more so.
Brands spend a lot of time and money making sure their offline stores stay fresh and attractive – they are often redesigned every month, week, or even every day. The design of the store is always done with the customer in mind. A strong brand message is presented from entry to exit, and constant redesigns make the brand feel relevant in the minds of its customers.
If brands are investing these efforts in their physical stores, and if online shopping is now as important as offline (if not more), they should also invest it in their e-commerce store. They need to make the online equivalent of the branded experience that customers get in physical stores. This is where headless architecture comes in.
What is Headless Architecture?
Headless architecture is the separation between the front and the back of a store. Often referred to as « decoupling ». As a result, a number of different software can power a store, each of which is specifically designed for the task at hand. Ultimately, creating an optimized and more advanced online store.
Traditionally, e-commerce platforms have been an all-in-one business. The front and rear were seated together on the same application, in a so-called « full-stack » or « monolithic » structure.
There are good reasons why this was the case, mainly for the sake of simplicity. The great strength of Shopify lies in providing users with everything they need in one place. They 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 store doesn’t cut it anymore, 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 in some areas it just can’t handle the very high end. A Headless Shopify store uses Shopify’s excellent back-end (the « body »), but the front-end (the little that the customer sees, the « head » of the store) has been detached and placed in the hands of a more advanced system.
eGuide: How to Use Smart Data to Deliver Higher Marketing Return on Investment
2 in 3 marketers admit that data-driven decisions beat instinct. Unlock the true potential of your marketing with smart data to accelerate your business growth!
Contentful is a high-end CMS, capable of handling high definition media and multilingual translations. In other words, it is capable of doing things that the Shopify platform cannot.
Modern e-commerce stores need high-definition media – images, videos, animations, 3D modeling – to provide customers with the 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 the back-end of Shopify with an API. This means Shopify can take care of what it does best – inventory management, customer information, order history – while Contentful focuses on content. It’s headless architecture at work.
Why become headless?
Besides those we have already alluded to, there are a number of advantages to a headless store:
Separating the front and back end means that teams working on each respective area can do so without impacting the other. The development team has the freedom to choose the latest coding frameworks to develop the front-end, rather than being tied to the coding standard provided by the platform you use. 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 at their disposal, design and development teams working on headless are free to create a more varied experience for the customer.
Today we buy our phones, tablets and watches. We buy on Facebook, Instagram, Snapchat and TikTok. With voice recognition devices, interactive mirrors and augmented reality. Meeting all of these touchpoints is essential for brands that want to advance in e-commerce. And that requires a level of flexibility that a monolithic structure just doesn’t have.
Plus, there’s always another technology looming on the horizon. Artificial intelligence and virtual reality are becoming more and more important and will soon be points of sale. The Headless Architecture puts e-commerce stores in the best position to deal with these future developments, rather than being left behind.
With the freedom to use any technology on the front-end of your platform, you can easily embrace the latest development trends. This will subsequently have a positive impact on your developers, giving them an improved workflow.
4. Multilingual stores
Like us explained in more detail elsewhere, multilingual stores are a common reason brands are converting to headless. Shopify’s language limitations are a problem for businesses selling to international markets, and the two standard « solutions » are both poor. Headless avoids the problem by taking the translation out of Shopify’s hands and delegating it to a higher CMS. Learn more about the whole issue here.
Pros and Cons of Headless Ecommerce
We’ve covered a lot of the benefits of Headless Architecture above, but in summary we’ve listed them below. When reading, it is important to keep in mind that traditional e-commerce architecture cannot reach them. These are not just the advantages of the headless architecture, but the reasons that distinguish it from full-stack development.
1. It uses the best software in its class
Headless separates all the tasks of running an e-commerce store, and developers can designate them for specific software tailored for that role.
2. Flexible customer experience
From browsing on their laptops to scrolling through Instagram, customers can access a checkout through a multitude of channels and enjoy a consistent brand experience.
3. Multichannel content of a CMS
It keeps things simple, keeping all content in one place and spreading it across all touchpoints.
4. Focused on the future
New technologies and trends are coming all the time. Headless stores can integrate them quickly, keeping brands on the cutting edge of technology.
5. Multiple languages and currencies
International markets are here for the catch, as headless stores can add new languages and currencies with (relative) ease.
6. Faster sites and better SEO
It doesn’t matter how much functionality they have. No matter how many languages and 3D models there are. Headless stores stay fast which in turn improves conversion and SEO rankings.
On the other hand, some strengths of a monolithic platform are lost when converting to headless. Some of these strengths are important for many brands and projects, and so could be reasons not to lose your mind.
- Development time and expertise. Headless is not something a novice will be able to accomplish. A thorough understanding of coding is a prerequisite, usually requiring the time and skills of a professional developer. Both cost money.
- « Plug and play » / « click and drag ». Finding a new app and simply dragging it onto an e-commerce store becomes impossible with headless. For brands who like to have complete control over their store and like to create it themselves using the blocks provided in the Shopify App Store, headless may not be the solution.
- Theme templates. Because the front end is no longer attached to the back, site themes can no longer be used after converting to headless architecture. This means that stores need a specialized design, which often again leads to the services of a professional.
Examples of Headless Shopify stores
Finally, we’ll leave you with a few examples of the headless stores we’ve created on Shopify.
- STOX – Amsterdam compression running socks. Leverage multiple currencies and improve site speed.
- Miista – An immersive, multilingual brand experience for the East London fashion brand.
- Fest Amsterdam – Headless B2B and B2C stores for the Dutch furniture design brand, with augmented reality features to merge offline and online stores.
- Easywalker – High quality animation and interactive products.