Headless Commerce 101: Does My Ecommerce Site Need to Go Headless?

headless

Illustration by Diego Blanco

Commerce may be losing its head, but not its mind. Ecommerce sales in the US are predicted to hit the trillion-dollar mark by 2022, with online orders accounting for 20% of total retail sales by 2024.

Headless commerce is a type of ecommerce architecture that disassembles your back-end infrastructure from your front-end customer touchpoints. 

The promise of headless commerce is the freedom to sell anywhere without design or development constraints—the world is your storefront. This requires a bit of creativity and a willingness to reimagine the architecture under the hood.

Data shows 64% of large enterprises are developing a bespoke solution to advance their ecommerce plans. A further 76% plan to adopt some form of headless tech within the next 12 months.

Headless has gotten plenty of hype recently, but it isn’t for everyone. To determine whether it’s the right architecture for your brand, you’ve got to understand what it means to go headless. This guide shares exactly that.

Table of Contents

  1. What is headless commerce?
  2. How does headless commerce work?
  3. What’s the difference between headless commerce and other CMS architectures?
  4. Is headless commerce right for me?
  5. Benefits of going headless
  6. Headless commerce trends
  7. The marriage between headless and omnichannel commerce 
  8. Headless commerce examples

What is headless commerce?

Headless commerce is the architecture behind an ecommerce solution. It’s the decoupling of the front-end experience from your back-end technology infrastructure.

Put differently, headless commerce separates the digital storefront from the underlying systems and engines that drive your business. Brands that feel limited from templated front ends can be freed to offer customers a highly personalized experience.

With a headless architecture, merchants can turn new technologies into a digital storefront with commerce functionality, including:

  • Social media
  • Mobile apps 
  • Smart mirrors
  • Self-serve kiosks
  • Vending machines
  • Voice-assisted technology (like Amazon Alexa)
  • Wearables

How does headless commerce work?

Headless ecommerce connects your customer touchpoints with your back-office operations using a storefront application programming interface (API). 

Customer-facing content is managed outside of the headless platform. You’re able to use popular content-management systems (CMS), progressive web apps (PWA), customer relationship management (CRM), and digital experience platforms—without finding one ecommerce platform to handle them all. 

These additional SaaS (software as a service) tools build touchpoints for customers, like a mobile app or vending machine. They technically take place outside of the headless commerce platform. But each touchpoint passes data back through to the back end using an API call whenever a purchase is made. 

Your back end is the all-in-one amalgamation of your commerce activity. It’s the source of truth for retailers to fulfill orders, manage inventory, store credit card information, and update product details, regardless of where (or how) each product was sold.

Customers don’t see anything from your headless back end—just the front user interface you’re using to deliver shopping experiences.

head

What’s the difference between headless commerce and other CMS architectures?

A headless architecture arms merchants with more tools to reach a growing base of customers than a traditional ecommerce platform (also known as a monolithic platform) would.

A better analogy might be that headless commerce severs the marriage between your front and back ends. But in this divorce, each side comes out a winner, since changes to one side can be made without disrupting the other. This saves time and allows you to deliver a better customer experience across your different customer segments.

Divorcing the front and back ends also opens up the possibility to use what’s best for converting customers on the website. The most common use case would be for pushing content to the front end through a brand’s existing CMS instead of its commerce platform. That way, you can alter on-site content without going through your commerce back end. 

If your company has very few systems needing to plug into the front end, you may actually be better served by a full-suite commerce platform.

Is headless commerce right for me?

Headless commerce solutions are increasingly becoming a strategic choice, but how do you determine if one is right for you? 

Let’s start with one of the most important factors: cost. The pricing for an enterprise headless project could cost anywhere from $50,000 to $500,000, plus annual maintenance costs, depending on the functionality, supporting tools, and level of customization.

Some brands start with building out a small section of their website on a headless platform (e.g., a new product landing page or blog post). This test can be much lower than the above estimates, depending on the development team resources you have access to. 

Remember, “headless” doesn't necessarily mean building a website, but any custom experience built on the Shopify API and related developer tools where you control the front end. 

