Headless Commerce, Explained
Everything direct-to-consumer brands need to know
Table of Contents
- Overview
- What Is Headless Commerce?
- Is Shopify a headless CMS?
- Do your customers care?
- Is Headless Commerce Right for Your Business?
- How Does Headless Commerce Work?
- What is a headless API?
- Different ways to build your headless architecture
- Some Headless Myths
- Leading Headless Platforms
- So, Should You Go Headless?
- How Do You Get Started With Headless?
Overview
If you’re in the ecommerce space, you’ve no doubt heard about “going headless”, or building a headless commerce storefront.
And if you’ve explored headless solutions, you know there’s a near bewildering amount of info to wade through out there.
You may have heard that headless commerce means a move from commerce-led to content-led solutions. Or maybe that it represents a lean toward an ‘API-first’ approach? As with any emerging space, it can be hard to work out what’s growing faster, the technology or the terminology.
Because headless can feel inaccessible (there’s a lot of jargon), we’d like to add some clarity and address common questions about changing your ecommerce architecture. Plus, why brands want to do this in the first place!
Thankfully, the basics are easily broken down. Feel free to jump through to the FAQs you’re most interested in:
But let’s start with the basics, or “What is headless commerce, anyway?”
What is Headless Commerce?
Headless commerce is when a brand separates or ‘decouples’ the frontend of their online store (the beautiful interface customers interact with) from the backend (the behind-the-scenes functions that facilitate sales). With a headless ecommerce store, these two separated sides work independently of each other and communicate via APIs (Application Programmer Interfaces).
By separating the two platforms (front and backend) brands can deliver a faster, more agile, unique, and consistent shopping experience for customers.
MAKING HEADS OR TAILS OF THE LINGO:
The backend of a store is what becomes “headless”. If you think about a traditional storefront as being a body, once the head’s been removed, the frontend platform you add on top becomes the head.
The store’s backend still performs all the critical functions of an ecommerce solution (think: inventory, subscriptions, checkout, and payments), all without being tethered to a front-end delivery platform (or ‘head’).
This ‘headlessness’ ultimately gives scaling direct-to-consumer brands much more flexibility. Where traditional ecommerce platforms—or even custom themes—may limit your design control and functionality, going headless gives you total control to customize your frontend or “presentation layer”. You can create a beautifully branded, memorable shopping experience—all while keeping your existing backend intact.
Overall, headless storefronts see dramatic improvements to site speed and customer experience with no technical changes to anything you need for sales or checkout/compliance.
Headless commerce versus traditional commerce
To understand why ecommerce teams are excited about headless, it helps to look at the status quo.
Online purchases have traditionally been made possible by an ecommerce solution with a ‘monolithic architecture’. Meaning the CMS, cart, checkout, subscriptions, and the site layout/design are interdependent. That is—changes to one part of a store require changes elsewhere—which can make site updates slow and painful.
| Traditional commerce | Headless commerce |
|---|---|
| • Tethered frontend and backend platforms | • Separated frontend and backend platforms (still ‘talk’ to each other seamlessly) |
| • Slower page load times due to many API calls and technical constraints of the platform | • Flexible frontend development without the need to update backend functions |
| • Can be hard to make design changes (especially for highly unique experiences) | • Uses technology that greatly increases the speed or load times of the site |
| • Third-party integrations can be quick to deploy (think: click to install), but cause problems to the storefront due to poor architecture and code bloat | • Easy to totally customize your store (no more design constraints or a speed tradeoff) |
| • Largely unresponsive to new channels | • Increased possibilities of integration with third parties |
| • Testing is faster and iterations can be made more quickly | |
| • Adaptable to new channels and touchpoints | |
| • Unified customer experience |
The traditional, monolithic approach to ecommerce has the advantage of being relatively easy to get up and running. You have everything you need to set up a storefront, display products, and process payments right out of the box which lowers barriers to entry.
But, as direct-to-consumer brands scale, retailers are finding traditional ecommerce platforms alone start to limit your design capabilities and how you can engage with shoppers. If you drive a lot of sales on mobile or have customers who divide their time between multiple devices, poor site speed can cause a higher bounce rate and a decrease in sales.
Moreover, when it comes to design, it’s very difficult to build an especially stunning site—think something as slick as Apple.com—with an out-of-the-box ecomm platform. The rich merchandising, micro animations, and customizations (which often help propel DTC brands to the next level as a brand) are increasingly difficult to execute within the confines of traditional ecommerce platforms.
And finally, there’s content management to consider. As you amass dozens of collections and site pages, your content management needs become more complex than native platform features alone can typically handle. Making changes at scale can require evolving past a traditional platform’s capabilities.
This is why scaling brands are augmenting or adding onto their existing platforms, or changing the underlying technology of their storefronts.
Why headless commerce? The benefits of separation
Trailblazing brands are going headless because having the two sides of the ecomm equation operate as discrete systems has several benefits, such as:
- A totally customizable/adaptable storefront (you can achieve the exact look and feel you envision),
- Rich merchandising opportunities otherwise unavailable without headless architecture
- Sub-second page load times that boost mobile conversion rates,
- The flexibility to arrange your content management or CMS however you like,
- The ability to scale a high-volume of collections/content on your storefront
- Enabling your web teams to execute on your store’s vision quickly and without over-reliance on developers, and
- Fewer barriers to the internationalization of your store (multi-language and currency become much easier to execute).
Ultimately, headless brands achieve:
A Precise execution of your brand’s look and feel
While traditional ecommerce platforms may get you up and running quickly, retailers often come to find the visual themes available a little cookie cutter or restricting. You can quickly create a store and get global promotions live, but you may sacrifice the on-brand look and feel you want in the process.
As such, many brands end up relying on custom themes, or continuing to develop these despite their limitations, too.
But with headless commerce, there are no more design compromises. You can customize to get entirely the shopping experience you envision. Retailers who understand the brand loyalty an especially rich storefront delivers, crave consistency and accuracy over the confines and compromises of a monolithic experience.
If you are looking to get total control over the design of your store, headless commerce may be for you!
Blazing fast page-to-page load times
This is one of the greatest advantages of going headless and it’s unique to brands transforming their stores into progressive web apps (PWAs).
When a customer lands on your site you have under three seconds (especially on mobile!) to ensure your page loads to maintain their attention. But traditional ecommerce solutions were not architected with site speed top of mind, so they are more cumbersome and slow down site performance. (Think: heavy checkout pages, third-party reviews, large images, and forms—which all make ecommerce sites drag, and cart abandonment more likely).
Implementing a headless storefront with underlying PWA technology can help you achieve sub-second load times across all channels, not just mobile. This is because when your store is built as a progressive web app, heavy backend functions are kept entirely separate from the customer experience.
Your customer won’t know your architecture’s different, but they’ll definitely notice your site goes from homepage, to product page, to cart, at breakneck speeds. Moreover, you’ll notice what this speed boost does for your store’s bottom line.
An incredible, high-converting user experience
While achieving the speed and brand experience customers expect within the limits of traditional ecommerce can become a huge task, enterprise headless commerce can help you create a much more satisfactory (and thereby, high-converting) user experience.
Luxury cosmetics brand Lancôme made the switch to headless to keep pace with increased customer engagement on mobile. They concluded that their 15% cart conversion rate on mobile (compared to 38% on desktop) was caused by stumbling blocks in their mobile site navigation.
They used PWA technology (and a different site architecture) to create a more intuitive and immersive experience, and saw an 84% decrease in time before pages became interactive as well as a 17% increase in conversions.
Similarly, after going headless with a PWA, Nomad found an improved UX led to more conversions:
“Users are spending more time on the site and visiting more pages. Customers can instantly consume more content, explore more of our catalog, and discover more about the brand. As a result, conversion rate increases.”
REESE HAMMERSTROM, DIRECTOR OF ECOMMERCE, NOMAD
Is Shopify a headless CMS?
You’re likely already familiar with Shopify’s CMS, and the good news is it is perfectly possible to use their ecommerce platform without being tied into their frontend themes. Shopify’s Storefront API allows retailers to use Shopify’s CMS as part of a headless solution.
Using Shopify as a headless ecommerce backend, coupled with an all-in-one Frontend Platform like Shogun Frontend, lets you keep the foundation you’ve built in Shopify, but augment it for an even richer shopping experience.
Powerful brands like Nomad, OneBlade, and TULA Skincare have each implemented headless commerce by using Shopify as their existing backend, paired with Shogun Frontend, for example.
Do your customers care?
Shoppers don’t care about whether or not you use headless technology (they can’t identify that you’ve gone headless), but they do care about how they experience your brand—and they’ll no doubt recognize:
Faster sites
Customers are used to and expect fast-loading pages. On mobile—quickly becoming the go-to device for purchases—page load times still lag considerably compared to desktop. Headless storefronts using PWA technology can deliver sub-second load times across all devices.
Smoother site navigation
A more streamlined approach to your frontend gives customers a smoother ride while working their way around your site. Instant transitions between store pages mean customers can get to where they want to be on-site fast and painlessly.
Is Headless Commerce Right for Your Business?
If you’re keen on the idea of going headless, you’re not alone. But it’s not without its challenges. How tricky it is to implement depends on how you go about it (we’ll get to that later), but in the meantime let’s figure out if your brand is ready.
You may want to go headless if…
If your brand is heavily focused on content and site speed/performance is important to you, then headless might be a great fit.
Slow load times have long been an issue for mobile-focused ecommerce brands, but with the maturing role of PWAs—which can be used to power the frontend across all channels—the speed and engagement benefits are obvious.
If the benefits that we’ve already covered—speed, flexibility, customization—are mission-critical to your store, then you may want to seriously consider a headless commerce solution.
All kinds of businesses, from Netflix to Target, are taking this approach but the type of business most likely to go headless:
- Needs to account for a high volume of mobile traffic and transactions
- Are brands defined by content and delivering exceptional branded experiences
- Have customers who can go from first click to purchase in the same session (or products that lend themselves to impulse purchases)
- Have complex content management needs or a huge volume of content
Potential drawbacks of headless
We may be a little biased, but—in our view, the lower barrier to entry for headless commerce in low-code environments signals only great things for brands.
Most headaches around headless are connected to the way some retailers choose to take on the infrastructure. In decoupling, you typically have two options. Either to build your headless solution entirely from scratch—or you can implement frontend-as-a-service.
As we get into later on, the drawbacks of headless commerce can often playout for brands who go the entirely custom route. This option, though it accomplishes the decoupling you want (good), involves many complex, modular choices, increases the complexity of your ecommerce stack, and can become unwieldy.
If you’re doing an entirely custom headless build, you may struggle without a large team of dedicated developers.
Fortunately another path has emerged for brands. With an all-in-one Frontend Platform, you create an entire frontend layer (eliminating the need to assemble the stack or infrastructure yourself). You don’t need to glob together pieces of technology, and this makes going headless a great deal easier.
How Does Headless Commerce Work?
What is headless architecture?
So far, we’ve covered the basic principles of headless ecommerce. But to help you with the choices you’ll make on your journey to headlessness, it’s time for a deeper dive.
Headless architecture is the overall way the different parts of a headless commerce solution work together, and how these different parts use headless APIs to communicate with each other.
What is a headless API?
Headless APIs (Application Programmer Interfaces) are how the separate parts of headless ecommerce architecture ‘talk’ to each other.
APIs basically allow applications that use different frameworks to communicate with each other. If you’re working on web services, you’re most likely using RESTful APIs, although Shopify’s storefront API uses GraphQL.
The ability to give and receive instructions across frameworks is what gives each component of a headless system so much more freedom and allows changes to the frontend without needed changes to the backend.
APIs mean different ‘heads’ or frontends can request the same content from a backend platform and render it differently according to the needs of the particular device or channel.
This helps you design a web storefront where the content can be served up to various customer-facing experiences or channels. Appearing exactly how it should per device or channel you need.
Different ways to build your headless architecture
There are several options when thinking about going headless, but often the biggest choice is between two options:
- Whether you assemble your frontend layer entirely custom from scratch, or
- Whether you should go the route of frontend-as-a-service (outsourcing the complexity)
In option one, the completely composable custom route, retailers team up with developers or an agency to handpick all the backend functions, microservices, third-party add-ons, and middleware components of the build — stitching everything together.
On the other hand, option two is the frontend-as-a-service approach. Implementing a headless PWA build with a platform like Shogun Frontend, for example, wherein you get all the benefits of headless commerce, without the unwieldy ecommerce stack to piece together, or manage.
With an all-in-one Frontend Platform, everything to achieve a decoupled frontend layer is taken care of for you. You essentially outsource the infrastructure to your frontend-as-a-service vendor—helping you realize the benefits of headless faster.
As some very large enterprise retailers with a big software infrastructure in place discover, it may make more business sense to build and maintain an ecommerce architecture completely from scratch.
And, while some retailers may need that oversight over every aspect of their frontend, the ultimate tradeoff is the ongoing management and maintenance of various third-party APIs, plus the considerable costs and complexity of multiple vendors.
For example, some of the complex components enterprise teams select and stitch together in a custom approach include:
- A JavaScript framework, like React.js or Vue.js, for building the PWA
- A Server Side Rendering framework (think Gatsby.js or Nuxt.js),
- A headless CMS (software like Contentful, Prismic, or Sanity for codeless content management)
- A CDN or hosting provider like Netlify, Fastly, or Akamai
- Middleware to connect your PWA frontend to your ecommerce platform backend to pull info like product data and inventory numbers.
- An assortment of hundreds or even thousands(!) of APIs to integrate with widely used third-party apps like Yotpo, Klayvio, Nosto, etc.
Complex, from-scratch builds can quickly become an unwieldy challenge. Your brand is essentially building software (not your raison d’etre as an ecommerce brand!) and businesses run the risk of becoming reliant on the developers who built the storefront to maintain or make ongoing changes.
That said, achieving headless entirely custom may be for you if:
- Your organization has large development teams
- You have a dedicated team in place comfy maintaining the third-party APIs over time
- You need more flexibility in your tech stack (if your engineers are eager to select and maintain this architecture)
The other approach to headless architecture that many scaling brands are taking is what’s known as frontend-as-a-service.
As we covered, this is software that pre-packages all of the components of a frontend PWA build, end-to-end. Frontend-as-a-service vendors have made it easy to achieve headless benefits, and have eliminated the need for modular, complex choices. The middleware, hosting, server-side rendering, and APIs have all been taken care of, so your ecommerce team can focus on needle-moving activities: the content and UX aspect of your storefront (the aspects that help you grow!).
Especially robust frontend-as-a-service providers will often ensure your ecommerce web teams and merchandisers are able to execute campaigns building pages visually, without code, in a true view of the resulting shopping experience. This ultimately reduces ecommerce teams’ reliance on developers, and speeds up time to execution.
If your scaling direct-to-consumer brand is prioritizing revenue-driving activities, and not necessarily interested in building out large software infrastructure just yet, an all-in-one frontend platform gets you the benefits of decoupling, without the need for a giant software team.
Building via an all-in-one platform approach might be for you if:
- You’re keen to keep your entire ecommerce team lean and agile
- Want the flexibility to deploy frontend changes especially quickly
- Want to enable marketing managers and merchandisers to make changes in a low code-to-no-code environment
Some Headless Myths
Hopefully, this breakdown of headless commerce serves to clarify what headless is and isn’t. But there are a lot of myths about headless, so let’s bust a few of the big ones:
Myth:
Going headless is a huge undertaking that is always complex.
Reality:
It’s true that separating all the aspects of your ecommerce stack, then re-connecting them with a patchwork of third-party APIs can be a complicated and involved process.
But with an all-in-one platform approach, the herculean task of developing and maintaining a completely bespoke headless ecommerce architecture disappears. Shogun Frontend is radically changing the way brands can adopt headless technology by ditching the slow, developer-focused path. Now you can create Progressive Web App experiences in a low-to-no code environment.
Myth:
By going headless, you’ll have to replatform your entire ecommerce architecture.
Reality:
This is false. You don’t need to replatform your entire ecommerce site in swapping to headless. You can keep the backend you love, and simply add a new, flexible frontend layer on top for the design control you crave.
However, if you are already replatforming (moving your site, data, catalogs, and products from one backend commerce system to another) you often need to redesign your entire frontend, because what you built in one platform doesn’t translate over 1:1. This can be a great time to also go headless or modify your frontend layer because you’re often likely working with an agency partner to rebuild your frontend design anyway.
As Isaiah Bollinger, Chief Executive Officer at full-service ecommerce agency Trellis shares:
“Most brands are forced to consider a migration for a handful of reasons. The simplest is that their [existing] platform has become end of life….like Magento 1 EOL or Infor Storefront, in which the platform itself and ecosystem has moved on to a newer technology. Now you have to migrate. This usually opens up the door for people to consider all options.
The second reason is that their platform is simply old and outdated. This could be an old custom code base, an old version of Oracle platform, or one of the legacy platforms like Miva that just hasn’t kept up with the times. In this case they are simply looking to upgrade to something better.
[And] the last reason would be that they have outgrown their platform or see an opportunity to make more money on a better platform. In some cases [this] may need a new design and it might also make sense to look at upgrading to a better platform in that process.”
Overall, replatforming (or the considerations involved) is something that has many direct-to-consumer brands seek out headless benefits, but also cautious about the scope. Fortunately, as many brands who’ve taken the plunge find, a Frontend Platform helps eliminate all the modular, complex choices typically involved on the path to headless and can make it a lot simpler:
“With Shogun Frontend, you can concentrate on pushing your business forward without worrying about the back office of your site.”
BILL MAROULIS, OPERATIONS AND MARKETING MANAGER, UNDERSUN FITNESS
There’s no need to give up your existing ecommerce platform backend. Ultimately, the way you choose to go headless can eliminate a great deal of work.
Myth:
There’s a right and a wrong way to go about headless commerce
Reality:
While you certainly want to make sure you don’t make too many missteps during the transition to headless, there isn’t a one-size-fits-all model or “correct” architecture.
In fact, there are many ways to go about headless, and PWAs are just one flavor of it.
Here are a few examples of how ecommerce brands are going headless today:
