Headless Commerce: explained in 5 minutes

You've probably heard of headless commerce. It is one of the most discussed and least understood buzzwords in e-commerce. To clear things up a bit, this blog will explain the main elements of a headless commerce system. Plus, you'll see the benefits and considerations for choosing headless.

First, what is headless commerce?

Explained in its simplest form, headless commerce means a separation between the front-end and the back-end of an ecommerce solution. By choosing headless commerce, you have the freedom to put together a best-of-breed solution that can provide a unique user experience.

To understand the concept of headless, it is important to understand the difference between front-end and back-end.

Front-end: The front-end is the customer facing 'digital shop', also called the presentation layer. This is not just a website. Nowadays it can go as far as social media, mobile apps and the billions of devices we use in the Internet of Things (IoT). Think for example of in-store screens and voice technology.

Back-end: All systems, processes and tools that run in the background to handle processes and make sure your business runs smoothly. These systems help you with activities such as order management, product management, fulfillment, integrations, data storage and so on.

If you are in e-commerce, you know that keeping up with emerging trends is not easy. COVID-19 only accelerates this, the market is evolving even faster. In a traditional e-commerce system, creating new experiences can require updates to both the front and back-end system. This can cause even small projects to become huge headaches.

One feature of headless is the use of APIs. The front-end and back-end communicate with each other through APIs, as do the back-end systems. Separating the front-end and back-end can provide a faster, customisable and consistent shopping experience. The back-end still performs all the crucial functions of an e-commerce solution without being dependent on a front-end (head). In addition, the front-end takes care of offering an optimal user experience, without being dependent on a back-end.

Where traditional e-commerce platforms can be restrictive with design and functionality, headless gives you more freedom to customise your front-end or "presentation layer". You can create a beautiful, memorable shopping experience - while keeping your existing back-end intact.

What are the benefits of headless commerce?

Having the two sides of an e-commerce system working as separate systems has several benefits, including:

Pages load in milliseconds, increasing mobile conversion

Pages in a headless structure no longer depend on immediate server-side input when you visit them. This means that a page has to connect less often and is ready when the visitor arrives. This results in a huge improvement in loading times, which your visitors will really appreciate. And not only visitors: also search engines like Google appreciate faster web shops. Because Google wants people to have the most relevant and best experience after using Google, fast web shops get a higher position in the search results.

A fully flexible/adaptable front end of your webshop

The commerce structures as they exist in current systems no longer apply. Adding a product to a shopping cart, for example, is done entirely via APIs and could even be done from a blog page. Headless architecture gives you the flexibility to choose how you want to build your front-end for your sales channels, as opposed to only using the front-end technology provided by your commerce or CMS platform.

Flexibility to set up your content management or CMS the way you want it

A headless solution can consist of a best of breed solution of systems specialised in their own functions (e.g., Order Management, CMS, Search, Payment, Customers, PIM, Media Management). The specialised backends have APIs that allow the front-end channel to hook in and provide the customer experience required for that channel. In the case of a CMS, a headless CMS allows you to choose the CMS you need for each type of content.

Simplifies an omni/multi-channel strategy

Headless architecture helps you distribute your content across different platforms from a single back-end. You spend less time delivering the same content because it can all be delivered from 1 system and 1 API.

Future-proof

If your business prioritises technological innovation, then headless commerce is for you. In order to be ready for the future, many organisations are opting for a headless architecture early on. As a result, they benefit from the long-term efficiencies this model delivers to remain market leaders.

Headless commerce in practice

Choosing headless means flexibility in choosing the technology for the front end of, for example, your webshop. For our clients, we choose to use Next.js. Next.js is an application of React (a modern framework) with which you can create modern digital (web) applications. By means of APIs, we get the data to the Next.js environment to create dynamic sites. We extract this from modern headless CMS systems, such as Prismic or Builder.io.

The content from the headless CMS systems is combined with Afosto's commerce engine. For example, we get prices from the API of our price group service and the stock status comes from the API of our WMS.

Besides offering data, our commerce engine must also take care of receiving data. Think for example of adding a product to the shopping cart. This is also handled via an API between the web shop and the Afosto order service. The price of the product that is offered might depend on whether a customer is logged in or comes from a certain region. This context of the order is sent to the price rule engine (you guessed it, via an API) and this engine gives the right price for the added product in the given context.

As you can see, the whole front-end is driven by API connections which can be disconnected and possibly replaced by back-end systems that might cover a business process better.

Conclusion

As we move towards a marketing model based on content relationships and customer experience, it is important to be agile. This agility allows you to respond quickly to changing customer demands.

Headless e-commerce solutions enable you to adapt quickly to these changes. This while achieving a lower TCO, a faster time-to-market, better security, and everything else you need to provide a world-class online shopping experience.

If you want to learn more about how headless commerce is used to give your customers the best experience, check out the Afosto headless commerce solution.