.svg)
Headless Commerce, Explained
Everything direct-to-consumer brands need to know
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?"
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.
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.
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.
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.
Trailblazing brands are going headless because having the two sides of the ecomm equation operate as discrete systems has several benefits, such as:
Ultimately, headless brands achieve:
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!
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.
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
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.
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:
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.
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.
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.
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:
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.
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.
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.
There are several options when thinking about going headless, but often the biggest choice is between two options:
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:
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:
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:
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:
Going headless is a huge undertaking that is always complex.
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.
By going headless, you’ll have to replatform your entire ecommerce architecture.
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.
There's a right and a wrong way to go about headless commerce
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:
The model that you eventually decide on ultimately depends on your circumstances, such as:
But the pressure of adhering to just one exact or “right” way? We don’t really see it like that — the possibilities are endless and it ranges business to business
Some of the worlds’ biggest brands now use headless commerce, here’s a selection of some of the most noteworthy:
Furniture brand West Elm wanted to upgrade the brand’s online experience to take account of customers’ changing shopping habits. Shoppers will typically go to West Elm for ideas and inspiration, before going to a physical store to check out the product in the flesh, and then back to mobile to make the purchase.
The brand used PWAs to transform the speed and flow of the mobile site, with faster and more intuitive navigation increasing average time spent on site by 15%, with a 9% revenue increase.
Mobile and tech accessories brand Nomad achieved a headless storefront with Shogun Frontend, ultimately leading to a 25% boost in their conversion rate.
The brand's use of a headless storefront massively sped-up page-to-page load times, and the site is a pixel perfect replica of the pre-headless store.
With a headless storefront Nomad is now able to create, test, and deliver campaigns (and rich merchandising not previously possible) in record time.
International fashion band J-Crew needed an ecommerce architecture that could match-up to huge seasonal traffic spikes. Using APIs to link up Salesforce Commerce Cloud to the existing backend and a headless storefront, the retailer launched their new commerce experience in time for the 2019 holiday season.
According to J-Crew CIO Michelle Garvey, the changes allowed the brand to “leverage the elements of our infrastructure that work well for us, while integrating innovative technologies that enable much more friendly and progressive experiences.”
OneBlade is a subscription-model luxury shave brand offering high-quality mens grooming accessories.
Before going headless, the brand experienced lagging site speed and couldn’t add rich content without tradeoffs to performance. OneBlade wanted to create a shopping experience as unique as their brand, which was proving to be difficult without a flexible frontend.
Impressively, going headless led OneBlade to increase razor refill subscriptions by 579% and their average order value went up by 30.1%!
The husband and wife pair behind FLEO—a women’s activewear brand—wanted more flexibility with design and to improve the site’s speed and content updates.
The move to headless with a frontend platform allows the FLEO team to make content changes and explore creative ideas—like a dynamic quiz to help customers discover products—without restrictions, tradeoffs to performance, or reliance on developers.
We’ve mentioned Shopify a few times due to popularity, but it's possible to go headless with all the major ecommerce platforms.
If you’re using BigCommerce, Salesforce Commerce Cloud, or Magento (Adobe Commerce) for your backend, these can all be integrated into a headless solution.
Further, Elastic Path and Commerce Tools are also true headless platforms that are completely non-monolithic.
You can use JavaScript frameworks like Gatsby, Angular, and React to construct your own frontend from scratch, or you can let a fronted platform take care of it for you.
Here are some handy guides on:
Either way, you can get the benefits of headless without having to get into the messy and costly business of redesigning your cart, checkout, and subscription functions.
Keep the backend you love (nearly all of them!) and simply add a flexible frontend on top.
If you feel that your current ecommerce setup is limiting the type of shopping experience you want to deliver, or if your conversion rates are being hit by sluggish page load times, a headless solution is something to consider.
You may find larger ecommerce solutions—classic DXPs (Digital Experience Platforms) are too unwieldy for your needs at certain stages of growth.
If any of this sounds familiar, then headless commerce via an all-in-one frontend platform can be a good next step consideration.
With headless commerce, the most confusing and challenging part can be getting started.
Partnering with a dedicated frontend-as-a-service provider eliminates the anxiety and uncertainty that usually comes with redesigning your ecommerce architecture.
When you roll out a new frontend layer, you’ll have a high-converting, blazing-fast, and on-brand experience that serves as a competitive advantage.
Your customers will remember an exceptional shopping experience, your merchandising and web team will appreciate the flexibility, and your site’s entire look and feel will catapult revenue to the next level.
