The term “headless commerce” has become an ecommerce buzzword over the past couple of years — but what is it, and how can brands use it to their advantage? 

In this article, we’ll look at what headless commerce is, the advantages of adopting a headless setup, and some use cases and examples. 

What is Headless Commerce?

Headless commerce, in simple terms, is the separation of the front and back end of an ecommerce site or app. 

Effectively, the front end of the site (the visible elements that users interact with) is decoupled from the back end. The front end is the head, hence ‘headless commerce’. 

This separation offers greater flexibility for businesses, allowing brands to make changes to the front end customer experience more quickly and easily. That means merchants can benefit from various opportunities that would otherwise be unavailable to them, including:

• Freeing businesses to use whichever front end tools or platforms make sense for their business, independent of the ecommerce engine they happen to have chosen.
• Allowing merchants to plug in commerce functionality to additional channels, or provide new experiences for shoppers, quickly and easily.

In increasingly competitive ecommerce markets, customer experience can be the key differentiator for ecommerce. Headless commerce enables brands to make rapid changes and adapt their offerings for all types of web devices, from smartwatches to in-store kiosks. These varied front end interfaces can be managed ‘headlessly’ from the same back end. 

Headless CMS systems have caught on in recent years, as businesses have recognised that the system controlling all of their content need not be the same as the system managing the frontend of their website. Headless commerce follows on a similar principle, allowing merchants to separate their ecommerce system from their front end tools – whether those are websites, mobile apps, or other commerce experiences.

How Does Headless Commerce Work?

Headless commerce separates the presentation layer — the front-end  website or mobile app the end shopper sees — from the ecommerce platform (the back end). 

In this case, the ecommerce platform still carries out back end tasks, such as inventory management, security, checkout, payments, etc. 

However, rather than being fully coupled – or intertwined – as with a standard ecommerce experience, the back end and front end communicate with each other through API calls, sending data back and forth between the two while the shopper is provided with a seamless experience. 

Headless Commerce vs. Traditional Commerce

To understand how headless commerce platforms work, it can be useful to compare a headless setup to a traditional ecommerce setup. 

The contrast between the two systems can highlight some of the key advantages of a headless model. 

1. Traditional commerce.

The traditional ecommerce model is one in which the front end and back end are closely linked. The backend contains the content, and code for layouts and plugins used on the front end. 

Essentially, everything is packaged together. This can have some advantages—a simple out of the box solution can be better suited for SMEs looking to sell online very quickly, particularly where there is little likelihood of the business growing in complexity over time.

However, some businesses quickly move into a situation where they wish to make changes to the front end of their website, but are limited in doing so based on the guardrails of their chosen out-of-the-box solution. 

Moreover, with the back end and front end closely linked, changes to code can have unintended consequences.

2.Headless commerce.

Headless commerce is about flexibility, and greater opportunities to customize and improve the customer experience.  

With a headless architecture, the front end experience is not dictated by any backend CMS or commerce platform. Merchants can choose whichever front-end platform makes sense for them, whether that is an existing front-end design, an off-the-shelf template, or something designed entirely from scratch. 

In practice this decoupling means that developers can design different brand experiences for new channels, tailoring them to best suit customer needs. APIs can be used to deliver content and commerce to websites, apps, smart devices, social platforms, and more. 

The potential is there to offer a front end customer experience which offers opportunities for greater personalization, and the opportunity to react to changing customer behavior, and for a constantly evolving user experience. 

Why Headless? Why Now?

Almost every ecommerce brand is competing with Amazon. It’s almost impossible to match them for choice and price across a range of products, and so content and customer experience can give you the edge. 

Headless solutions can help you to gain this advantage. Greater customization allows you to tailor content and commerce to your customers and the touchpoints they use. 

It allows for greater innovation, and speed of innovation which is hard to achieve using traditional ecommerce, and improved customer experience means improved conversion rates and lower acquisition costs. 

1. Advanced technologies to create visionary, fast websites.

Headless commerce allows for greater flexibility and the ability to test new technology quickly to find the blend that creates the best possible user experience. 

Merchants are freed to use best-of-breed front end solutions, offering lightning fast site speed, or advanced personalisation, along with best-of-breed back end systems.

2. Flexibility and familiarity for developers.

One of the benefits of headless commerce is the ability to pick and mix different platforms and technology to combine content and ecommerce, creating differentiated shopping experiences rather than fitting within the guardrails of off-the-shelf solutions. 

For example, while WordPress is a well-liked and popular content platform, it doesn’t always convert to ecommerce so easily. With headless, this doesn’t matter as the CMS platform can be combined with a more specialized ecommerce platform. 

So, you could use a CMS such as WordPress alongside an ecommerce platform like BigCommerce to get the best of both worlds. 

Equally, you may have a front end tool or framework of choice, that suits exactly your development needs – such as Gatsby or Next.js. A headless system allows you to retain that, and build upon it however suits your business and customer needs best, marrying it with BigCommerce to provide best-of-breed ecommerce functionality.

3. Speed to market for international and omnichannel GTMs.

The same principles which allow you to create custom experiences for your normal markets also allow for easier expansion into new markets and channels, with the ability to the expectations of shoppers in different regions, wherever they are.

4. Conversion rates and lower customer acquisition costs.

For brands relying on paid channels, customer acquisition can be expensive. Headless commerce can help you to reduce acquisition costs in two ways: 

• The ability to create a differentiated user experience can increase conversion rates and make the most of expenditure on acquisitions. 
• Headless helps brands to develop a content and experience led strategy to draw in organic traffic and repeat business.  

5. Complete ownership over site architecture.

In a fully coupled architecture, decisions around site architecture are often driven from the backend. For example, you may wish to implement a series of SEO features, but find yourself struggling as they conflict with the backend system’s product architecture. Through a headless system, the frontend is freed to diverge from backend aspects much more, removing such limitations.

