The best time to invest in headless eCommerce was three years ago. Almost two-thirds, or 61%, of retailers surveyed said they already leverage headless commerce architecture or planned to do so by the end of 2020. The second best time is now. 

Here’s a comprehensive guide to show you what you’ve been missing out on, explain what modern headless eCommerce is, and help you get your transition up to speed. 

Feel free to jump right to the section that interests you the most:

 


Headless eCommerce definition

Headless eCommerce is software architecture that splits the front-end layer from the rest of your online shop.

Headless eCommerce visualization: back end connected to front end through API

The front end, of course, is basically everything you see when entering the website. The back end is your eCommerce processing platform that stores and manages data behind the scenes.

And here comes a riddle for you: 

If you separate the head and the body, which part will be responsible for thinking? 

The headless take on this issue is that it’s always the body that contains all the processes and “thoughts.” Your shop doesn’t need a head to work, but it does need a head to sell. If you excuse me for that graphic comparison, it’s a headless salesman that can put on a variety of heads depending on the buyers’ needs.

 


Headless FAQ

While the idea of separating the front end and back end might sound simple, it sparks some interesting consequences, and it can raise even more questions.

Some of those that we usually hear at Divante are:

 How is headless different from the monolith approach?

In ancient times at the beginning of the 21st century, eCommerce platforms used to be created as a monolith. If you wanted to build an online shop, you usually took an all-in-one solution off the shelf. Of course, you could always customize it with the help of your software developers.

But eCommerce doesn’t necessarily like an all-in-one approach. It’s full of complex and custom processes that are the key to your competitive advantage. It all requires constant adjustments and polishing. 

If your solution is carved out of a single “block of software,” you’ll soon have a hard time testing your system inside-out anytime you roll out a new feature.

Headless architecture answers this problem by splitting monoliths into smaller, more agile pieces that communicate with each other through API.

Monolith architecture as a one piece compared to headless architecture as many puzzles

 What problem does it solve?

As an example, imagine these two cases of an eCommerce company:

    1. You have a team of 10 specialized people. Each one is responsible for a narrow slice of the process. They either design the website, build relationships with partners, answer emails, or do some other tasks. 
    2. You have only a single employee onboard. They take care of every single aspect of your business. This single employee delivers everything from coding to logistics to client services.

Of course, the 10-person army is a set of microservices. The single superhero is the monolith that does it all. 

Which one is riskier if an employee leaves? In the first case, you can easily replace them. In the second one, if you lose your single superhero, your business is dead as the dodo. 

But wait, there’s more to it than just that. You can ask bonus questions like: 

    • Which one scales better?
    • Which one adapts faster to changes?
    • Which one is more likely to get better results?

To all those, we have to rule in favor of headless.

 How do they communicate with each other?

In headless architecture, the front end and back end communicate through an application programming interface (API). It’s a set of codified commands. If you remember the beep-bops of R2-D2, it’s the equivalent of that. API is precise and easy to understand by a machine.

“Some of our customers just do machine-to-machine ordering for B2B use cases, and they don't even need a front end because it's a robot placing an order from the factory.”

Kelly Goetsch, Chief Product Officer at commercetools, four-time O'Reilly author, and Co-founder and President of the MACH Alliance

(Headless architecture and microservices in eCommerce platforms)

Of course, as a human, you can interact with it directly by sending commands through the command line. It’s like whistling to R2-D2 in its own robotic language. 

It might appear exciting to you if you are a developer, but after a couple of API calls, you’ll give up and go somewhere where the interface is designed for humans. This interface is the front end that acts as an intermediary between the user and the eCommerce platform.

Complex structure of headless ecommerce system connected to features and front end through API

 

What are the benefits of headless?

Access to various front ends

Continuing the topic of communication, let’s once more underline the fact that headless decouples the front end from the rest of the app

The front end is where almost all the customer experience resides. Customer experience is where you build your competitive advantage.

It’s more to that than just changing the appearance of your webshop. Separating the back end means that the heart of your application, which processes the orders, can be accessed from a multitude of new angles

For example, with the decoupled back end, you can:

      • Enable shopping through home assistants, like Google Home.
      • Deploy multiple shops connected to the same back end.
      • Provide access for IoT devices, like smartwatches, smart fridges, and so on.
      • Easily connect to external marketplaces, like Amazon.

Even if a new technology that we can’t even imagine now comes up, it can easily plug into your shop. That’s a real gift for your omnichannel, where the emphasis is on reaching the client when he needs us. The medium is secondary. 

In the end, your shop transforms into a hydra that reaches out to your user on multiple channels. This hydra catches leads and orders with every single head and sends them straight to its back end. 

Omnichannel headless ecommerce platform with multiple touchpoints

Easy way to replace parts

