Headless Commerce Explained

Headless Commerce is one the most debated about and least clear eCommerce buzzwords. Loved by tech developers who have endless discussions about "headless nuances" and a bit mysterious for business people who often can't get what exactly Headless Commerce means, it is about to re-shape the eCommerce industry.

Vue Storefront Board Members

We will cover Headless Commerce definition to set things straight, embracing technical issues and "translating" them into business values.

Let’s take a deep dive into Headless Commerce approach.

What is Headless Commerce?


Headless Commerce definition on the surface looks pretty clear: it is a common term for software architecture, in which the central assumption is separating the UI (frontend) from the business logic (backend). These two layers communicate with each other via API, but there are no strict dependencies between them.

Headless Commerce Architecture Explained


Headless Commerce meaning, however, may seem a bit vague as it requires a deep understanding of the values of separating these two units. So, what does Headless Commerce MEAN?

This type of software architecture opens up almost limitless possibilities in terms of customizations, speeds up time-to-market, and enables eCommerce brands to enrich and differentiate the customer experience.


Long story short, Headless Commerce - by providing a high level of technical flexibility - enables businesses to build a platform that meets their current business needs and fulfills customer expectations.


Headless Commerce vs. Traditional Commerce

Traditional Commerce often referred to as a monolithic or all-in-one system ruled the eCommerce industry for over a decade. Now it is stepping out of the field, making room for the new, headless approach.To better understand the differences between Headless Commerce and Traditional Commerce, let's start with a basic explanation of what is what.

Traditional, monolithic commerce systems provide all the components needed for handling business logic, displaying UI layer, managing and publishing content, and so on, with a single, tightly coupled codebase. This is why we can call them an "all-in-one" system.

Headless Commerce refers to separation units responsible for performing particular services: frontend (displaying UI layer) from backend (business logic), from CMS (managing and publishing content), and any from any other third-party party tools such as loyalty program, search engines, payments, analytical tools, CRMs, and so on. All of the units "talk" to each other via APIs.

Traditonal Commerce vs. Headless Commerce

Monolith systems fifteen years ago were the only option for eCommerce businesses; they represented a seemingly convenient "all-in-one" approach and guaranteed full control of the system. However, with time more of their drawbacks came to light.


Traditional Commerce vs. Headless Commerce Comparison


Monoliths drawbacks


Pre-defined UX

Customers' habits are constantly changing in the eCommerce market, and sellers must be agile enough to implement modern UX features. With legacy monolith systems, where all elements are tightly connected, moving to modern JS frameworks that deliver, for instance, better web performance can be risky, as well as changing the UI and adding UX-focused features.

Frontend developers can't just alter the frontend element to adjust it to the, for example, new brand identity because it can potentially interfere with the underlying database code.

Slow time-to-market

Updates made in the monolithic systems are highly time- and money-consuming. They need to be thoroughly tested because even the tiniest ones can potentially cause the whole system to fail. And the time of developers doesn't come cheap.

Limited customization possibilities

The all-in-one approach seems convenient as there is no need to dig the internet in search of additional solutions. Everything is simple to develop, test, and implement. The problems start during growth when default features turn out to be not the best ones. Within monolith systems, merchants have limited freedom to alter pre-defined features or services and replace them with the ones that work better for them.

Developer Experience

Monoliths systems enter the "legacy phase" so working with them often required large IT departments, specializing in old frameworks like DB2, C, Pascal, .NET, Java, or Cobol, to maintain infrastructure and solve technical problems. Maintenance took up the time that should have been spent building modern features for users.

Summary: Monoliths are simply incapable of keeping up with the pace of business and providing a satisfying experience both for users and developers.

Headless Commerce steps in as the answer for all the above challenges.

Key Benefits of Headless Commerce

How Headless Commerce architecture actually works

Headless Commerce architecture allowed for the construction of the systems by putting together loosely coupled elements - just like digital LEGO. Merchants could freely compose their systems by adding, removing, and altering particular services such as Headless CMS, headless payments, searches, loyalty programs, or headless checkout at any given time. How?

