1. What is Headless Commerce?
The rapid adoption of Internet of Things (IoT) technologies is driving a new approach to ecommerce where retail platforms go headless.
So what is headless commerce architecture? Headless commerce refers to the decoupling of the frontend content of a store from the backend commerce capabilities. Separating the consumer-facing “head” from the commerce engine “body” gives businesses the freedom to use the technologies of their choice for each end and customize the features they want to enhance the shopping experience.
With the backend functioning independently, businesses are no longer constrained by the architecture in the way they build branded content and commerce experiences. The same commerce engine can plug into multiple frontends, publishing content to digital marketplaces, social media apps, mobile devices, and connected home appliances (to name just a few!)
In this decoupled architecture, developers use Application Programming Interfaces (APIs) to connect the two ends – calling on data from content management, payment processing, order management, and other systems to deliver customized content to any platform.
That enables content creators to update and scale the design and layout of frontend applications without developers having to modify the backend. And developers can upgrade the backend functionality without disrupting the customer experience.
2. What's the difference between headless commerce and traditional commerce?
In considering a headless ecommerce definition, let’s take a closer look at how it differs from a traditional ecommerce model.
Traditional ecommerce platforms use a monolithic architecture where there is a single database and the coding tightly integrates the backend with the frontend. Designed primarily for websites, monolithic platforms give developers full control over the way they are coded and customized.
This approach served businesses well when commerce was largely web-based. A traditional platform is straightforward to develop, allowing startups without large in-house development teams to get online with a server-side application and manage their products with tools like Shopify or WooCommerce.
But with this type of "all in one" architecture, launching new customer experiences can force developers to overhaul both ends of the platform, rather than simply attaching new frontends. The fixed architecture limits businesses to using the tools that are built into the framework, which limits creativity as they expand their content and shopping channels.
This brings us to one of the primary development benefits of a headless system. Headless increases a brand’s ability to apply innovation to new experiences or even channels much more rapidly, speeding up their time-to-market with new features, increasing their competitive advantage, and ultimately, revenue.
A secondary technical benefit of course, is that a cloud-based headless system avoids a single point of failure. Developers and content creators work from separate systems, reducing the risk of data breaches that access customer information.
3. What's the difference between content-led and commerce-led experience?
A content-led, or experience-led architecture places the customer experience at the forefront of the way a business operates its commerce operations.
In this approach, content is delivered through a digital experience platform (DXP) that manages the way customers interact with the brand across all channels – from brick-and-mortar stores, to web, to mobile, to IoT devices. By giving marketers a complete view of customer engagements, the DXP allows the store to deliver targeted content based on the customer’s previous interactions. This is particularly valuable for lifestyle brands, where the experience is at the center of the marketing strategy.
By contrast a commerce-led experience emphasizes the efficiency of the sales process in operating the store.
Placing the commerce engine at the frontend of the platform, developers optimize the customer experience based on the product search, checkout flow, and order management efficiency. Marketers then need to adapt the content they create to fit the capabilities of the commerce system and are reliant on developers to make changes to the customer experience. With the consumer interaction coupled with the commerce engine, this approach is less flexible than a true headless system.
4. Why is headless commerce becoming more popular?
Decoupling headless commerce allows for the blending of content and commerce for a seamless digital experience that drives increased conversion.
The ecommerce landscape is shifting faster than ever before. The COVID-19 pandemic is rapidly changing consumer behavior and will likely alter the landscape permanently. Consumers have turned to online channels to deliver everything from groceries to entertainment, and traditional brands with limited online presence have found themselves sprinting to catch up while revenues soar at Amazon. This increased reliance on ecommerce, home delivery, and hybrid models like "buy online, pick up in store" have only accelerated the trend for big box retailers to launch direct-to-consumer storefronts.
Even before the pandemic, 60% of Internet users started shopping on one device but continued on a different one, according to Google, and 82% of mobile users were using their phones to research purchases they intended to make in a store.
This kind of behavior demands that businesses take an omnichannel approach to providing an integrated shopping experience across all channels.
Amazon is changing the game for customer interactions. The online retail giant is continually adding new touchpoints in its evolution from a web-based bookseller to a global marketplace that reaches buyers through its connected home and car devices. It has lifted customer expectations for the buying experience and raised the bar in the Internet retail space.
The increasingly complex matrix of devices that require unique content is challenging the effectiveness of the full-stack platform that was designed when consumer traffic was largely desktop based. By decoupling the stack in a headless system, marketers have full control over the user experience and can quickly react to customer behavior, while developers can focus on the process management systems.
5. How does headless commerce work?
You can define headless commerce as everywhere commerce that works by giving brands a new level of agility. At the heart of a headless approach are the APIs that deliver content as data from the decoupled backend to the storefront – whichever that may be.
If a retailer wants to launch checkout options through a connected car, wearable device, or home speaker system, it is simply a matter of adding a new API call. This avoids the risk of breaking the coding by attaching plugins or switching to a new platform to be able to incorporate the new features. In short, headless enables streamlined omnichannel delivery to the consumer.
When a customer makes a purchase, the headless commerce platform sends an API call to the commerce engine to process the transaction. The call brings together data from the order management system, payment processing infrastructure, product information manager and other systems to complete the transaction.
The ability to call on these data sources is also a powerful tool for content creation. A DXP uses the data delivered by the APIs as a basis for creating the personalized content that builds customer loyalty, bringing customers back for repeat purchases.
6. Is headless commerce modular?
The decoupled backend of a headless architecture is made up of individual, interconnected modular components that serve as building blocks for the platform. Modules are the coding that delivers the transactional functionality to power the commerce process, including product catalogs, order management, payment processing, subscriptions, and so on. APIs deliver data between modules and connect them to the frontends, or storefronts, to create customized content.
The modular setup enables the cross-functionality that makes headless commerce flexible across a range of channels, unlike the linear approach of a traditional architecture. Ecommerce stores can pull information from several modules to create personalized content that is tailored to the user based on their browsing and purchasing habits.
As modules operate independently and send only the specific data as needed, the platform can run faster without large volumes of data transfer. Modules collectively form a “commerce stack” on the backend of the platform.
This approach is scalable, allowing developers to add new features and channels as the business expands by connecting new modules rather than having to migrate or upgrade the entire platform. They can select the best tools for each function, without having to compromise in favor of other parts of the platform.
The modular approach is also resilient, as it means that creating and testing new functionality in one module does not disrupt the user experience delivered by the other modules or the frontend.
7. What are microservices for ecommerce?
Microservices are the deployment of software applications within the backend of an ecommerce platform, enabling a modular approach. Microservices can be hosted in a cloud-based system as an alternative to a server-side software package.
While a monolithic architecture can implement modular components, a distributed microservices architecture packages functions into decoupled services that make the use of multiple modules more efficient. Efficiency is key as it allows businesses to be more agile in responding to consumer trends quickly.
The advantages of the microservices approach for developers include:
- Developers can code services independent of programming language and database.
- Developers can use the technologies that are best suited to different services to create a best-of-breed platform.
- Each microservice can scale independently, in a way that suits different characteristics.
- Developers can shift from a monolithic architecture to a microservices approach incrementally, making sure that the platform buildout is robust and errors are detected earlier in manageable stages.
- Developers can start with the most critical parts of the system and extend to new channels such as mobile devices, social media apps, and connected home appliances.
Microservices are well suited to large organizations that can handle complex systems and allow large teams to work on the platform simultaneously, which can be more difficult with a monolithic architecture.
8. What is composable commerce?
“Composable commerce” is a term that technology research and consulting firm Gartner has trademarked in reference to modular ecommerce. A modular infrastructure can be described as “composable” in that it is constructed, or composed, from an interconnected set of components to create a platform tailored to the needs of the business.
Gartner predicts that by 2024, 30% of organizations will use modular architecture to compose ecommerce applications.
Developers can compose their commerce platform by switching out, upgrading, or adding modules and microservices individually without having to manage multiple dependencies across the system. By composing the backend of a headless commerce platform, businesses move away from using a full-stack packaged platform to a distributed commerce stack that uses microservices to create a fully customized platform.
This approach provides a way for businesses to future-proof their digital platforms by using APIs to connect and scale features in the form of microservices. Retailers can respond to the changing ecommerce environment by adding functionality and customer services as needed.
9. Is headless right for your business?
While headless ecommerce uses a flexible, fully customized platform or commerce stack that can handle complex operations, this can be too much for smaller retailers and start-ups. Some considerations when evaluating a move to headless:
- Set up and development costs of curating a tech stack vs using an all-in-one platform
- A lack of front-end templates for content marketers requires developers build visual interfaces
- Ongoing costs to maintain an advanced, distributed system
- Development teams are required to write APIs to connect modules and microservices
- Complexity in the structure of a headless architecture with multiple interconnected parts that need debugging independently
- Stability risks of a modular commerce stack in the event of a poorly developed architecture
- Microservices keep data decentralized, requiring multiple databases
- Each microservice requires individual testing to make sure all possible integrations function correctly
- Monitoring and operating microservices requires the use of advanced automation tools
Businesses can address some of these challenges by adopting a hybrid ecommerce architecture. A hybrid approach brings together some of the simplicity of a traditional monolithic platform with the ability to add multiple modules and storefronts, although this is less flexible than a fully headless setup.
10. What are the benefits of headless commerce?
Retailers are facing greater demands than ever before to provide a tailored user experience, respond quickly to customer trends and new technologies, and support more devices. A headless ecommerce architecture has multiple benefits over a traditional platform in helping retailers meet those demands.
- Personalization. Headless platforms give developers the freedom to create tailored experiences for shoppers that increase conversions and deepen customer loyalty.
- Omnichannel presence. The use of APIs allows retailers to build branded content that is consistent across channels, adding frontend experiences to any customer touchpoint or channel in response to market trends.
- Customized platform development. Developers can select the right tools and programming languages for each functionality the business needs, integrating them to build a seamless architecture. This creates a best-in-class platform and makes it easier to swap out modules.
- Speed to market. A decoupled architecture allows developers to add new frontend experiences and touchpoints quickly and efficiently without requiring changes to be coded in the backend.
- Flexibility. Developers can add new modules or microservices to keep pace with demand and technological changes, rather than having to upgrade or replace the entire platform.
- Experimentation. A/B testing allows developers to run multiple tests to determine the most effective content design without disrupting the user experience, while marketers can experiment with new content without disrupting backend processes.
- Enhanced security. Separating functionalities makes it easier to monitor the system and reduces the risk of data breaches. Functionalities are hidden under modular coding and APIs are set to read-only mode, increasing protection from malicious attacks.
- Error reduction. Individual microservices incorporate limited functionality, reducing the likelihood of version conflict or errors caused by other processes.
- Lower total ownership costs. Headless systems reduce the need for costly platform redeployment. They can be scaled up and down in response to demand, for example during and after seasonal promotions, avoiding performance instability and lost sales, while mitigating over investment in capacity.
- Improved website performance. A decoupled, modular architecture is faster and more responsive than a traditional architecture, as APIs call only the data needed to run a specific process.
- Employee adoption. Separating the backend from the storefront allows employees to specialize in their strengths unlike the constraints of a prepackaged platform. Developers can use their preferred programming language and tools and marketers can develop content without requiring knowledge or reliance on backend.
11. What are some of the myths surrounding headless commerce?
Some businesses might be hesitant to deploy a headless architecture because they hold certain assumptions about the implementation. Common objections include:
- Moving from a monolithic to headless architecture will require ripping out the existing platform.
Headless systems can be layered onto a full-stack commerce engine gradually, integrating modules over time for a seamless migration that will not disrupt storefront operations.
- A decoupled structure with multiple modules slows down the platform.
The modular structure is faster and more efficient, delivering only the data needed to run each function.
- Switching to a headless platform is expensive.
Although a headless architecture requires more initial development, it saves on the cost of future platform development and creates more profitable opportunities in speeding up rollouts of new features that increase conversion rates.
- The complex integration of microservices and APIs makes headless inflexible.
Headless systems allow businesses to become more agile as they can add and switch out microservices and write or adjust APIs depending on their needs, making them more flexible.
12. Where can you create headless experiences?
One of the key benefits of a headless e-commerce architecture is the ability to create user experiences on virtually any channel or device.
The decoupled design allows retailers to create content that can be delivered seamlessly across operating systems and formats, tailored to the viewing experience. In the past, a storefront optimized for a desktop browser might not translate well to a mobile browser. But with a separate customized frontend, content designers can customize layouts so that they scale correctly on different devices.
The same backend systems can feed data into a range of storefronts including:
- Mobile apps
- Social media apps
- Wearable devices
- Virtual reality headsets
- Connected home appliances
- Connected cars
- Smart billboards
Customer experience is key to business growth. With a seamless omni-channel experience, consumers can browse to cart on one device and checkout on another, while brands can meet customers where they are by enabling more shopping channels the convenience increasing conversions with so many consumers constantly on the move.
13. What is a headless commerce use case?
Fitness clothing and equipment manufacturer Under Armour demonstrates the integration of personalized content with the transactional shopping experience in its direct-to-consumer operations. Its e-commerce platform brings together data from its order management system, product catalog, traffic history, payment processing, and content management system.
The Under Armour mobile shopping app is integrated with data from its fitness apps to create a personalized experience for customers based on their workout history, physical environment, purchase history, and visits to store locations. Customers have a single account profile that works across all Under Armour's apps.
The app also offers exclusive video content featuring sponsored athletes, providing users with inspiration for a variety of athletic activities and workouts.
In-app recommendations present shoppers with personalized product options that they are more likely to purchase. For example, a user in a cooler climate that has logged outdoor workouts on one of Under Armour’s fitness apps will receive recommendations for its ColdGear range of base layer clothing for cold weather. The app features one-touch payment with Apple Pay and clothing tag scanners for use in-store.
14. Where does headless fit into omnichannel retail?
A multi-channel strategy can deliver different content to different devices, while an omni-channel strategy creates a seamless branded user experience across channels.
Research from consulting firm McKinsey shows that more than 50% of customers engage with 3-5 channels each time they make a purchase or resolve a request.
Consumers expect a consistent experience across shopping platforms, but many retailers are yet to catch up to those expectations, research firm Forrester noted in a recent study, adding that retailers must enhance their backend systems to drive the operational improvements that foster omnichannel capabilities.
Headless architecture enables retailers to adopt an omnichannel approach with speed and flexibility as developers can add new microservices to deliver content to the new channel and power transactions.
Retailers can create a seamless experience between physical and online channels, allowing shoppers to scan products in a store (or in their kitchen) to create shopping lists they then purchase with their mobile devices. The retailer in turn sends customers personalized recommendations based on their shopping behavior, that increases convenience, boosts repeat purchase, and deepens customer loyalty.
15. What is a headless commerce platform?
A headless commerce platform is the software architecture that decouples the ecommerce engine from the storefront of an online retailer. Headless commerce platforms are also called API-led platforms, as they use application programming interfaces (APIs) to connect the backend functionality with the frontend.
Headless platforms give businesses the flexibility to design the fully customized platforms they need and allow them to easily integrate third-party tools.
Some of the best-known headless ecommerce platforms include Elastic Path’s Commerce Cloud, Commercetools’ Commerce Platform, and Core DNA’s digital experience platform.
Most of the major ecommerce platforms have responded to the headless trend by introducing tools retailers can use to add an element of headless functionality to their monolithic systems, creating a hybrid approach:
- Magento Commerce offers customers the option to integrate elements of headless functionality into their existing ecommerce architecture.
- Salesforce Commerce Cloud supports headless applications, but also offers low-code alternatives for retailers that do not want to go completely headless.
- BigCommerce has decoupled and opened the core components of its platform so that they can be integrated with other tools and platforms.
16. What is retrofitted headless?
Retrofitted headless ecommerce is a hybrid approach that combines elements of a traditional architecture with elements of a modular headless platform. A hybrid headless ecommerce platform based on open APIs can be retrofitted to a monolithic platform without disruption to a retailer’s operations.
Some traditional ecommerce platform providers such as Shopify are starting to offer headless tools or modules that can be retrofitted to their platforms to give customers more flexibility within the bounds of a monolithic architecture. This differs from a fully headless microservices-based platform where the storefront is completely detached from the independent, interconnected backend systems.
Some retailers – especially smaller businesses without large development teams – want the storefront templates that are missing from a headless platform, or want the flexibility to customize the user experience while keeping their existing backend systems. They may not need the complete control to build their entire platforms from scratch. Instead they are adopting this hybrid approach of using APIs to attach new functionality to their existing platforms.
However, it does not offer businesses the same level of agility in launching fully customized omnichannel experiences to the consumer.
17. Is WooCommerce headless?
Going headless removes WordPress as a content management system, but as WooCommerce and WordPress already have API capabilities, developers can create storefronts without having to make critical changes to the platform’s core.
Developers can incorporate customer relationship management systems (CRMs), payment gateways, Payment Card Industry (PCI) data compliance, along with hundreds of plugins available for WooCommerce to enhance its functionality.
The limitation of using WooCommerce in a headless platform is that it can sometimes encounter issues with scalability. That makes it less suitable for larger retailers, especially as one of the key benefits of headless platforms is scaling up and out with multichannel functionality.
18. What are some of the leading headless commerce apps & platforms?
Bold Commerce. Bold's API-driven solutions provide best of breed transaction experiences for brands adopting a headless architecture. This includes a customizable checkout to add transactional capabilities to any touchpoint, as well as subscription and price rules modules. Preset templates and pre-built integrations accelerate speed to market, while flexible APIs and webhooks enable branded experiences.
Commercetools. As a cloud-native, API-first Saas platform, commercetools headless commerce platform covers all backend processes and exposes data through a flexible commerce API. Features include a Merchant Center to manage critical data and processes, built in product information management (PIM), along with a growing marketplace of solutions and extensions to build with.
Contentful. Many headless e-commerce stores use the API-first Contentful content management system in the backend. When plugged into a headless ecommerce solution, brands can combine high quality content experiences with the commerce functionality they need.
Core dna. Core dna’s headless digital experience platform API enables retailers to create personalized experiences for the consumer on various channels. Its administration panel brings together content editing, product management, and visual design for multiple websites.
Elastic Path. The Commerce Cloud SaaS platform is designed to give enterprise-sized brands, manufacturers, and retailers the flexibility to quickly respond to market trends with a library of ready-to-use e-commerce experiences, including an out of the box storefront and pre-built payment integrations.
19. What is the advantage of headless for agencies?
Headless ecommerce is a valuable tool for digital marketing agencies that work with retail brands, as consideration of a headless architecture can help clients innovate and scale their digital footprint to drive revenue growth.
Adopting a headless approach can boost an agency’s client acquisition as it offers a way for retailers to enhance their e-commerce user experience without having to undertake an expensive and time-consuming platform migration. Brands that have a CMS without e-commerce functionality can add storefronts with a seamless, fully customized platform and maintain a content-led strategy.
Agencies can assist clients in evaluating whether a headless architecture is right for their business and deciding which platform and apps to use to help them execute their strategy.
20. Is headless commerce right for your brand?
If you are unsure whether headless is the right approach for your business, you should consider the following questions:
- Is your brand content driven?
- Does your brand strategy include omnichannel delivery?
- Does your brand have multiple microsites you want to manage from a single backend?
- Does your strategy roadmap include launching enhanced user experiences like augmented reality, artificial intelligence, and personalization?
- Does your business have a development team in place that can build the frontend and APIs needed to connect to the headless platform?
- Does your business have the budget for the development and IT costs to implement a headless architecture?
- Do your developers need more flexible tools to create the commerce tech stack your strategy requires?
- Do you want to add ecommerce and innovative customer experiences to an existing CMS?
- Is your business looking for ways to increase conversion rates and reduce customer acquisition costs?
- Will your brand launch in new geographies and languages?
- Will your growing business need to scale up e-commerce platform functionality in the future?
- Is your development team looking to switch from a server-based software package to a cloud-based SaaS solution?
- Would your development and marketing teams be able to work more effectively with your ecommerce platform’s backend code separated from the frontend?
- Does your brand operate in a competitive environment in which a faster time-to-market would create an advantage?
21. What questions should you ask before choosing a headless frontend?
Once you have decided to adopt a headless commerce approach you will need to choose a compatible head, or frontend, that fits your content strategy. Consider these questions to help make the decision:
- Will you use a decoupled storefront app or build the functionality from scratch?
- Which frontend framework do your developers want to use, e.g. React, Angular?
- Is the presentation layer fully headless, completely decoupled from backend commerce or content functionality and using APIs?
- How will the frontend integrate with the backend commerce engine?
- Is the frontend based on a serverless model?
- How will you hide and protect frontend code?
- What monitoring and security tools will your developers use?
- Will the infrastructure be scalable?
- Will the development team be able to provide ongoing technical support?
- What competitive advantages will the storefront create?
- How long will it take to implement?
22. How do you go headless?
Your team might have decided to adopt a headless commerce architecture, but how do you go about the implementation? Migration is often a phased process - especially when deconstructing a monolithic platform - in order to mitigate disruption to the customer experience and reduce risk to ongoing business.
- Analyze the strengths and weaknesses of your current platform.
- Narrow down your priorities for the new architecture and what will make it a stronger platform.
- Identify ways to enhance the user experience with the new functionality.
- Identify any additional headcount you may need for the development or content teams.
- Set the budget for the migration.
- Select which backend platform, storefront and integrated apps you will use, and which functions your developers will build.
- Plan how to migrate product and customer data to the new platform.
- Make sure the development and content marketing teams are briefed and clear on how the migration will proceed, what is required of them and how the new architecture will work.
- Develop a roadmap and timeline for the rollout.
- Implement changes in phases. Starting with the frontend can quickly enhance the user experience and improve metrics that in turn build confidence and momentum to continue migrating backend functionality gradually using microservices.
- Capitalize on the new platform’s flexibility by launching new campaigns, promotions, and commerce-enabled channels.
23. What are some brands using headless commerce?
If you are looking for live examples of the features that a headless platform enables, consider these brands:
Amazon. A leader in headless commerce, Amazon has migrated from a monolithic architecture supporting its small online bookstore to become an omnichannel retail giant with its own cloud-based microservices platform, Amazon Web Services (AWS).
Chillys. Global sustainability brand Chilly’s launched a new website on a headless platform that combines Shopify Plus with a custom frontend that offers visual product personalization, multiple languages, and multiple currencies.
Crate & Barrel. The homewares retailer incorporates Shopify Plus with the Amplience CMS and digital asset management platform into its architecture, which enables it to provide interactive website content, a mobile shopping app and connected store applications.
Glossier. The direct-to-consumer beauty business made the transition from content publisher to omnichannel retailer with a headless platform that integrates a Contentful CMS.
Impossible Foods. The vegan food manufacturer migrated its static website – which lacked information and failed to generate leads – to a new site based on Gatsby JS framework, Shopify Plus and Contentful CMS, reducing its bounce rate and increasing customer engagement.
Spotify. Migrating to a custom-built microservices platform has allowed Spotify to scale its online audio streaming service to more than 300 million users in 92 markets.
24. What is the MACH Alliance?
The MACH Alliance is an organization that advocates for a technology ecosystem involving the following: Microservices based, API-first, Cloud-native SaaS and Headless.
Their mission is as follows: to "Future proof enterprise technology and propel current and future digital experiences."
With the evolution of modern technology brands are thinking of new ways to do business and meet customer needs. MACH was formed as an alliance of brands and companies seeking to take advantage of the most innovate forms of enterprise technologies available.
The commerce architecture they support involves every component is pluggable, scalable, replaceable, and continuously improved through agile development to meet evolving business needs and customer expectations.
Bold is a proud member of the MACH Alliance along with many of our agency and technology partners.
Are you ready to reimagine commerce?
Bold Commerce builds headless commerce solutions that let your business scale dynamically, get to market faster, and create high-converting, consumer-centric experiences across any touchpoint. Find out if API-powered commerce is the right fit for your business.
Get the knowledge and inspiration you need to grow your business.
Bold Commerce needs your email to send newsletters. For more information, read our Privacy Statement.