Other channels built on a headless platform (e.g., a mobile app, audio stream, or video game integration) could cost as low as $99 a month if you use an app to build your custom storefront. 

Essentially, the cost of headless varies depending on the complexity of your build. Building and implementation are just one set of costs. Don’t forget to scope out fees paid to external agencies, or monthly costs such as subscriptions to a headless CMS platform. 

If costs aren’t too much of an issue, figure out whether the headless commerce architecture is right for your brand. Explore your options if you have several of following:

  • I already have an established infrastructure, and it’s not always easy to replatform another tool into our existing technology.
  • I feel we’re moving slower than competitors because I can’t simultaneously make front- and back-end adjustments.
  • My storefront takes too long to load—users often bounce before it’s done loading.
  • My storefront theme or template isn’t as customizable as I’d like.
  • I don’t have a native mobile app for iOS or Android, or my mobile shopping app isn’t as user friendly as I’d like it to be.
  • I want to build a unique storefront ecommerce experience that isn’t possible with my current platform (e.g., smart mirrors, smart watches, vending machines, etc.)

Benefits of going headless

Headless commerce is anywhere commerce. It’s flexible. It assumes commerce will rapidly evolve and positions you to be wherever commerce and technology lead.

A headless commerce system helps you accomplish all of this in three key ways:

1. Faster time to market

Expedite experiments and changes when you go headless. This alleviates the age-old issue of developers who are unable to work on front- and back-end systems in tandem. 

With headless, customer-facing work can be done independently, without having to wait for back-end work, and vice versa. It means you can separate copy from code and allow each team to keep moving without depending on the other to finish first.

Separating concerns of the front end of your ecommerce store and the back end can save you plenty of headaches. For example, your front-end developers can make changes to the look and feel of your website without interruption of the back-end systems that process payments.”

—Tom Hirst, owner of Run the Show

2. Increased control and faster scaling

Headless plays nice with everyone. Existing systems coded in different languages can prevent critical integrations, even ones that negatively impact the customer experience. 

Data shows 57% of IT and ecommerce leaders said their current platform would be capable of supporting their business for no more than 12 months.

With powerful APIs, headless lets you integrate all of your existing systems (ERP, PIM, IMS, etc.) to build a shopping experience using the programming language of your choice. Not only can it protect you from shifts in technology, headless also gives you the power to move at your own pace and adapt as quickly as commerce itself.

“As brands scale, UX and technologies become tools to accelerate growth. We find brands that rapidly scale on their Shopify theme start to find new challenges that need to be addressed and uncover new requirements that would enable their continued growth. 

When a brand’s growth leads to increasing demands from their Shopify theme, we see brands start to evaluate more custom solutions like headless commerce.”

—Cory Cummings, Co-founder at Pack Digital 

3. Increased personalization

With headless, customer behavior is your North Star. It provides developers with additional flexibility in how they want to serve data to customers, regardless of which device they’re on. 

Headless allows you to instantly split test what you build so you can optimize the customer experience and your conversion rate. You’re able to deploy changes to any storefront your consumers are shopping, passing data through to each and personalizing the entire customer journey. 

Shoppers are 40% more likely to spend more than planned when the shopping experience is highly personalized. Choosing to go headless affords your brand the agility necessary to keep up with changing customer acquisition trends.

With headless and the decoupling of the back end of your site to the front end the user sees, you’re able to immediately satisfy the different user experiences required across different touchpoints of your site—like mobile, desktop, watch, app, and POS."

“Previously all married to one back end, thus limiting the different experiences delivered. You can now communicate your value prop on one device in one way and in a completely different way on another device without deeper development work.” —Harvey Hodd, Co-founder of Blueprint

Headless commerce trends 

Now that we know the benefits of going headless, let’s take a look at four big reasons why we’re moving toward a future of headless commerce. 

Mobile commerce is taking over

These days, you’ll be hard pressed to find someone who purchases items online exclusively through a desktop computer. It’s estimated that 187.5 million mobile users will shop via their smartphone by 2022, with total mobile-commerce spending tipped to hit $270 billion by 2025.

