<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=661978321021605&amp;ev=PageView&amp;noscript=1">

Headless Commerce Guide: Going Headless in 2021

Bradley Taylor

Bradley Taylor

June 15
  •  
15 minute read
Headless Commerce

Modern e-commerce has evolved to where customers no longer do most of their shopping on a traditional website. Instead, shopping takes place on mobile apps, IoT devices, and many other channels.

The commerce platforms created to support traditional online browser shopping are unsuitable for high-quality customer experiences across an ever-increasing range of channels. Thus, the concept of headless commerce emerged to help businesses provide seamless shopping experiences for any channel there is or will emerge.

Headless commerce sounds confusing, but the concept is quite simple: you detach a head such as a website that uses a traditional CMS from the backend commerce functionality (e.g., cart). You do so with application programming interfaces (APIs)

By detaching the head, you open up the opportunity to connect multiple heads to the same backend. It also enables scalable multi-channel commerce as all heads and sales channels are synchronized.

In this extensive guide, we will continue to elaborate on what headless commerce is and cover the following:

  • Understanding Headless Commerce
  • Benefits of Headless Commerce
  • Building a Headless Solution
  • Exploring Our Headless Solutions

Note: Headless commerce is often confused with modular commerce or microservices-based commerce. To go headless, you can either use a microservices- or monolithic-based backend. We recommend the former for mid-market and enterprise companies; the latter for SMBs. This Forbes article elaborates on headless vs. modular commerce and explains how you can use them together.

 

Understanding Headless Commerce

Why is headless commerce important?

In the early days of e-commerce, the needs and use cases of platforms were more straightforward than today. Companies handled the data and content for their own website, not other online channels. Visitors could only access the company’s store via a desktop computer.

The result was the creation of “monolithic” platforms like Salesforce Demandware, Oracle ATG, and even Shopify that provided a single solution for managing the e-commerce experience. 

At the time, the breakthrough was significant. The primary adopters of these platforms were larger businesses because they had the resources to invest in the professional development needed to set up the platforms.

Commerce-led vs. content-led selling

Over time, the limitations of monolithic platforms led businesses to adopt a commerce-led approach. With this approach, the e-commerce website focused entirely on commerce functionality, giving companies the ability to implement more features.

There were drawbacks, however. Commerce-led websites did not offer many tools for marketing and content creation. They often used basic templates to create the storefront, limiting customization ability.

Businesses looking to build better connections with customers eventually started the content-led approach. The focus shifted to content over commerce features. Companies started using content management systems (CMS) instead of e-commerce platforms to build their websites. Options for creating content improved but limited the storefront even more.

The rise of the headless CMS

Rapidly evolving consumer preferences and emerging new technologies further shifted the requirements for the modern e-commerce platform. As a result, today’s shoppers do not access the internet from a single device. Instead, they use a variety of mediums, including computers, smartphones, and IoT devices.

A study from Harvard Business Review found that 73% of consumers engage with a brand through multiple channels during their buying journey. Further research shows that companies with omnichannel engagement strategies retain 89% of their customers compared to 33% for those with weak omnichannel engagement. 

A successful omnichannel strategy requires consistency across experiences, content, stock levels, and pricing. Each unique touchpoint requires a different approach to optimize each experience to match customer expectations.

It’s difficult for traditional e-commerce platforms to manage as each frontend used the same template. If the platform employed a responsive web design, the template would adjust based on the user’s screen. But this wasn’t foolproof. The display could have trouble rendering correctly across a range of devices. 

Developers had to consistently monitor the responsive layout for each device to ensure all elements were present and displayed correctly. This was not scalable and one of the reasons the headless CMS emerged.

Now, headless CMS is almost synonymous with headless commerce as it gives companies the ability to create frontend experiences designed for specific channels. Without it, managing and distributing ever-changing content (product catalogs, design themes, etc.) across multiple channels leads to inconsistent cross-channel experiences.

What no one tells you about headless commerce

While there is mystique around the term, headless isn’t new. Almost every major commerce platform is headless to an extent, even the legacy platforms like Salesforce. Headless commerce exposes the platform’s backend through APIs and manages content with a headless CMS like fabric XM and Amplience.

The true leading-edge approach to e-commerce architecture is modular commerce, an idea pioneered by Amazon. It was this innovative approach that allowed Amazon to grow much faster than its competitors. 

Other forward-thinking companies like Staples followed suit and were able to experience similar success. It is gaining more traction as many smaller, high-growth companies are using modular commerce to scale faster.

While modular commerce is interesting (warranting an in-depth analysis of its own), it is not this post's focus. In this guide, we establish a clear understanding of what headless commerce is and how it works for brands and retailers. 

