Headless Commerce, Explained
Everything direct-to-consumer brands need to know
And if you’ve gone as far as exploring headless solutions, you know there’s a near bewildering amount of info to wade through.
You may have heard that headless commerce means a move from commerce-led to content-led solutions. Or maybe you’ve heard it represents a lean toward an ‘API-first’ approach? As with any largely uncharted territory, it can be hard to work out what’s growing faster, the technology or the terminology.
Because headless can seem inaccessible with all of its jargon, we’re aiming to add some clarity and address common questions about redesigning your ecommerce architecture.
Thankfully, the fundamentals 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 refers to separating or ‘decoupling’ the frontend of your online store (the beautifully laid-out interface your customers interact with) from the backend (the behind-the-scenes functions that facilitate sales).
With a headless store, these two separated sides work independently of each other and communicate via APIs (Application Programmer Interfaces).
The result of separating the two platforms (frontend and backend) is a faster, more agile, adaptable, and consistent shopping experience.
The backend still performs all the crucial functions of an ecommerce solution without being tethered to a front-end delivery platform (or ‘head’).
This ‘headlessness’ gives scaling direct-to-consumer brands much more flexibility. Where traditional ecommerce platforms may be limiting with design and functionality, going headless gives you even more freedom to customize your frontend or “presentation layer”. You can create a beautifully branded, memorable shopping experience—while keeping your existing backend intact.
Overall, headless storefronts see dramatic improvements to site speed and customer experience with no technical changes to inventory, subscriptions, checkout, and payments.
To understand why ecommerce web 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, subscription function, and the site layout/design are interdependent. Changes to one part of a store require changes elsewhere — which can make updates slow and painful.
The traditional, monolithic approach 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 (DTCs) scale, retailers are finding traditional ecommerce platforms alone start to limit your choices and ability to engage with customers. If you drive a lot of sales on mobile or have customers who are used to dividing 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 help propel DTCs to the next level as brands) become 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.
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:
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 tend to be cumbersome and can 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 by way of a PWA can help you achieve sub-second load times across all channels, not just mobile. 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.
Using PWA technology to create a more intuitive and immersive experience, the cosmetics brand saw an 84% decrease in time before pages were interactive and 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
While traditional ecommerce platforms might get you up and running quickly, retailers often find the visual themes available a little cookie cutter or restricting. You can quickly create a store and get global promotions live instantly, but you may sacrifice the on-brand look and feel you want in the process.
With headless commerce, there are no more 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.
You’re likely already familiar with Shopify’s CMS, but what you might not know is that 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 Ecommerce Experience 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 Kitsch, Nomad, OneBlade, and Groove Life 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 really 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.
If your business is heavily focused on content and site speed/performance is important to your brand, then headless might well be a good fit for you.
Slow load times have long been an issue for mobile-first/mobile-focused businesses, 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 outlined — speed, flexibility, customization — are mission-critical to your business, 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 that is most likely to go headless:
We may be a little biased, but — in our view, the democratization of headless commerce in low-code environments signals only great things for brands.
Most headaches of headless are often connected to the way some retailers are going about their architecture. In decoupling, you typically have two options. Either to build your headless solution entirely bespoke — 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 bespoke route. The entirely custom 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 as a means of achieving your vision (not good).
If you’re doing an entirely custom build, you may struggle without a large team of dedicated developers.
Fortunately another path is fast-emerging for brands. With frontend-as-a-service, you essentially create an entirely pre-packaged frontend stack end-to-end. 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 use specific, defined, and agreed-upon protocols to 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 having to make changes to the backend.
APIs mean different ‘heads’ can request the same content from a backend platform and render it differently according to the needs of the particular device or channel.
There are several options when thinking about going headless (in terms of the way you approach it with platforms and tools). But, often, the biggest choice brands face is:
Should you construct your frontend entirely bespoke from scratch, or do you go the route of frontend-as-a-service?
In option one, the completely composable, bespoke 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 enterprise headless commerce, without the unwieldy ecommerce stack management issues.
With a frontend-as-a-service platform, everything to achieve a decoupled frontend is entirely end-to-end — helping merchandising teams realize the benefits of headless in a low-code environment.
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 oversight over every aspect of their frontend architecture, the ultimate tradeoff is the ongoing management and maintenance of various third-party APIs, plus the considerable costs 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 technically run the risk of becoming reliant on the developers who built the storefront to maintain or make ongoing changes.
That said, achieving headless entirely bespoke 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.
This is essentially software that pre-packages all of the components of a frontend PWA build, end-to-end. Frontend-as-a-service providers have made it easy to achieve headlessness, and have mitigated the need to make modular, complex choices. The middleware, hosting, server-side rendering, and APIs have all been taken care of on behalf of your brand, so you can focus instead on the content and UX portions of your storefront.
Especially robust frontend-as-a-service providers will ensure your merchandisers can build pages visually, in a true view of the 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, frontend-as-a service gets you the benefits of decoupling, without the need for a giant software team.
Building via the frontend-as-a-service approach might be for you if:
Hopefully, this brief look at the nuts and bolts of headless commerce serves to clarify what headless is and isn’t. But there are a lot of myths surrounding headless, so let’s bust a few of the big ones:
Going headless is a huge undertaking that’s necessarily complex.
It’s true that separating all the aspects of your ecommerce stack, then re-connecting them with a patchwork of third-party APIs is a complicated and involved process. But with a frontend-as-a-service approach, the herculean task of developing and maintaining a completely bespoke headless ecommerce architecture disappears. Platforms like Shogun Frontend are democratizing headless technology by allowing brands to create progressive web app experiences in low to no code environments.
By going headless, you’ll have to replatform your entire ecommerce architecture
The idea of replatforming (or the considerations involved) is something that has many direct-to-consumer brands initially hesitant, or cautious about headless — but as many brands who’ve taken the plunge find, frontend-as-a-service is an approach that helps eliminate all the modular, complex choices involved.
“I moved to a custom headless build while I was at Purple, so I know the complexity of managing all of the different connections and webhooks. Honestly, all the unnecessary things you have to manage but really don’t help you improve your website experience.
We had actively looked into doing a similar, bespoke solution at Groove Life, when I came across Shogun Frontend. I knew if they could handle the complex-choices, my web team would be able to focus on what was most important and leave the rest to Shogun.”
BRYANT GARVIN, CMO, GROOVE LIFE
When choosing an end-to-end frontend-as-a-service approach, you don’t deal with individual vendors for each component of your architecture or the resulting maintenance, and this vastly reduces the scope of implementation. There’s also no need to give up your existing ecommerce platform backend, as we get into later on. 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:
When choosing an end-to-end frontend-as-a-service approach, you don’t deal with individual vendors for each component of your architecture or the resulting maintenance, and this vastly reduces the scope of implementation. There’s also no need to give up your existing ecommerce platform backend, as we get into later on. Ultimately, the way you choose to go headless can eliminate a great deal of work.
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.”
We’ve focused mainly on Shopify here, but it's possible to go headless with all the major ecommerce platforms.
If you’re using BigCommerce, Salesforce Commerce Cloud, or Magento for your backend, these can all be integrated into a headless solution.
You can use JavaScript frameworks like Gatsby, Angular, and React to construct your own frontend from scratch, or you can let a fronted service take care of it for you.
Either way, you can go headless without having to get into the messy and costly business of redesigning your cart, checkout, and subscription functions.
If you feel that your current ecommerce setup is limiting your ability to provide the type of customer experience you want, or if your conversion rates are being hit by sluggish page load times, a headless solution is something to take seriously.
Further, you may find larger ecommerce solutions — classic DXPs (Digital Experience Platforms) are too unwieldy for your needs at the current time.
If any of this sounds familiar, then headless commerce via frontend as-a-service 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 complete the transition to headless, 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.