Thanks to Headless Commerce "bloodstream" which is an API.

Headless Commerce Ecosystem


What is Headless Commerce API

API (Application Programming Interface) can be defined as a bridge for data transferred between the services. Within Headless Commerce architecture, API connects frontend and backend, and any third-party services. These elements communicate with each other while remaining separate entities.

API can be used to pull information to the desktop, mobile, wearables, smart cars, IoT (Internet of Things) devices, and so on, enabling merchants to go full omnichannel and secure their capacity for scaling the business.

Learn more about API in Headless Commerce.

Headless Architecture vs. Microservices vs. Composable Commerce

The API-first architecture allows independence in the development and freedom of choice of tools (language, framework) within each application. Yet, there is still a lot of confusion around headless-related issues, which get even bigger recently with the rise of trends like headless commerce, API-first, etc. They are not the same, but the differences may seem subtle. To make things easier to understand, let's start with the basic definitions:

Microservices allows marketplaces to cherry-pick tech providers, i.e. microservices, for each business function without a need to change the rest of the system.

Composable Commerce allows eCommerce businesses to select and assemble best-of-breed commerce solutions and compose them to satisfy their unique business needs. It is similar to microservices but focuses instead on the business perspective. 

Headless Commerce mainly emphasizes decoupling front-end and back-end layers, which falls under the umbrella of microservices.

The growing popularity of headless makes the issue a bit water down. It is often confused with microservices, composable commerce, packed business services, and MACH architecture. And -  truth to be said - no wonder, as all of them focus on API. Yes, headless emphasizes decoupling the frontend (client layer) from the backend system (business logic and data).

It differs from microservices, but - in general - it is all about composing systems by putting together loosely coupled elements in a LEGO-like way. It is not just "techie" stuff that only developers might be interested in. That architectural assumption opens up a way to various business benefits, conversion growth included.

Patrick Friday, CEO at Vue Storefront.


Key Benefits of Headless Commerce to your store and team

As we mentioned, when the eCommerce industry accelerated, the convenient “all-in-one” approach represented by monolithic eCommerce platforms occurred to be a significant drawback.

Merchants were struggling with legacy systems issues, old-fashioned tech stack, lack of agility, and dependencies from one provider who - let's not be afraid to say that - often was rather Jack of all trades than a master of one.

Headless Commerce changed the game, bringing significant benefits, such as:

Unlimited UX and UI Control

Decoupling units allowing developers for unfettered operations at the frontend without affecting the backend unties merchants’ hands when it comes to marketing and UX. They can implement advanced tools to create visually pleasing user interfaces, omnichannel, well-performing web experiences (such as Headless CMSs), and launch a new product line, associated brand, or a new touchpoint addressing a different audience within hours not months.

System Scalability

Headless Commerce future-proofs the system as continuous iteration and innovation are secured. eComm engine can work freely with any frontend and third-party extensions, preventing delays that would arise because of the number of deploys needed in a monolith.

Flexibility and Customizability

API-first architecture allows merchants to cherry-pick the best services in their niches and tailor-made their eCommerce system to make it exactly what they need it to be.

Improved Developer Experience

Decentralized architecture splits the process of engaging the entire dev team. Before applying headless technology, a monolithic architecture involved operating with many different eCommerce layers at the same time and prevented frontend developers from choosing the modern JS frameworks to work with.

Lightning-fast Web Performance

Choosing modern, JS frameworks to build frontend layers allows to significantly improve performance and so deliver a better user experience (UX).

PWA (Progressive Web App) Features

PWA is not directly related to Headless Commerce, but it can be the perfect entrance to ‘"full decapitation". Launching a PWA that’s separated from the backend shows benefits the overall benefits of a faster, mobile- and SEO-friendly PWA and Headless Commerce flexible and customizable architecture.

Omnichannel Retail Possibilities

eCommerce companies must address these expectations. However, as omnichannel requires flexibility on the organization level and tech, it can be challenging, and legacy tech stacks do not always deliver it. Headless Commerce, on the opposite. Within this approach,  changes in the visual layer do not affect the backend layer, and - thanks to Headless CMS - the personalized content can be spread over multiple touchpoints from one single source. 

