What is Headless Commerce? Pros and Cons, Plus 8 Headless Site Examples [Updated 2022]

Headless Commerce separates your website’s frontend from its backend for better customization, conversions, and omnichannel experience.

By Gentian Shero

If you’re involved with the world of online retail, you might have heard the phrase Headless Commerce. But, what does it mean? Is going headless a good thing? 

Online shopping has seen immense growth since last year, which means the world of eCommerce has evolved — and fast. 

People aren’t just opening their laptops and pointing and clicking on your store like they were years ago. 

They’re making the most of subscription services, using tap-to-order interfaces for quick checkout, or simply shouting at Alexa to stock up on necessities.

How can your store keep up with these growing IoT devices? Well, you might have to lose your head.

Here’s what you’ll learn in this article:

Let’s start with the basics.

What is Headless Commerce?

The short answer: “Headless” refers to when the front-end of your site has been decoupled and removed from the back-end. Basically, they operate independently. 

This allows developers to use APIs to deliver products and content on the back-end. (To be clear, APIs are Application Programming Interfaces, which allow two apps to “talk” to each other.) At the same time, front-end developers can figure out the most ideal way to present that information. 

The result is a true omnichannel experience that allows customers to shop how they prefer—tap, click, voice command—across various devices.

headless commerce omnichannel
Headless commerce allows you to sell on various devices.

A brief history of headless eCommerce.

If you’ve been in the eCommerce game for some time now, you’ve probably gotten used to vendor software systems that restrict what you can do. A simple customer journey from search to checkout was all we needed. 

But today’s customer journey is nonlinear; smarter shoppers want to read reviews. They want to browse other options and related items. They want a fast search result and an even faster checkout process. Sometimes they prefer to avoid screens altogether and just ask Alexa to order an item, or to tap it into their Apple Watch while they’re out for a run. 

As a merchant, you’ll need to offer these options, if you want to stay competitive. 

The limits that “the old way of doing it” place on customization and new technology not only burden your team, but can negatively affect your user experience. And we all know—better UX means happier customers; happy customers often become return customers.

Today, businesses have an array of eCommerce architectures to choose from, such as full-stack, hybrid, or headless. But one of the most attractive benefits of headless eCommerce above the others is that it allows your CMS to connect to a greater number of apps and devices. 

In turn, this makes your purchasing options more flexible, and empowers customers to shop with greater ease.

How Does Headless Commerce Work?

So, now that we understand what headless commerce does, let’s get into how it all works on the technical side.

To over-simplify it, headless refers to separating the front-end and back-end of your site. APIs serve as the middleman, allowing the two individual parts to work together. 

For instance, when a shopper attempts to checkout, the front-end (visual store and shopping cart) connects with an API, which then connects with a back-end function (payment processor and order status). It’s a separate-yet-seamless process.

The API serves as a retrieval system; it gathers raw data from the back-end that can be used in various ways, from reporting to archiving. 

The eCommerce store, itself, stores data like product listings, customer accounts, favorited items, purchase history, and more—the basics of an online shopping experience. 

Here’s what shoppers see at Babylist, for example, an online baby shower registry site that uses headless Shopify Plus:

The API jumps in when a customer takes an action—like adding to a cart, checking out, or reviewing purchase status—and presents that information to the customer. 

Many sites use JavaScript for these data requests to the API. Others use a simple static web page or mobile app, which is then integrated to a platform like Magento, to connect with a headless back-end.

Here’s what’s shoppers don’t see; the tech stack behind the scenes working to ensure an optimal customer experience:

Courtesy of Shopify Plus

This architecture includes Contentful CMS, a custom order management system (OMS), Shopify Plus’ checkout system, and pre-built integrations, allowing their dev team to focus less on writing detailed code and more on higher-value tasks.

Pros and Cons of Headless eCommerce

If you are weighing whether this is the right approach for your site, here are some options to consider. Let’s start with the benefits.

Benefits of Headless Commerce

Overall, headless commerce offers more creative control than typical templates, pushing customer experience to the next level.

Enhanced Customization

Because customer data is more readily available, opportunities abound. This includes targeted marketing campaigns that highlight promotions based on user activity, and a more personalized overall customer shopping experience. 

Omnichannel Opportunities

A headless system allows you to share content across a broad range of platforms. That means better marketing opportunities, more outlets for leads to find you, and an improved conversion rate. 

Better Customer Experience

Headless allows a consistent customer shopping experience across various platforms and devices, from mobile to voice command. Plus, headless allows for a more personalized experience, given the availability of back-end data that can help signify interests based on apps and other content management systems. 

Increased Conversion Rates

Separating the front-end from the back-end allows for easier a/b testing and other optimization checks to help find the best approach to design and layout. You’ll learn quickly which tools and designs customers prefer, and from there, you can implement those solutions to increase your overall conversion rate.

Better Flexibility

Headless provides more flexibility in the ways users can interact with your site. Merchants can offer countless front-end interface options—from traditional devices to the latest smart technologies—and can quickly update the front-end layer as needed, without disturbing back-end processes.

Faster Scaling

Because the front-end is separate, developers have fewer constraints when it comes to making updates. This can potentially lower your operating costs while increasing your time to market. 

Headless Commerce Challenges

If that list of benefits is enough to have you rubbing your hands together with excitement, first let’s discuss the other side—what many consider to be the downside of going headless.

Potential Additional Costs

Because the front-end and back-end portions of your site are decoupled, each may need its own hosting and maintenance. This can potentially cause an increase in the total cost to operate your site. 