What is headless commerce?

Headless commerce is an approach to e-commerce architecture where the frontend (or head) is separated from the backend.

The frontend vs. backend

The frontend is the customer-facing presentation layer. That is where you change how your storefront and product catalog appear to the customer. Each device (or channel) has its own front end, built with its own codebase and programming language. 

The frontend must be able to communicate with the backend to pull crucial information such as product prices. It must also ensure that stock levels are consistent across every channel. Doing so creates some challenges when having to manage a large number of frontends.

The backend handles the business logic and commerce services. Commerce services include order management systems, shopping carts, product information management (PIM) systems, pricing engines, personalization engines, and payment gateways.

These services could exist in a single backend system or as microservices in a modular setup. The latter is more prevalent among larger companies looking to scale. The added flexibility makes it easy for them to implement any necessary features without limits.

For smaller businesses, this granular level of decoupling is not usually necessary. Most will benefit from a traditional headless setup. By separating the front and backends, they can customize multiple frontend experiences without managing dozens of individual services.

How does headless commerce work?

With headless commerce, all the frontend channels (and backend services if you’re using microservices) communicate with each other through application programming interfaces (APIs) managed by API gateways. Below is a simple diagram of how this works:

api-gateway-diagram

Headless commerce works using several important technologies:

APIs

The main component of the headless architecture is APIs. Headless APIs use specified protocols to allow applications with different frameworks to communicate with each other. It is how the independent parts of the headless architecture work together. 

The ability to connect through APIs removes the dependence on specific frameworks. As a result, teams can avoid using single technology or programming language. 

The APIs are used to push information to every channel, like mobile devices, wearable tech, or smart appliances. When a customer engages with a frontend, it initiates requests between the front and backend application layers. That enables the communication between the following backend processes.

Backend systems

  • Inventory management: handles the tracking of goods throughout the supply chain. Inventory systems allow other applications to have an accurate availability of products in real-time. 
  • Order management: you have a centralized place to manage and process orders from any channel. The software connects with other applications through APIs to provide order details or status updates.
  • Cart and checkout: allow customers to select items for purchase and captures their payment details with secure payment gateways. Most companies choose to integrate a third-party gateway instead of constructing their own.
  • Product information management: handles all essential product data for the items in your catalog, including SKUs, titles, descriptions, and images. Other parts of the headless system use the data to ensure the data is consistent everywhere.
  • Customer relationship management: collects information on your customers, such as their shopping behavior and order history. Companies typically use a third-party CRM platform to analyze customer data to create better shopping experiences.

Headless CMS

A headless CMS is a backend solution for managing content. The software evolved from the traditional CMS, where content and display layers are combined. 

Instead, a headless CMS functions as a content repository because the presentation layer is separated from the “body” where content is stored. The headless CMS makes content available to different frontend displays via APIs. 

Essential to managing content across channels, the software gives you a centralized place to create experiences unique to each touchpoint. Designing these frontend displays is simple. Solutions like fabric XM provide an intuitive page-building interface that allows you to create reusable components.

What’s an example of headless commerce?

The core steps needed to generate sales do not differ between traditional and headless commerce. Brands must create a frontend experience, convert the customers, and then process the order.

Where the two approaches vary is how the e-commerce system handles the process. With headless commerce, APIs are essential to ensuring the process runs smoothly. Here is an example of what a transaction can look like from start to finish with a headless ecosystem:

  1. A brand or retailer creates a frontend presentation specifically for mobile devices inside a headless CMS.
  2. APIs push this display to the channel, making it accessible to customers.
  3. Customers engage with the content through their mobile devices.
  4. A converting customer places an order by completing the checkout process.
  5. The headless frontend sends an API call to the backend OMS to create an order with the provided details.
  6. Another API call goes to the payment processor with the payment information.
  7. After the payment is processed, API calls go back to the frontend and OMS.
  8. The customer is redirected to a confirmation screen, and the OMS updates the order status to processing.
  9. The inventory management receives an API call to update the available stock to reflect the sale.
  10. The customer also receives a confirmation email with the order details. The responsible system depends on the merchant’s setup.

 

Benefits of Headless Commerce

The benefits of adopting headless commerce include improving website performance, rolling out updates quickly, and the ability to create great customer experiences across all your sales channels. Developers and marketers can work in parallel and have the flexibility to use the tools of their choice.

Below, we examine the key benefits of headless commerce in more detail and how the architectural approach differs from traditional commerce:

What are the benefits of going headless?

Omnichannel selling

Headless commerce is ideal for delivering your products and content to any sales channel, like smart homes, progressive web apps, cars, or any other future device. 