Short time-to-market

Development teams can develop, deploy, and scale the services independently of others. The entire system, but divided into parts, enables them to work at different speeds, making the new developer’s onboarding process more straightforward. Taking all of that into account, it is clear that adding new features is way faster within the headless commerce platform model than within monoliths.

Learn more about the benefits of headless commerce.

Check headless commerce use cases 

Headless for many years was a go-to direction reserved only for the Silicon Valley unicorns that were about to disrupt the old order. Their market positions almost forced them to make bold decisions, and going headless was one of them back then.

  • Netflix was one of the first. When the components within its monolithic app were tightly connected, every, even the tiniest error, could lead to several days of downtime, which this VOD service can't afford.
  • Amazon is another example, and the reason is pretty evident given the scale of its operations. Long deployments and difficulties with adding new features would have slowed down the company’s growth, which was not part of the plan.
  • For Uber, the monolithic app was just fine when the company was a local enterprise. Yet, similar to Amazon, it became a massive roadblock when scaling the business.
  • Zalando hit a similar ceiling. In 2010, the company switched from monoliths to speed up innovations and A/B testing, bringing the best conversion.

Is Headless Commerce beneficial for your business?

Switching to headless architecture requires some digital maturity level or the willingness to explore digital sales’ potential. Still, especially nowadays, many mid-size companies seem to fulfill these requirements. The popularity of headless commerce solutions, which started going beyond the tight circle of developers and CTOs, also helps.

So… when is the right moment to choose a headless model? There is no universal answer to this question, of course, but - if you answer "YES" to most of the following questions, "Headless Commerce" should be the direction that can help you.

  1. Do you struggle with sluggish web performance?
  2. Does your predefined UI layer need to be refreshed to align your brand identity?
  3. Does your tech stack prevent you from implementing new features?
  4. Do you struggle with tech debt?
  5. Do you find it challenging to deliver content across multiple touchpoints?


Where to start with Headless Commerce

To make a swift shift to headless technology, merchants can apply a cost- and time-effective approach, and instead of full-blown re-platforming, start with replacing just a frontend.


Headless Storefront

Headless storefront is a frontend presentation layer that supervises and orchestrates the user-side of eCommerce.

It gathers the data stored in the eCommerce backend and displayed it in an organized manner with a reduced page load on any device. A proper headless storefront can be described as a progressive tech ecosystem that binds together all of the headless components and assures the proper and efficient functioning of the digital storefront. 

Of course, it can be custom-made but - to reduce the amount of work needed to build it, a market-proof solution available on the market would be a reasonable alternative.

Vue Storefront should be on the top of the list you will be considering. Here is why.

  • Vue Storefront, as a modular, API-first frontend driven by headless technology principles, grants rule incorporated and supported by the MACH Alliance. Vue Storefront enables headless transition with superb technology for any player. At the same time, as hungry for more storefront visionaries, we work on an even broader set of solutions well-matched with headless technologies and developments for different scale eCommerce.
  • Vue Storefront supports operations at the front while remaining open for further customization, and - as such - doesn’t block advanced activities in the later growth phases.
  • Vue Storefront stands at the forefront of IT integration, guaranteeing fast and stable further implementation of new headless technologies with no harm for performance.
  • Vue Storefront enables headless transition with superb technology for any player. At the same time, as hungry for more storefront visionaries, we work on an even broader set of solutions well-matched with headless technologies and developments for different scale eCommerce.


Headless commerce examples 


Nowadays, Headless Commerce stopped being not limited to the big, globally-operating brands. In fact, they are very democratic, simply because they don't force a bloody revolution in the system by killing off the whole class of existing functionalities and restarting the architecture from the very beginning. Here are a few Headless Commerce examples:

Foodl