Replacing a part of a monolith is like replacing an arm of Venus de Milo. It requires a lot of manual work from the experts. 

Replacing a part in headless architecture is like plugging in a new arm to a mannequin. It’s effortless.

Using API to connect the front end means that you can easily replace it. The headless approach usually comes with a broader openness for microservices. That means you can plug additional services and features into your architecture.

The easiest way to imagine this are puzzle pieces that you can put in or out depending on your needs:

      • Need a quick PWA front? Slap a Vue Storefront on it. 
      • Need a loyalty program? Plug in the Open Loyalty platform. 
      • Need to clear up your product information? Connect Pimcore or Akeneo.
      • Need a search engine? Just add Algolia or Constructor.io.
      • Customer experience in your shop needs a bit of final touch? Add solutions like Contentful or Contentstack.


Looking for the best headless solutions for your eCommerce?

Check out our selection of the 14 top platforms available on the market:

New call-to-action


What’s wrong with my monolith? 

Until your monolith works, there’s nothing wrong with it. But when it fails, it crashes hard. 

The problem is in the radical difference between agility and safety once you try to change anything. Anytime you add a new feature, you face the problem of checking the integrity of the whole system. That makes it hard to deploy changes, experiment, and optimize its performance.

With headless, you’re far more agile. 

“From a behind-the-scenes technology perspective, the rise of headless and microservices to power new customer experiences is driving rapid change across enterprise retailers and brands. 

“Those that adopt this approach are able to become far more agile in their decision-making and execution capabilities.” 

Adam Sturrock, VP Product Marketing at Amplience, MACH Alliance tech council member and founder of Moltin

(eCommerce trends 2021)

Is it here to stay?

In technology, just as in any other area, some changes are more permanent than others

Take the story of the Carnian Pluvial Event. 234 million years ago, on a desert landscape of Pangaea, the rain started to fall. It kept pouring down for the next 2 million years. 

Whenever I discover new technology, this story keeps coming back to me. Are we facing a brief drizzle that’s soon to pass? Is it a major change in the market landscape? Do we have to adapt to this as a new reality?

These questions have already been answered when it comes to headless. It’s been widely adopted in eCommerce. It’s all around us. 

Recent studies on eCommerce suggest that by 2022 a typical digital commerce customer experience will be created from over 30 integrated applications. We need headless architecture to integrate them. 

What comes next?

When you take another look at the features of microservices, it’s easy to foresee the natural next step for this approach. 

The next step is the unification and interoperability of all the solutions.

Not so long ago, the MACH Alliance was born. It promotes platforms that are:

    • Microservices-based
    • API-first
    • Cloud-native
    • Headless

That means that they are not only easy to connect, but they also work in the cloud. As a result, the barriers between them are even thinner

Referring to Tomasz Karwatka in Headless toolkit, “Composable commerce connects all the dots and allows us to imagine a whole new way of building eCommerce systems.”

It’s a commerce system built from packaged business capabilities that are basically the puzzles or bricks that constitute your eCommerce.

Puzzles representing composable commerce

You don’t install anything on your server in the rack anymore. Instead, you subscribe to software-as-a-service (SaaS) plans, and everything else happens behind the scenes and simply falls into the right places with satisfactory click. Sounds comfortable and easy, doesn’t it?

Well, we’re not quite there yet. But we will be soon.

 


Examples of headless commerce applications

Now, this article wouldn’t be complete without showing you a couple of solutions that already operate on headless. If you want to dig deeper into this topic, check out our headless toolkit eBook. It outlines 14 leading tools that embraced the technology and squeezed every last drop out of it.

 Complex headless platform: commercetools

commercetools logo

At Divante, when delivering modern eCommerce platforms, we often find ourselves working with commercetools. It’s one of the top commerce solutions.

You can combine it with any front end. It’s a highly-scalable SaaS platform with a very flexible modular structure that you can adjust as you wish. When its core flexibility ends, it gives you 300+ API endpoints and decoupled services. That’s a lot of building blocks to choose from. 

Obviously, since the President of the MACH Alliance is also a CTO of commercetools, it’s also a cloud-native solution. You can choose between AWS and Google Cloud.

In the end, it all contributes to a well-rounded, scalable, and extensible platform that can leverage all the aspects of microservices-based and headless architecture. It makes it a perfect base for building demanding omnichannel eCommerce projects

Headless loyalty tool: Open Loyalty

Open Loyalty logo

Loyalty programs are a great example of side features that you can easily implement by plugging in an external system. They boost results and make your customers happy.

When we look for a flexible, quick, and efficient loyalty solution, we usually turn to Open Loyalty. It was built inside Divante to implement personalized loyalty mechanics across eCommerce systems. 