Not stuck with a single template, you can create custom experiences for each sales channel. You can also make content shoppable by adding your products to blog posts. APIs make it easy to integrate any number of channels without degrading your system’s performance.

Faster page load time

Headless commerce delivers content faster. The frontends of the system only use APIs to pull the content to display. On the other hand, traditional platforms share resources like CSS and JavaScript files and have difficulty handling a high number of concurrent users.

By separating the resources, the frontend can pull any data from the backend on demand without causing performance issues. Additionally, developers can work on any part of the system without causing drops in your site speed. As a result, traffic spikes are not an issue.

Flexibility for developers

Developers can make changes to the front and backends independently. If a developer is tweaking some backend code of a traditional system, a mistake could cause the front-end display to break. Anyone making changes would need to understand how the entire system works. 

Headless commerce gives your development team the ability to use any technology or programming language that they prefer. You have the flexibility to choose the best e-commerce platform for running your store while also using your preferred frontend solution.

Quicker updates

Headless commerce allows you to make rapid updates without affecting your system's functionality. Because the backend and frontend are not coupled together, you can update part of the system without changing the whole.

Amazon, the pioneer of headless commerce, deploys updates every 12 seconds on average. Doing so reduces the number and duration of outages drastically.

The ability to make agile changes is essential in a world where new technologies emerge daily. With a headless architecture, you can use APIs to connect any new technology to your existing system easily.

Better customer experience

Headless commerce gives brands and retailers the ability to create the best possible customer experience. Users aren’t bound to predefined templates, unlocking unlimited creative opportunities for designing frontend experiences.

Marketers can create unique content and presentations for each touchpoint. With headless APIs, the optimized displays are pulled to the user, giving them a great experience no matter the device or channel.

With the distributed architecture, you can choose a best-in-breed personalization software, whether it’s a digital experience platform (DXP) or a recommendation engine. These platforms leverage machine learning to create optimal recommendations for customers.

Enhanced security

Headless commerce relies on APIs to deliver content, which is often more secure. The system’s flexibility enables businesses to roll out quick security updates when needed quickly.

Because there isn’t a single system, one compromised account does not have the potential to compromise everything. Headless commerce also allows for better PCI compliance.

Easy integration with your existing systems

Headless commerce systems integrate well with other parts of your e-commerce ecosystem. You can simply use the headless APIs to connect any backend service or third-party application.

What are the challenges with going headless?

While headless commerce can help various businesses, it may not be the best solution for some companies. Some common concerns are:

  • Ongoing costs: Most headless services do not provide a frontend. Because of this, companies often consider the cost of having to develop, maintain, and update their own frontend system.
  • Added complexity: The flexibility provided by headless systems can also make them more complex. Some teams may find it challenging to use a distributed system instead of one single solution.
  • Time to implement and difficulty of replatforming: Setting up backend applications and creating many frontend experiences can slow down how quickly you can implement a headless system. Many companies do not like the idea of having to replatform; it can lead to serious downtime.
  • Shifting processes and culture: Most companies only ship new features every few months with a monolithic platform. With headless, they’ll be shipping new features continuously. Such change requires the organization to bring on strong technical talent to handle the responsibilities.

Which companies should go headless?

Headless commerce has many benefits, most notably complete control over customization, flexibility, and speed. This draws the attention of a wide range of businesses. Some types of companies most likely to go headless are:

  • Those who sell through a large number of channels
  • Brands that want to create world-class experiences
  • Site owners that want to add commerce capabilities to any existing CMS
  • Businesses that want more checkout security and easier PCI compliance
  • Companies that want to reduce the workload for IT and developers by partnering with a SaaS provider

Is headless commerce suitable for B2B companies?

B2B commerce is shifting rapidly. More buyers and sellers are turning to digital channels. B2B companies need flexible and feature-rich commerce solutions to keep up with the changes in customer expectations. 

Headless commerce allows B2B companies to design content-rich pages and quickly spread them to whichever touchpoints are needed. Better personalization improves your ability to surface highly relevant content and products to your customers.

With a decoupled backend, you have unlimited options for adding new features. It is ideal for creating a top-level B2B customer portal equipped with self-service and account customizations.

What’s the difference between traditional and headless e-commerce?

Traditional e-commerce platforms are considered monolithic. This is because the front and backends are coupled together, creating one massive platform. Design work and e-commerce functionality occur within the same system.

The backend databases contain the code for the frontend layouts and content. There is limited flexibility, and it is difficult to run complex business logic at scale. The main draw of a traditional e-commerce platform is that you have one end-to-end solution for creating and managing your e-commerce experience.