Learning Curves

Another cost lies in needing more management; training current team members or hiring specialists to maintain your site for upgrades, design templates, security, bugs, and other troubleshooting needs.

Marketing Adjustments

With having the front-end separate, marketing teams will need to rely more heavily on IT to launch and update site content. This extra step can cause delays in time-sensitive campaigns, unless your teams work closely together. 

No Performance Guarantees

Speed and performance are two important factors in the usability of your site, and while you can certainly have a high-performing headless site, it’s not a guarantee. We recommend ensuring that your site, whether you go headless or not, is built by a team of quality-driven developers and designers who can create a high-performing site.

8 Examples of Successful Headless Commerce Sites

Even some of the most recognizable brands are losing their heads. 

Here are eight top examples of successful headless sites:

Target

After learning that a large portion of their customers tend to shop on one device and then complete their buyer journey on another, the retail giant knew they needed a website with a better omnichannel experience. Target switched to a headless approach which improved cross-device performance and created a more holistic customer experience.

K2 Sports

K2 Sports is a collective of global brands devoted to outdoor enthusiasts. The company felt limited on their former platform, Salesforce Commerce Cloud, and wanted to reduce costs. Since SCC was not SaaS, K2 was responsible for maintenance costs, which prohibited their internationalization goals. When redesigning, they chose BigCommerce for their backend and Contentstack as their front-end CMS. With their new headless setup, they were able to launch eight brands and 16 sites, in less than nine months, and turn a focus to content creation. According to a case study by Contentstack: “K2 can create sites 75% faster, publish content 90% more quickly, and has boosted productivity by 50%.”

TechCrunch

After a complete rebuild of their WordPress VIP site in 2018, TechCrunch decided on a headless model as a way to make design more user friendly and to boost site performance. The solution was to build a React Redux app connected to a WordPress back-end through the REST API. This increased site speed and performance, allowed for a clean design with better usability, and made the site easier to maintain overall. 

Nike

Nike might have you covered from head to toe, but their mobile experience has gone headless as a way to boost sales across devices. The goal was to create a front-end customer experiences personalized for the shopper’s needs and wants. This has led to a gradual yet steady increase in mobile-based revenue for the top-selling brand. 

Burrow

This D2C furniture store saw $3 million in sales after launching in 2017—great for business, but hard on their website. This rapid growth meant they needed an upgrade, and they chose a headless approach, with a BigCommerce backend and a custom CMS frontend that would allow them to constantly update and test landing pages and content without restrictive templates or the need for developers to make simple changes. Two months after launching their new site, Burrow saw a 30% increase in conversion rate and a 50% increase in site speed and performance.

Rothy’s

Known for their eco-friendly shoes, Rothy’s has found even more success through using headless Shopify with Contentful in the frontend to create a streamlined customer experience throughout the entire buying journey. By utilizing a headless approach, they created a responsive website that could better integrate with their accounting systems, allowing them to optimize their mobile marketing, as a way to increase conversions. Not only did they see an uptick in performance and site speed, but annual revenue reached $140 million in 2018. 

United Airlines

Usability is important for a company that depends on online bookings for a majority of its business. To provide a seamless overall experience for customers across multiple channels, United Airlines went headless, using the React PWA, which allowed the site to run smooth like a native app. This led to a better site performance and a more user-friendly design.

Chilly’s

Insulated reusable bottles are a hot market in a sustainability-minded world and Chilly’s needed a website that could keep up. They opted for Shopify Plus—Shopify’s enterprise-level offering— as a back-end service and DatoCMS for content and front-end design. This headless combo improved site speed, performance, and SEO, while improving design and mobile-selling opportunities. Plus, they’ve been able to utilize internationalization services through a progressive web app which expands their product to a global market. In one year, they became an enterprise eCommerce business with revenue growing more than 166%, including a 302% increase in mobile revenue. 

Is Headless Commerce Worth It?

Surely, this is an individual question based on your particular eCommerce needs. 

But when considering this approach, keep your business’s growth potential in mind. Headless is no longer a new concept, but that doesn’t mean there isn’t more room for this technology to grow and evolve.

For Shopify sellers, there are omnichannel benefits for going headless.

According to their website, Shopify Plus headless solutions include:

Innovation

Sell on virtually any screen, from web pages and apps to smart-home decor and appliances or wearable tech.

Developer freedom

Dev teams have the ability to build on frameworks they’re already familiar with, saving time and money.

Content management

By using your existing CMS, you’ll see faster content output — which means easier and more streamlined storefront updates.

Omnichannel selling

Sell on all digital media used by your target audience, all from a singular back-end management system.

Plus, there are plenty of other eCommerce options that allow a phased migration. Adobe Commerce offers a few, including:

  • A customizable front-end through Adobe Experience Manager, to run either headless or hybrid commerce approaches.
  • REST and GraphQL APIs, which are offered out-of-the-box with Magento Commerce. They allow for faster touch points and integration scenarios. 
  • Adobe PWA Studio: This digital workshop allows developers to make immersive, app-like experiences for mobile, without the restrictions of back-end processes.

Now that you have a better understanding of how headless commerce works, do you have any specific questions?

Leave a comment, or feel free to reach out to us directly to discuss whether going headless is right for you.

Chief Strategy Officer at

Gentian, CSO and co-founder of Shero Commerce, guides the company and client digital strategies. He's an expert in technical SEO, Inbound Marketing, and eCommerce strategy.