It leverages the headless approach to integrate with your system through API. In short, when you add it to your eCommerce architecture, you get a set of tools to leverage customer and transactional data from various sources. It uses information as fuel for your campaigns and gives you a dashboard with a wide range of use cases and customization possibilities. 

Headless PIM: Pimcore

pimcore logo

Now, let’s talk about data management. Contrary to the popular belief that you can replace any senior developer or solution with an infinite number of interns, at some point, your business will need a product information management (PIM) system. Interns grinding datasheets can only take you so far.

Pimcore is a powerful solution that we use in complex eCommerce projects to master the data. It allows you to manage that data, model various types, and use it in multiple projects. You can use it to list and manage your products, distributors, clients, and so on.

What’s most important, Pimcore can be the answer to a variety of needs. You can create your PIM, CMS, CRM, and eCommerce within this single platform. It’s a complete data management toolset.

You can plug it into your system, even if it’s a monolith. For example, we’ve created a Pimcore-Magento connector at Divante that allows you to manage your data on Adobe’s platform. It can help you take the first step towards microservices.

 


Want to take a closer look at headless tools?

Here’s the perfect eBook for you:

New call-to-action

 


 

Starting with headless eCommerce

Truth be told, even if you’re on a monolith and you’re not willing to change anything, you might find yourself working with headless one day. Big platforms, like Magento, SAP, and Salesforce, invest in a MACH stack and start from being cloud-native and headless. 

“Having a massive installment base makes it harder to innovate if your product is not based on a MACH stack. Your updates are painful and costly to implement. This is why Salesforce is doing better than SAP and Adobe and why the latter are now both 100% in the cloud. 

“There’s no other way to stay relevant in the future of eCommerce software.”

Piotr Karwatka, Co-founder of Catch The Tornado

(Headless toolkit: 14 essential tools for the future of composable commerce)

Except for waiting, there are a couple of other paths one might embark upon to enter the realm of headless:

  • Building a custom solution from scratch.
  • Using one of the platforms as a base, and expanding its possibilities with additional tools.
  • Gradually moving from your current monolith by replacing parts of it with microservices.

Whichever path you take, you have to start by answering a question about your needs.

Divante at work

Identifying needs

Here are the basic client problems that usually lead them straight to our headless software development teams.

 Shorten time-to-market

“[Top pro of having microservices] is agility, it’s speed. It’s just making sure that you know you can react as fast as you can. So if there’s a new thing you have to do, like a new business model behind this or a new move by a competitor, you want to be fast and that’s the only reason.”

Roman Zenner, author, consultant, and speaker in the field of eCommerce

(Roman Zenner on growing eCommerce with microservices)

If you’ve ever worked with software, you know the birthing pains that come with the delivery process. Even a simple website redesign project can last forever in the wrong hands.

In eCommerce, you don’t have time for that mess. If you roll out changes, you need them to go live quickly to make a difference. At the same time, you don’t want to swamp the system with bugs spawned by this rollout.

If you decouple your storefront, there’s much less to break. Even if your developers and marketers defect and wreak total havoc on your website, the back end will still be up and running, and you can quickly restore your web shop.

 

 Get a more flexible front end

“I think the main thing is that, as eCommerce pure players, we have to focus on front-end capabilities and differentiate with a highly individualized customer experience.

“Back-end capabilities are mostly commoditized and can be consumed through an API. As a merchant, you need a back end that can be configured and is highly scalable.

“If you put a lot of development effort in the back end, which is not a differentiating factor, you´ll never be in the position to transform those applications quickly. So, basically, the main thing is to keep the main thing, the front end, the main thing. ;)”

Markus Lorenz, General Manager DACH at Divante 

(Marcus Lorenz on Lampenwelt’s journey from a startup to a global leader with the headless approach)

In headless architecture, the technology of your storefront doesn’t matter to your back end. You can plug in Vue.JS, React, or any other tech. It’s hidden behind the API curtain. The API translates it to a standard communication format for your eCommerce platform. 

You can experiment with those storefronts, quickly change them, and adjust to the market needs in a fast and cost-effective way. Oversimplifying this benefit: If the cost of React developers doubles, you can quickly switch to Vue. 

 

 

 Be more scalable

With great architecture comes great scalability. If you use the complete MACH stack, your tools are practically independent of the boundaries of this physical world.

Everything is hosted in the cloud, and you can scale it up and down as you wish. If you find a certain bottleneck within your building blocks, you can always pull the plug and replace it with a more effective solution.

 

 Open for omnichannel possibilities

“The boundaries and differences between channels disappear and that's also probably not a very bold statement because we see it happening already. 

“It's not about ‘do I buy offline or online’[...], but it's going to be about creating a customer experience. [...] It’s more about making sure that you are where the customers are [...] and that you actually make it as easy as possible for the customer to run a transaction and buy your product.”

Felix Kreyer, the Founder of Digital Spike and former Vice President of Markets Zalando

