Here, we explain how headless commerce decouples front- and back-end systems so brands can offer compelling customer experiences anywhere, plus:
- Discover how headless commerce can protect your brand from disruptive tech trends
- Learn exactly how complex businesses go headless and how they use it to move smarter and faster
- Determine whether headless commerce is right for you with our checklist
Commerce may be losing its head but not its mind. 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 willingness to reimagine the architecture under the hood.
Recently headless has gotten plenty of hype, 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.
What is headless commerce?
Headless commerce is a reference to the architecture that underpins a commerce solution—it’s the decoupling of the front-end customer 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.
Does that mean there’s something wrong with traditional headed architecture? Not necessarily. While headless is growing in popularity, it’s simply a different way of building commerce into the customer experience. As the customer journey becomes more complex, headless simply arms brands with more options and tools to reach a growing base of customers.
Headless commerce vs. traditional commerce
Headless commerce isn’t as painful or violent as it might sound. 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 content management system (CMS), instead of its commerce platform.
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.
Beyond your storefront
There’s nothing necessarily wrong with your head. However, getting rid of it can present new opportunities. If you’ve ever felt constrained regarding your ability to build a network of customer touchpoints you can control with the same underlying tools, it might be time to go headless. Larger brands with an established CMS also find it’s a good fit for starting to sell direct to consumer.
The always-connected world we live in offers myriad other customer touchpoints that traditional ecommerce heads can’t reach—through voice-powered home speakers, smart appliances, or even mirrors. Future-proof your business by embedding content, products, and checkout capability wherever customers are.
Your reward for going headless
The good news is, headless commerce is anywhere commerce. It’s flexible commerce. It assumes commerce will rapidly evolve and positions you to be wherever commerce and technology lead.
Headless commerce helps you accomplish all this in three key ways:
1. Speed to market
Expedite experiments and changes. Headless 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.
2. Increased control and scale faster
Headless plays nice with everyone. Existing systems coded in different languages can prevent critical integrations, even ones that negatively
3. Increased personalization
With headless, customer behavior is your north star. It allows brands to flexibly build customer-centered experiences, regardless of which device they’re on. It allows you to instantly split test what you build so you can optimize the customer experience and your conversion rate.
Choosing to go headless affords your brand the agility necessary to keep up with changing customer acquisition trends.
Case study: Koala goes headless
Much of the discussion thus far has been about you. About your systems and how tightly or loosely coupled they can be. But the heart of the matter has little to do with you. It’s about the customer.
No brand understands this better than Koala, a furniture retailer that donates a cut of each sale to protect the lovable animals the company is named after. Koala cleaved its front- and back-end systems to offer a more customized customer experience.
Visually, Koala’s headless technology infrastructure now looks like this:
Split by function, Koala’s tech stack includes a different provider for its:
- Customer-facing website
- Content management
- Discounting and promotions
- Payments (both online and offline)
- Inventory
- Logistics (proprietary solution)
- Analytics and reporting
Koala relies on a third-party CMS, in combination with Shopify Plus and its API, to customize and tailor customer experiences. “Traditionally, frequently changing content is gated behind software engineers who need to edit HTML, commit code, test, and perform website releases to ship copy changes,” Koala’s head of technology, Richard Bremner, says. “By decoupling the content from the code, we have been able to free the content from the engineers so that they can focus on code while writers focus on content.”
With a faster and more focused team, here’s exactly how Koala leverages the headless architecture to offer a world-class customer experience.
Leading with experience: Koala’s progressive web app
One way Koala offers a more engaging experience is through its progressive web app (PWA), one of the first ever created by an Australian company. PWAs are websites with a few additional pieces. They deliver a faster, more reliable, and immersive customer experience, regardless of whether the user is connected to the internet.
Koala’s PWA allows it the flexibility to offer the right experience, at the right time, to different customer segments across any device. The company’s PWA is the customer-facing portion of its web presence. It allows for new web pages, products, and content to be deployed much faster. While decoupled, notice how the PWA integrates with the CMS, shopping cart, and other mission-critical systems:
The PWA, powered in part by Shopify, allows Koala to uniquely differentiate itself in three crucial areas.
Differentiator #1: Rapid deployment
With a PWA rather than a traditional online store, Koala says it now has the flexibility necessary to work on its front and back ends in parallel. Koala developers can now deploy rapid changes including performance boosts, without any downtime for the live site.
Likewise, Koala can also rapidly deploy customizations that differentiate the brand on the front end. The combination positions the company to deliver engaging content lightning fast. For example, Bremner says Koala’s headless architecture recently allowed the company to build and deliver its new sustainability page in record time:
Image via: Koala
“Most companies would kill for our velocity,” Bremner says. “The speed with which the development team at Koala is able to deliver solutions from ideation to production is triple what I’ve seen anywhere else, and it’s achieved by the confluence of a well-thought-out design system, component library, page template generator, and CMS. They all come together seamlessly to make generating a new page like our recent sustainability page both simple and effortless. This allowed our sustainability manager to focus on writing the content, and not be blocked waiting on engineers or designers.”
Differentiator #2: Microservice approach
Importantly, going headless has also allowed Koala to strip out unnecessary features that slow online storefronts and negatively
It’s what Koala calls a microservices approach to enterprise architecture. A microservice solves a specific problem, is isolated to its own environment, and only exposes itself to other services necessary for it to do its job. Microservices operate independently of those that depend on it, potentially with their own database and continuous integration pipeline. They can even be owned by a different team.
For example, Koala recently built a shopping cart microservice within its PWA to make it easier for customers to use discounts and bundle multiple products.
“We found that our PWA had too much client-side logic for handling various discounts and bundling scenarios,” Bremner says. “The code had become bloated and buggy. When this bubbled up as tech debt, we decided to build a single microservice that would sit between our PWA and Shopify, and handle all the business rules for us. This allowed us to remove a lot of client-side JavaScript, simplifying and reducing the page size.”
Notice how easily the shopping cart microservice allows Koala customers to bundle their purchase with accessories like pillows:
Image via: Koala
Microservices also enable brands to better manage dependencies, reuse services, and perform maintenance more easily.
Differentiator #3: Tailored experiences
Koala is particularly proud of its Help page, which is crucial in helping convert customers who need coaxing. Not only does the user experience look different, but it also functions differently depending on the device being used. Without a headless architecture, Koala suggests it would be harder to offer personalized customer experiences by segment and across different devices.
Here’s how it looks on a desktop:
Image via: Koala
And here it is on mobile. Notice that the slimmed down version asks users to select a subject area rather than a particular question. The goal is to shorten the time it takes to answer customer questions:
Image via: Koala
“The content is the same regardless of the device,” Bremner says. “Being headless allows us to deliver it with targeted experiences, or even different content to specific cohorts visiting the same page if that’s what we want.”
Separate from its PWA, Koala’s transition to a headless architecture has also enabled it to build a custom infrastructure that includes:
- Centralized data warehouse and customer data platform
Allows Koala to track customers across all touchpoints and push behavioral data directly into the company’s marketing tools. This offers easy access for non-technical stakeholders who can make faster decisions and free up time for more sophisticated analysis of customer cohort data.
- Marketing tech stack
The cross-channel attribution platform works with the data warehouse so campaigns can run in-house and be optimized in real time. Since the marketing platform is integrated with customer service and logistics, brands can reduce wasted marketing spend on customers who’ve had a negative experience.
- Logistics
The platform automates business processes across systems to reduce manual workloads. It also allows Koala to manage the entire fulfillment process from shopping cart to last-mile delivery so the company can offer a four-hour delivery guarantee in select cities, yet another differentiator.
Your headless commerce checklist
Headless commerce is increasingly a strategic choice, but how do you determine if it’s right for you?
The checklist below can help:
- 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 experience that isn’t possible with my current ecommerce platform (e.g. smart mirrors, smart watches, vending machines, etc.)
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, headless commerce 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.
Ready to lose your head? Get started with headless commerce today.
This article was originally published by our friends at Shopify Plus.
