Customer experience plays a big role in the success of a business, with 74% of consumers saying it impacts purchasing decisions and 83% of executives saying that an unimproved experience puts their revenue at risk, according to a Forbes Insights report on the value of customer experience.
Source: Forbes Insights Report
Digital plays a significant role in today’s customer experience, with 20% of global retail sales now happening online, according to Forrester research. The increasing importance of eCommerce and the growing number of digital touchpoints have led many companies to outgrow their traditional commerce platforms and look for a more modern solution.
“Headless commerce” and “composable commerce” are two popular architectures being adopted by digital leaders. This blog takes a look at some of the differences and overlaps between these approaches and why businesses are making the shift.
#Modern commerce is on the rise
In the early days of eCommerce, when webshops didn’t need much more than digital brochures available on a desktop browser, it usually made sense to use an all-in-one commerce platform for everything from the product catalog to checkout to website content and design.
Then the world met the smartphone, and mobile became a must-have sales channel. Mobile accounted for 11% of US eCommerce sales in 2012 (eMarketer) and jumped to 36% by the end of 2023 (Comscore). The traditional all-in-one platforms slowly added mobile support, but keeping the web and mobile sites consistent typically took a lot of manual work and led to a frustrating experience for shoppers.
Companies needed an easier way to manage omnichannel commerce as expected touchpoints grew to include channels like social, apps, marketplaces, and customer portals.
Enter headless architecture. Headless software is backend-only and shares all data in a structured way, typically via APIs, so the same data can be reused across many different frontend channels. This meant that teams were no longer limited to the channels their commerce platform had templates for but could use any frontend technology to build an experience for any digital touchpoint.
The API-based design of headless solutions also made bringing together multiple backend systems to power the frontend easier. As more software specialized in one part of commerce and designed to integrate with other headless tools quickly came to market, more companies started to “compose” their own unique commerce tech stack out of modular services from different vendors.
This composable approach to commerce technology took off in 2020 when global lockdowns forced many companies to expand and improve eCommerce quickly. A modular architecture meant teams could add new features without having to first rip-and-replace their existing system, and it also gave teams peace of mind that they could continue to update and evolve eCommerce by adding, removing, and replacing components as needed. Gartner coined the term that year, saying:
The building blocks of composable business enable organizations to pivot quickly.
#Definetion and principles of composable commerce
Composable commerce is a modern approach to building and managing eCommerce systems that prioritize flexibility, agility, and customization.
At its core, composable commerce is based on the principle of modularity, where various commerce services and components are treated as independent building blocks that companies can use to “compose” a tailored eCommerce tech stack.
Software that supports a composable approach has to be very easy to integrate. All data and functionality must be exposed in a structured format at a baseline, typically via APIs. More mature platforms also break up functionality into distinct pieces, often as microservices, which makes it easier to mix and match features and services from different vendors.
A composable approach lets teams:
Pick the best-fit solutions for each part of commerce (product data, site search, content, etc) instead of being locked into a one-size-fits-all set of features from a single vendor suite.
Quickly launch new elements (channels, payment options, loyalty programs, etc) by adding or replacing individual services without reworking the entire system.
Evolve the customer experience in small, continuous steps instead of with a major replatforming project every few years.
In a survey of enterprise technology leaders conducted by the MACH Alliance, an organization that advocates for composable technologies, the most commonly cited drivers for transition to a composable architecture were to improve customer experience (54%), the ability to innovate faster (53%), and to improve competitive advantage (49%).
#Composable vs. headless vs. monolithic commerce: what’s the difference?
At a high level, the main difference between these three approaches to eCommerce architecture is:
Monolithic commerce: One application, with one big code base, is used to manage the backend and frontend of ecommerce. Business logic, user features, and storefront templates are all tightly intertwined and typically defined by the platform vendor.
Headless commerce: The frontend and backend are separated, or “decoupled”. Backend systems share data and logic in a structured way via APIs, and each frontend channel can choose what information to use and how to present it.
Composable commerce: Businesses can compose their own tech stack out of modular, best-of-breed services for each part of commerce. Services work independently and connect via API, allowing teams to quickly add, remove, or replace stack components to adapt to new needs.
View image in full size: Monolithic vs. headless vs. composable commerce system
To get more details, here’s a side-by-side comparison of monolithic vs headless vs composable commerce.
| Aspect | Monolithic Commerce | Headless Commerce | Composable Commerce |
|---|---|---|---|
| Architecture | All commerce features and page templates are provided in one application, managed as one big code base. | Separates the frontend (presentation layer) from the backend (commerce engine). | Backend functionality is split up into modular, independent components connected via APIs. |
| Frontend flexibility | Web and mobile templates are available out of the box. Limited ability to customize or support other channels. | The backend engine can be used with any frontend technology to deliver commerce to multiple channels and devices. | Complete freedom in the frontend technology used to design the experience and in the backend services and data that power it. |
| Development speed | Updates need application-wide testing, so changes typically get bundled into big, infrequent releases. | Make fast, iterative changes to the frontend experience without risking backend functionality. | Each component can be developed, deployed, and scaled independently and at its own pace. |
| Customization | Limited to the templates and feature set offered by a single vendor. | Complete control over the frontend. Typically, it is easy to integrate with third-party services and data. | Can fully customize your commerce tech stack. |
| Vendor lock-in | High risk of lock-in, replacing a monolith can require significant rework of business processes and the customer experience. | Lower risk of lock-in can change backend solutions without changing the frontend and vice versa. | Minimal lock-in: combine components from multiple vendors and add, remove, or replace them as needed. |
| Ecosystem integration | Custom integrations can be complex due to the tightly coupled nature of features and templates. | Decoupled architecture simplifies the integration of multiple backend tools and services to power the frontend. | Modular components are designed for easy integration, with data and functionality fully exposed via APIs. |
| Maintenance | Changes to any part of the application can impact the entire system, making it complex and costly to keep everything up to date. | Frontend and backend code is separated, reducing the coordination and testing needed for updates. | Individual services can be updated, replaced, and tested without risk of disrupting others. |
| Best for | Simple web and mobile storefronts. | Omnichannel commerce. | Building and scaling a custom commerce experience. |
#Architecture examples of composable commerce
Here are two real-life examples of composable commerce in action.
Unified eCommerce catalog and experience across markets
As a global brand, Dr Oetker needs to be able to adapt eCommerce to the unique needs of over 40 markets. Previously, this meant that many markets used separate commerce systems, which led to siloed product data and inconsistent experiences across regions. The team decided to harmonize global infrastructure with a composable approach to make it easier to maintain the expertise across all markets and scale into new ones.
Dr. Oetker developed a microservices architecture that incorporates best-of-breed tools, including Hygraph (content management), Next.js (frontend), and Algolia (site search), to deliver a unified catalog and product experience via one orchestration layer.
This setup allows data and core infrastructure to be shared globally while regional teams still have the flexibility to add other services to meet the unique needs of different markets.
Future-proof digital business
Vision Healthcare has a digital-first business model, with multiple sub-brands sold across many channels. Moving to a composable tech stack helped to future-proof their business, as the modular architecture lets them easily replace outdated components or add new ones to launch experiences, channels, and brands quickly.
A core part of the solution was the GraphQL APIs used to bring all the components together. The first content management system (CMS) the team chose would often crash when handling GraphQL queries. Proving the approach's flexibility, the team quickly switched to the GraphQL-based CMS, Hygraph, and seamlessly connected it with the existing stack.
Other key components in Vision Healthcare’s composable stack include commercetools (commerce), Next.js (frontend), Algolia (site search), Adyen (payments), and custom-built microservices for order management and integrations with third-party marketplaces.
#Moving towards composable commerce
Very few companies go from monolith to full microservices in one go. The modularity of a composable commerce architecture makes it possible to transition in phases. Components can be modernized one at a time, allowing teams to quickly see the benefits of each step and easily adapt the plan as business needs and market demands shift.
Going headless is a common first step when going composable, as it lets you immediately improve the customer experience without making significant changes to backend systems. Then, you can gradually replace the services that power the experience by directing the frontend to use different APIs without refuting the code at each step.
However, not all headless solutions are created equally. Platforms that were initially a monolith and have gone “headless” often just add an API layer but keep backend features tightly intertwined. Headless solutions are designed to be composable and break up the backend into modular services.
How Hygraph enables composable commerce
Hygraph is a headless CMS that helps developers and marketers easily create, manage, and deliver complex content at scale. Its modular, highly structured architecture gives teams complete flexibility in using content to meet the needs of different channels, brands, and markets.
Hygraph provides a single source of truth for content data in a composable commerce setup. Hygraph’s Content Federation can efficiently fetch data from multiple sources and make it available in a unified GraphQL API. Giving teams an easy way to access the most up-to-date data from across their composable stack and use it to enrich content.
Hygraph gives teams complete freedom to power content with any backend source and delivers it to any frontend channel, which makes it an ideal content solution in a composable commerce architecture.
#What's next?
The flexibility that headless and composable architectures give teams to solve unique business challenges also means there’s no single “right way” to implement them.
Hygraph’s team of solution experts has helped digital teams at companies like Samsung, Telenor, and 2U successfully transition to composable. Request a demo to learn more and see how a modern content solution could boost your eCommerce business.
Blog Author