Traditional platforms use templates for building frontend presentations. This can improve ease of use but limits how you can customize your frontend designs. You can edit some aspects of the frontend layout, but not all. As a result, how much and what you can customize is determined by your platform provider.

By decoupling the front and backends, headless commerce offers more control over the user experience. The code is not intermingled, so frontend developers can make changes without possibly breaking something in the backend. Businesses have the option to keep backend systems separate from each other.

Headless commerce platforms are channel-agnostic, meaning they integrate with any sales channel or device.

 

Building a Headless Commerce Solution

To build a headless solution, you must determine what commerce platform suits your needs best. Small businesses will likely want to add APIs, while mid-market to enterprise companies may consider a services-oriented architecture.

You then need to choose a headless CMS solution and sync that platform to your sales channels and other backend systems via APIs. Let’s examine this process in more detail.

Step 1: Keep or switch your commerce platform

First, determine your commerce platform. You can use either a monolithic or microservices-based solution, as long as APIs expose the backend.

If you’re a small business using a platform like Shopify Plus, keeping your current platform may be the most effective option. Shopify has a suite of APIs you can use to adopt a headless approach without needing to migrate.

If you’re a mid-market or enterprise company using a monolith like Shopify Plus or Salesforce Commerce Cloud, you may consider moving to a service-oriented backend. Doing so provides greater flexibility and allows you to scale your infrastructure as your business grows.

Although you can build the services-based system from scratch, it is generally not a strength for companies. In-house solutions also make you dependent on the developers who built the system to maintain it and make future updates.

A more effective approach to modern headless architecture is to use a SaaS provider.

Headless commerce platforms

There are many other commerce platforms (all of them monoliths) such as Oracle ATG, Magento, and BigCommerce. These are some more modern headless commerce solutions:

 

fabric

Commercetools

Shopify Plus

SF Commerce Cloud

Platform Architecture

Microservices

Microservices

Monolith

Monolith

API-First

Yes

Yes

No

No

Developer-Friendly

Yes

Yes

No

No

Merchant-Friendly

Yes

No

Yes

No

Extensible

Yes

Yes

No

Yes

Headless CMS

Yes

No

No

No

Takeaway: If you’re an SMB using a monolithic platform with APIs, keep your platform. If you’re a mid-market or enterprise company, move to a service-oriented platform to scale while implementing headless commerce.

Step 2: Choose a headless CMS

Next, decide which system manages your content. If you intend to deliver content to more than one presentation channel, a headless CMS is the most appropriate choice. With a traditional CMS, you would need multiple platforms to distribute optimized content to different channels.

With a headless CMS, you can create content optimized for each channel using a single platform. APIs can then quickly spread the content across multiple touchpoints:

headless-cms-4

There are several types of headless CMS solutions you can use. First, there are open-source headless CMSs that provide access to the software’s codebase. These solutions offer maximum customization but require a greater level of technical knowledge.

The other option is to use a headless CMS from a SaaS provider. SaaS solutions are easier to manage and allow you to set up your headless CMS much faster. With a robust platform like fabric XM, you can have powerful customization abilities without the technical complexities.

Step 3: Sync APIs with headless CMS

Once your CMS is in place, you must sync your APIs with the CMS to ensure a smooth flow of data. Platforms like fabric XM are frontend agnostic, meaning developers can use any frontend framework (React, Angular, Vue).

The APIs can consume the content without making adjustments based on the channel. By connecting a frontend channel (head) to the CMS, you can preview how the content presentation looks.

If you’re moving from a monolith to microservices, you can use this phase to break down your platform into individual components slowly. You can start with a single component and swap out the APIs from the monolith to new services.

 

Going Headless with fabric

There are many advantages to headless commerce. Yet, the simple thought of replatforming discourages many brands from adopting a headless system. The right headless service can eliminate the challenges and complex decisions involved in changing your system.

Modular e-commerce services like fabric use a top-down approach to evolve your platform gradually to avoid costly downtime. Instead of the traditional rip and replace method, you integrate piece by piece on top of the existing platform. Businesses can enhance the customer experience immediately while gradually adding new processes over time.

Our robust suite of e-commerce APIs brings cohesion between all components of your e-commerce system. You can use the APIs to integrate data from all your sources into fabric XM. Doing so allows you to create highly personalized experiences at scale seamlessly.

In today’s world of commerce, brands and retailers that want to remain successful must prioritize agility and flexibility. Headless commerce achieves those best. There is no need to build headless solutions in-house. SaaS providers have all you need to create winning shopping experiences at scale.


Bradley Taylor

Bradley Taylor

Tech advocate and writer @ fabric. Also builder of e-commerce solutions and creator of Digi Profits.