Why should your ability to gain customers through SEO, and to provide them a great experience, be limited by your product inventory system? The answer is obviously “it should not”, but in some intertwined architecture systems that is exactly what happens—a little like a high street shop window being unable to feature the store’s most beautiful items because of a technical quirk of a warehouse system.

Headless Commerce Use Cases

Headless commerce can be an effective solution for a range of use cases and can be tailored to the specific needs of your business. 

Businesses are often tied to an existing CMS, DXP, or are using progressive web apps. With headless, you can mix and match favored tech solutions to find the setup that works best for you. 

1. Custom solutions.

Part of the beauty of headless commerce is it allows great flexibility in your tech stack. If your global team is well versed in the features of a custom CMS you’ve been using for many years, why throw that institutional knowledge away simply to launch ecommerce functionality? Instead, you may add the commerce functionality, and deliver it headlessly to the system your teams know and love.

Or indeed, just as you may use a single system for the front end, you may just as equally use a range of systems — for example, a watch interface, a custom interface in-store, a simple CMS such as WordPress, or even an off-the-shelf CMS with custom React features built on top.

Adding elements to the tech stack can add great complications in a heavily coupled front end/back end architecture. A headless solution leaves you free to build as you choose on the front end, knowing that work won’t disrupt your important commerce systems.

2. Content Management System (CMS).

Using a CMS as part of a headless setup opens up lots of options for content presentation and delivery. 

For example, brands may prefer to use WordPress for content. It’s the most popular CMS on the market and as such, it means that it can be easier to find content teams with knowledge of WordPress and to hire developers familiar with it. 

It means that marketing or content teams aren’t forced to compromise on their CMS as can be the case on some ecommerce platforms. A headless solution means your CMS can work alongside a more feature-rich ecommerce platform, removing the need for compromise. 

For businesses with a content-led strategy, headless commerce means that the best CMS can be combined with the best ecommerce platform. 

3. Digital Experience Platform (DXP).

Customer experience matters and digital experience platforms (DXPs) allow marketing and content teams to tailor and optimize the online experience for different users. 

For example, a good DXP will enable content to be optimized and personalized for different users, allow for effective merchandising across devices, and improve conversion. 

For marketing teams using a DXP, headless can work well, as it is API driven. This means that an ecommerce platform can be combined with a favored DXP. 

4. Progressive Web Apps (PWA).

Progressive web apps bring native web experiences to a range of devices, allowing content and marketing teams to deliver content effectively, whatever the channel or device the customer uses. 

With more and more customers using mobiles for content, commerce, and more — PWAs allow businesses to keep up with customer preferences, and to maintain the experience across devices. 

With a headless setup, brands can still use PWAs for the presentation layer, allowing teams to improve front end UX without changes to the back end.  

Headless Commerce Examples 

Let’s look at some headless commerce success stories. These four brands are each using a headless setup with BigCommerce in different ways that make sense for their specific business needs. The common theme is the ability to be flexible without a compromise in quality. 

1. Burrow.

Sofa retailer Burrow opted for a headless solution, using BigCommerce, as they felt that out-of-the-box solutions did not allow the flexibility needed to cater to their customers. 

Customization was key here, as Burrow wanted to offer capabilities that were non-standard in many ecommerce platforms, such as delayed delivery, and to support deliveries split across multiple warehouses. 

Burrow uses a headless CMS to create a digital experience across multiple channels, and so the headless option provides the ability to combine content and ecommerce effectively. 

After launching with BigCommerce, Burrow experienced a 30% increase in conversion rates within two months, average order values grew by 4% and site speed & performance increased by 50%.

2. Canvas 1839.

Canvas 1839 sells Cannabidiol (CBD), a growing market, but one which also faces suspicion and scrutiny from ecommerce platforms, payment providers, shipping firms, and more. This has been a challenge for a company looking to grow. 

By using BigCommerce, a platform sympathetic to the industry, and a headless solution, Canvas has been able to grow, and create the front-end experience it wanted to. 

Canvas 1839 uses a progressive web app (PWA) built on Gatsby alongside BigCommerce, providing freedom for innovation on the front end along with a supportive ecommerce platform. 

3. K2 Sports

K2 Sports is an umbrella site selling a range of related outdoor brands. Each of these brands needs the ability to maintain their own distinctive brand voice, product information, and service within the platform. 

K2 felt limited on their previous ecommerce platform due to a lack of APIs, while they also incurred costs for development time. 

The aim was to move to a more flexible model that allowed them to use their preferred CMS (Contentstack) alongside a SaaS platform. 

BigCommerce was chosen as the backend platform for its API performance and speed, and lower overall costs. K2 then launched 8 brands and 16 sites in less than 9 months using this headless setup. 

4. LARQ

LARQ is a company driven by sustainability, raising money for clean water initiatives, and selling self-purifying water bottles. 

The company was looking for flexibility and the ability to customize, as they were launching multiple international sites. 

LARQ chose to use BigCommerce as the ecommerce engine on the backend with a custom solution built with React on the frontend. This headless setup enables LARQ to control multiple international sites on a single domain.

The company has seen a 400% increase in revenue year-over-year and an 80% increase in conversion rate over three months since launching. 

Wrapping Up

A headless ecommerce setup is one of the best solutions for brands looking to deliver excellent customer experiences and to deliver content and commerce across multiple channels. 

It’s a solution that enables brands to innovate quickly and adapt to changing customer behavior and new technologies. The flexibility and ability to innovate provided by headless allows brands to future-proof their offerings. In a competitive online market, headless provides a solution that allows marketing teams to choose the best blend of technology to provide the front-end experience their customers are looking for.  Get a demo today.