(Felix Kreyer on tech’s role in disrupting old-fashioned markets)

It’s tough to deliver a multitude of digital experiences without API and orchestrating it all in your platform. You need a single place to polish, automate, and control them.

How else would you achieve it? Perhaps having separate dashboards and reports for every touchpoint, but that doesn’t seem like a good idea at all, right?

 

Get more business optimization possibilities and less dependence on vendors

Customization is the key. If you push hard working with third-party solutions, you can easily end up handcuffed by the lack of features and possibilities to grow. At this point, you can start building your own solution to complement that, but if you do, you also have to maintain it. 

Headless, microservices, and an API-based approach let you juggle with vendors and pick the best one without worries.

It’s a good moment to mention hybrid solutions. You can start switching to headless by slowly building a microservices structure on top of your monolith solution. For example, we created a Pimcore-Magento connector that can add some new features to your current software.

 

Plugging in

How does it look to work with headless?

Working with headless platforms is easy. That’s the whole idea for their existence.

As we prepared our headless toolkit eBook, we went through the top solutions on the market. Being headless doesn’t mean that they don’t have a proper interface to communicate with you or your team. They all have nicely designed dashboards that you will feel comfortable working with.

Connecting the API endpoints is usually an easy task. There’s no need to worry about that. The only challenge might be the multitude of options they give you, so you shouldn’t touch them without a tech person by your side.

 

Migrating from monolith to headless

In Divante’s resources, you can find a really insightful interview with Kelly Goetsch and Piotr Karwatka on Headless architecture and microservices in eCommerce platforms. Piotr raised an interesting question on the process of migration from monolithic platforms to headless architecture.

Kelly’s recommendation was to set up a proof of concept for a new, relatively smaller market. You can do it with commercetools at the back and use the front end of your choice. That will create a project that will take a few weeks, and it will introduce the organization to the new tech.

It’s a low-risk approach that can fail without damaging the regular earnings or harming your market position.

As a next step, you can start gradually swapping the parts of your eCommerce with the new platform. Start with product pages, and then move on to category pages, landing pages, and user profiles.

“That approach actually works out really well because now you can do A/B testing and you can point customers to different variants of that page. [...] It's actually the Martin Fowler strangler pattern approach.”

Kelly Goetsch, Chief Product Officer at commercetools, for-time O'Reilly author, and Co-founder and President of the MACH Alliance

(Headless architecture and microservices in eCommerce platforms)

The same gradual approach is mentioned in the interview with Roman Zenner and Marcos Bravo. Roman proposes to move functionalities to microservices step by step by extracting the customer section, catalog, payment, and so on.

“It's not really like a Big Bang migration, it's like a soft migration from A to B. And that's what is happening. It also doesn't mean that you have to get rid of your monolith altogether. For most people it means that you can sort of make your monolith more modern by stacking microservices around this whole thing.”

Roman Zenner, author, consultant, and speaker in the field of eCommerce

(Roman Zenner on growing eCommerce with microservices)

So, if you decide to keep your monolith and successively add microservices over your solution, you’ll hardly be the only person to do it. It’s a common practice that helps to mitigate the risk and always leaves a way open for a total pivot.

 

Is re-platforming for daredevils?

The interview with Kelly also raises an interesting question about the traits of people that decide to switch to headless.

Re-platforming is always a challenge. Big pivots like this may feel risky, put you in a weak position, and push you out of your comfort zone. That’s why we usually see ambitious new people as the leaders of this change. They want to build their own legacy.

But there’s more to this than that. The change needs a proper mindset. It requires you to turn from the old approach and comfortable old vendors that refused to develop their solutions. 

It’s a big jump, but there are ways to mitigate the risk in your eCommerce. You don’t have to make a complete pivot right away. There’s always the option to gradually split it into microservices and start with a small proof of concept. 

If you want to learn more about it in the context of your own eCommerce, feel free to reach out to our team.

“There’s only one single commerce today (without the ‘e’) and headless software is the most natural way to handle its holistic nature. [...] There is not a more efficient, flexible, and stable approach to modern development. 

“Apart from enabling unparalleled front-end freedom, it’s the best insurance against today’s six-figure website being tired and obsolete in two years. Headless is continuous evolution by default.“

Patryk Zawadzki, CTO, Saleor Commerce

(eCommerce Trends Report 2021)


 

Looking for more information on headless technology?

We’re working hard at Divante to share our knowledge and experience. Here are some of our top resources on headless that will help you make the next step: 

    • eCommerce trends 2021
      Over 30 leading voices in the eCommerce community that analyze the present moment and look forward to the year ahead.
    • CTO-CTO Podcast
      Interviews with founders, entrepreneurs, and industry leaders about eCommerce, enterprise software, open source, and sustainable business.

New call-to-action