The headless commerce architecture allows merchants to capture that spending. Instead of relying on responsive themes, developers can build fully customized mobile websites without impacting the back end. They can also use social commerce features like Facebook’s Buy button to capture the 91% of social media users who use mobile devices.

API calls between the new mobile site/app and your headless commerce platform transfers data between the two. You’ll have the tech stack to sell on platforms mobile users are already using to browse and buy products without having to compromise your ecommerce back end. 

Headless’ impact on core web vitals

Search engines are huge parts of modern-day consumer shopping journeys. Almost half (48%) of consumers have used sites like Google, Bing, or Yahoo to start searching for products online. 

If SEO forms part of your marketing strategy, you should know this: In June 2020, Google announced a big change to its algorithm that makes page speed more important than ever. Core web vital metrics—largest contentful paint, cumulative layout shift, and first input delay—are the main things Google’s algorithm looks at when determining where a page (or site) should rank in search results. Each relates to page loading speeds. 

Headless commerce sets your ecommerce touchpoints up for success in the search engine results page. Since the front and back end are separated, just the front end needs to load for site visitors and search engine crawlers to access it. 

Going headless opens you up to modern front-end JavaScript frameworks that are inherently speedy. With Google using core web vitals as a ranking metric, this is something your business should be taking seriously.”

—Tom Hirst, owner of Run the Show

head2

Personalization is everything

We’re in a world where online privacy is top of mind for web shoppers. However, research supports the fact that consumers are still open to sharing customer data in return for personalized shopping experiences. Nine in 10 are willing to share behavioral data in return for a cheaper and easier experience. 

It’s why 31% of ecommerce brands believe their biggest opportunity in advancing their plans is to make better use of customer data. Another 29% say it is to create more and better customer experiences using said data. 

Headless commerce equips you to collect that data and share it cross platform. If a consumer creates an account on your ecommerce website and continues their shopping journey on a different device (such as a smart watch), a headless architecture lets you sync their data across the two. 

Provide personalized product recommendations, save shopping carts cross device, and offer the preferred payment option based on a repeat customer’s order history.

Headless commerce is particularly useful for businesses wishing to advertise their products across multiple channels. For example, you might want to advertise your product catalogue on your website and also advertise the same products and content within a native mobile app.”

—Tim Baker, Founder of Stamford Digital

Get the best of all worlds with a CMS for each department

With a headless commerce solution, you don’t need to use the same CMS as your ecommerce back end. You can publish content updates to any of your storefronts using your existing CMS—be that WordPress, Contentful, or Squarespace—without settling for a less-than-ideal ecommerce platform.

Tom Hirst, owner of Run the Show, explains: “A cool trend that I’m seeing is companies who’re bringing two or more content management systems together. For example, many marketing teams are familiar with WordPress for editing blog and page-level content, yet the businesses’ sales and logistics team may much prefer Shopify for ecommerce.”

With headless, you can serve a single website using both WordPress’ content API and Shopify's ecommerce API. This allows teams greater flexibility to pick and choose the tools they prefer for specific jobs, presented under one consistent brand on the front-end.”

—Tom Hirst, owner of Run the Show

The marriage between headless and omnichannel commerce

The customer journey is becoming increasingly more complex: 74% of customers have used multiple channels to start and complete a transaction. Another 76% prefer different commerce channels depending on the context. 

When McKinsey shared its predictions on the future of retail, one of its partners, Praveen Adhi, commented:

“You’re going to see digital mannequins that quickly change what they’re wearing based on who you are and what you might be holding in your hand. You’ll see a lot more in-store experiences to help you engage with the product, touch and feel it, and get to know it. 

But when you go to buy the product, you might not just be grabbing it off the floor and walking out the door like you do today. It might be coming out of the back room, it might meet you in your car, or it might meet you at home.” 

Having a monolithic ecommerce website is not always enough to meet them in the channels that account for masses of time during their product discovery and checkout process. 

