Read time: 6 min

Headless in e-commerce. What do you need to know?

#headless #ecommerce #CMS

Headless is software that allows you to display content from your online shop on any device and truly enter the omnichannel. How is this possible? How does it actually work? And isn't it just another trendy word with little meaning behind it? We can answer the last question straight away: Headless is a powerful tool that will free you from the constraints of the devices you appear on. As for the other questions, we answer them further on.

From this article you will learn:
- What is Headless for e-commerce?
- Why is it worth investing in?
- Who has already decided to implement it?

  1. Traditional online shop vs. shop based on Headless

    Let's take a step back and remind ourselves what a typical online shop consists of:

    1. The database, which holds all the product information, names, prices, descriptions, photos, instructions, specifications, etc.
    2. The backend, which is the part that retrieves and processes data from the database.
    3. Frontend, the part that allows us to see the effects of the backend, the messages for the end user, graphically designed and friendly. In simplest terms: what we see.

    How then does traditional e-commerce differ from that using Headless e-commerce? In short, in a traditional store, the three elements: database, backend and frontend, are fused together. In headless e-commerce, the frontend, i.e. the data presentation layer, is separated from the other ones, and only communicated with them via an API.

    The API here is the link that transfers the data from the database and backend to the frontend. Thanks to the fact that the backend and frontend aren't permanently connected, it doesn't matter on which device the content is displayed (or even read out with text-to-speech!). This means that an action using the API frees you from the constraints of the end devices on which you publish.

    Let's provide an example: when you press the ‘Buy Now’ button on your smartphone, the presentation layer (the frontend) sends a message via an API to the app (the backend), telling it that it's time to process the order. The backend retrieves information from the database about the price of the product, shipping time, etc. It then uses the API to send the information to the frontend to show you a summary of your order. If you choose external payment, e.g. by a bank or payment services such as przelewy24.pl, another API will redirect you to the payment. And all this in a split second.

  2. Why use Headless for e-commerce?

    Moving from a traditional CMS to Headless is a challenging change, especially in e-commerce. So why should you invest funds, team time and other resources of your business in such a process?

    1. Headless e-commerce is futureproof and ready for the IoT era. By separating the layer of information from the layer of its presentation, it doesn't matter what target device your content appears on. It could be a POS screen in a desktop showroom, it could be a smartwatch screen, or it could be audio in a smart speaker. Headless even makes your business ready for devices that don't yet exist, letting you prepare for the future.

    2. This is the real key to an omnichannel strategy. This buzzword has been trending in e-commerce for a good few years now. Headless gives you the opportunity to fit into this trend and present your content on different devices. It increases the possibilities of scaling and easy addition of new touchpoints.

    3. Headless also facilitates integration with applications and external tools. An API allows any platform or system equipped with it to contact each other. For you, it means that you can introduce newer and newer payment and booking systems to your service and continuously raise your customer service standards.

    4. At the same time, Headless means better security for your website. The separation of the frontend layer from the backend is an additional barrier to accessing user data.

    5. Such a system enables you to speed up your website. You have 0.05 seconds to convince the user that your e-commerce site is what they’re looking for. Site speed really matters – if a potential customer has to wait for your site to load, they'll move on to something else. Meanwhile, headless allows you to make it load fast (for example, using mechanisms that reload content only when it's needed).

    6. Support personalisation. One of the best ways to increase user engagement nowadays is to provide users with content tailored exclusively to them. If you support Headless with personalisation engines, you can create a powerful tool based on segmentation and content that dynamically adapts to a potential customer's interests (some headless CMSs, like Prepr, have built-in personalisation tools; but there are also tools like Conscia that allow you to add personalisation capabilities to headless sites that didn't originally have it).

    7. Headless empowers your marketing team by giving them the freedom to experiment and creating space for agile marketing. This is achieved primarily by reducing the time it takes to publish campaigns or new content. For example, Headless can help you test which devices will be the most effective outreach channel, without the need to separately format content for each.

  3. Examples of companies using Headless

    You already know what Headless can bring to e-commerce and why you should opt for it. Now, find out examples of top brands that have implemented it into their business.

    Marketplace

    Amazon
    The online sales giant allows customers to place orders in a variety of ways. This is made possible through integration with Echo (smart speakers from Amazon) so that purchases can be made using voice commands.

    Etsy
    Also uses an API-based architecture. This supports multiple devices, and efficiently eliminates server-side performance issues.

    Direct-to-Consumer

    Toyota
    Toyota has introduced the Headless system to enable the integration of legacy systems (obsolete, yet necessarily still in use) with IoT (Internet of Things) devices. In doing so, it enables the transition from an online experience in the showroom to an offline one.

    Nike
    Nike wanted a mobile-first approach. Therefore, it decided to combine Node.js BFF (backend for the frontend) with React SPA (Single Page Application created in React). This allowed Nike to take over some of Adidas's customers.

    Sony
    The manufacturer combined OMS (Order Management System) with marketplaces. It uses IoT and chatbots in both B2B and B2C commerce to create new brand communication experiences.

  4. Summary

    If we had to boil Headless in e-commerce down to a few buzzwords, we'd mention future-proofing, freedom from technological constraints and omnichannel. This holds great promise for you. But before you can take advantage of Headless, you need to migrate your current system to a new one. It’s going to be a challenge, but one achievable in a finite amount of time. We will write about this in a separate article.

has changed to

New name, logo, and wholly new website. But our great team is still here, and we’re ready to roll!

Let’s go!

Our new website