The first Dutch open food B2B marketplace was launched right before the Horeca industry closed down. Yet, Foodl had no intention to waste time. Instead, it chose to make the most of given circumstances and make the platform perfectly suited for its clients. Chosen tech stack, which consisted of commercetools at the backend and Vue Storefront as the frontend, turned out to be the foundation that made it possible.

Read Foodl's case studyFoodl, Netherland’s first B2B food marketplace, change the game with Vue Storefront_CASE STUDY

Zadig & Voltaire

Zadig & Voltaire, a well-known fashion brand, was one of the very first merchants to have chosen Magento back in 2008, and for over a decade, this solution, which set eCommerce standards, was a perfect fit for the French company. At some point, however, it decided to revamp the front-end layer to unify the UX across the markets. And that required the entire new tech stack.

Read Zadig & Voltaire's case studyZadig & Voltaire: The way to embrace omnichannel sales with Vue Storefront_CASE STUDY

Pure Daily Care

Pure Daily Care, an LA-based beauty and wellness brand has forged its success selling top-rated devices like its Nano Facial Steamer, NuDerma High Frequency Wand, and Aromatherapy essential oil diffusers on Amazon, amassing over 1 million customers and 50,000 5-star reviews. Looking to grow beyond Amazon with their own branded eCommerce experience, the founders decided to try the Shopify platform - but were left wanting even more features and capabilities. Fortunately, Aureate Labs already had a ready-to-implement accelerator, and that was Vue Storefront and Contentful.

Read Pure Daily Care's case studyPure Daily Care: Making Shopify flexible with Vue Storefront_CASE STUDY

LoveCrafts

LoveCrafts is not a traditional eCommerce business, focused on increasing sales quarter by quarter and constantly conquering new markets. It is something much bigger. Besides commerce, the company provides an extensive pool of inspiration for crafters and a community. To successfully embrace these two sides of the business, its software had to meet extremely high demands and - it would not be an exaggeration to say - that there was no one particular technology to meet them all.

Read LoveCrafts's case studyLoveCrafts_Embracing complicated business logic with headless_CASE STUDY

Leading Headless Commerce solutions

The ecosystem of “headless-oriented” services is expanding, and they are more and more accessible and straightforward. It would be an exaggeration to compare it with the eCommerce SaaS-like situation, but there is no doubt that we are witnessing the armaments race. More and more brands are dying to win the title “headless standard” and - despite the overall landscape can be a little bit foggy - this is great news for eCommerce businesses.

A few years ago, the only way to go headless was to code it from scratch. There are various frameworks, builders, and even the whole cloud-based platform that can spare this necessity.Finding a genuinely API-first Headless Commerce platform is not an easy task. Most providers already sensed the trend and put “API-first” on their banners, but their interpretation of being “headless” was sometimes far-fetched.

The same thing is with headless CMS. This sector has been skyrocketing recently, and choosing Headless CMS can be difficult for the organization. They all look similar on the surface, and by saying "on the surface," I also mean the marketing claims displayed on their websites. 

We can read about omnichannel, boosting customer experience, retention providing marketers with ease-to-use editors, and so on. However, as much as these statements are nothing but true, they don't reflect the nuances that characterize particular solutions. And there are differences between them. The situation is slowly clearing up, with the significant involvement of companies gathered in MACH Alliance.

MACH Alliance is a non-profit organization that aims to share knowledge of the benefits of vendor-neutral, modular software ecosystems, and one of its founders is commercetools.

It is one of the few platforms that can be considered genuinely headless because, unlike competitors with the “headless claim” in their banner, it was genuinely built with the API-first and cloud-native approach in mind long before it became fashionableImplementing the headless strategy means changing overall eCommerce functioning – decoupling dependencies and switching to more agile implementations.

Gaining the flexibility and usability of the stack typically relies on three main components: frontend, eCommerce platform, and headless CMS, but it’s not limited to these parts.

Explore MACH Technology

As an API-first solution, Vue Storefront is a perfect fit for any headless commerce platform.

We are part of MACH Alliance, the community of tech vendors and software providers advocating Microservices, API-First, Cloud-Native and Headless approach.

Read more in our guide
Download eBook