That's what's behind headless e-commerce

The demands for a good experience when shopping online are getting higher and higher. Standard functions and a nice design alone won't impress anyone anymore. Responsiveness, i.e. usability on different devices, fast loading times and personalization are particularly important. Today's online-savvy customers want everything perfectly tailored to them, anytime and anywhere.

The ever-increasing demands mean that changes and additions to the web store also have to be made faster and faster. And it's precisely at this point that things get really interesting with headless e-commerce.

Frontend and backend are separated from each other

The big difference between headless and traditional e-commerce systems is the separation of frontend and backend. This brings with it the significant advantage that they can be (further) developed independently of each other.

If you were to compare the concept of Headless with the human anatomy, it would mean: The frontend is the body, the backend the head. Both have certain tasks and can perform them independently of each other.

The logics and processes of the head, for example, are completely irrelevant to the body. It has only one task: to look good. And it likes to look really good! 

The head, on the other hand, functions completely independently of the body's design decisions. Building blocks such as images, product descriptions, and prices are stored centrally, and the form in which they are ultimately displayed makes no difference to the back end.

In order for a web store to fulfill its purpose, it needs both, of course. With the body alone, there would be a UI design, but without information and without a buying process. With just the head alone, this would all be there, but not visible to users at all. In this respect, the head and body are then again dependent on each other. Nevertheless, the fact that the two don't have to take each other into account brings a lot of flexibility and many additional possibilities.

One head - different customer experiences

The fact that the head is only there for data and the body only for the external appearance means that both are completely interchangeable. A head can even play data on several bodies at the same time.

For example, place your head additionally on the body of a certain app, of other stores like Amazon or of voice assistants like Siri and Alexa.

You are also very flexible when it comes to devices with Headless. Since all backend data is stored in a central location, it can be played out with any Internet-enabled device. Whether it's a laptop, a cell phone or a smart fridge - every frontend simply fetches the data it needs from the backend via APIs.

In addition, headless e-commerce is perfect for personalization. You can effortlessly add new features that are individually tailored to users. Because all data is centralized, this works seamlessly.

Progressive Web Apps for higher loading speeds

When you think of headless, you can't miss the term "progressive web app (PWA)." PWAs form the web interface for e-commerce content and have features once reserved for native apps - including excellent performance.

For example, PWAs enable offline capability in the web browser. It works like this: as soon as a user visits an online store for the first time, the shopping cart, checkout, and every page accessed are loaded directly and stored in the device's local storage. As a result, the website achieves a significantly higher loading speed. This not only improves the user experience, but also leads to better search engine rankings.

Let's assume a user places a product in the shopping cart at your web store and gets into an elevator without an Internet connection to go up 30 floors. With a conventional web store, he would now have to wait for the doors to open again. But thanks to PWA and headless e-commerce, the user can continue the checkout process in the frontend during the ride - without any Internet connection at all. As soon as the connection is restored, the order is registered and processed in the backend as if nothing had happened.

Examples of headless e-commerce systems

A good example of a successful webshop with a headless system is the Butcher Shop The ASH. In this project we programmed the backend and admin dashboard with the Saleor framework, which we can highly recommend. Thanks to its flexibility, the webshop is a future-proof cornerstone for the restaurant chain The ASH to further expand its digital ecosystem.

We also worked with Saleor on Thömus' award-winning bike configurator. To integrate the complex logic of this 3D configurator into the existing webshop, a few special touches and the development of a custom API were necessary. The result is an entire digital experience with headless e-commerce at its core.

Seen in this light, headless technology is so much more than without a head. It makes webshops fit for the future for new challenges while leaving plenty of room for innovative designs.

The demands of online shoppers are becoming ever higher and standard functions are often no longer enough. In addition to a beautiful design, the main focus is on usability with different end devices. Programming a headless online store or CMS, on the other hand, can be quite tricky. Experience is an advantage!