Headless and omnichannel make a perfect match because shopping experiences are available for both online and offline consumers. Headless commerce can be a mobile app, an internet of things device such as a smart mirror or watch, voice shopping, a Buy button, or a progressive web app. 

Headless commerce turns any possible customer touchpoint into a sales opportunity while the commerce side is managed from a single back end.

head3

Headless Plus merchant spotlight: KOTN

At Shopify, we believe that merchants should never have to replatform to achieve their desired tech stack, business logic, or buyer experience. 

Kotn is a superb case study of that point. The online clothing retailer used the Shopify Storefront API to consolidate two stores into one. The new single storefront had a new CMS, checkout page, and custom product pages. It no longer needed custom apps and hacks to deliver the personalized out-of-the-box experience it wanted customers to have. 

headless

Since going headless, Kotn has been able to make site changes much more quickly than before. And that’s not the only thing that’s fast: Kotn’s site speed is incredibly quick, even during high traffic and peak seasons. It also has the infrastructure to scale as the business grows and new technologies emerge. 

Shopify covers 80% of our needs, and I think that’s common across all merchants. It’s that next 20% where headless comes in and where we really spend our time. What we’re trying to do is let Shopify handle the stuff they do so well, and we can focus on what makes us unique. That’s where we’ve really gone with our thinking around being headless.”

— Benjamin Sehl, Co-founder of Kotn

Other examples of beautiful headless websites

head6

Grass Roots Farmers’ Cooperative

Grass Roots Farmers’ Cooperative is a collective of small farmers working together to sell sustainable meats to customers across the US. When it decided to go headless, the retailer worked with Shopify Plus Partner Alpha Omega Agency to build a tech stack of cutting-edge technologies that create incredible user experiences. 

Grass Roots Farmers’ Cooperative uses Shopify Plus as its headless commerce platform. To support its custom product pages and checkout, it uses other tools like Netsuite, PWA, and Ruby on Rails. 

We wanted the best user experience for our customers. Our progressive web app significantly increased our mobile average order value. With the increase in revenue, we support our sustainability efforts.”

—Cody Hopkins, Founding Farmer and CEO, Grass Roots Farmers’ Cooperative 

head7

Babylist

Out-of-the-box commerce platforms can’t always give the functionality and flexibility that brands need. Take Babylist for example. It’s an online platform for expecting parents to share wishlists with gift givers. The site pulls products from third-party retailers. Users can compare product quality and sizing, show age-specific recommendations, and shop around for the best prices—all on one website. 

It would almost be impossible to recreate Babylist’s site on a monolithic ecommerce platform. It has two customer experiences to build on one site: the expectant parent creating the wish lists and the gift givers who buy them. 

Babylist went headless and incorporated several platforms in its technology stack, including a CMS (Contentful), order management system (Shopify), and checkout (Shopify Plus).

The results speak for themselves: 

  • Order volumes on the new headless site increased by 145% YoY
  • Monthly iOS app checkouts increased by 300% after the first month 
  • Gifts given through the online platform grew 102% YoY
head4

FIGS

FIGS is another online retailer using a headless approach to commerce. It uses Shopify Plus to manage the back-end functionality of its site. 

head8

However, to get more flexibility with its ecommerce landing page design, it uses Unbounce and Next.js. Each custom-built landing page connects to a product page on Shopify so customers can get truly unique experiences that nudge them toward a purchase. FIGS also has its own mobile app to capture the $432 billion projected to be spent on mobile devices by 2022.

Each of these custom touchpoints use API calls to feed data back to Shopify Plus. From there, FIGS can manage orders, update SKUs, and update inventory levels. 

Ready to go headless?

Whether you’re a seasoned business with established infrastructure or still building out your enterprise architecture, if you’re checking several of the boxes above, a headless commerce approach might be right for you.

Likewise, if your business operations are becoming more complex and you want to differentiate by competing on experience rather than price, you may indeed have a headless future. 

About the author

Elise Dopson

Elise Dopson is a freelance writer for leading B2B SaaS companies. She teaches everything she knows through Peak Freelance.