You've probably heard about headless commerce by now, but how do you figure out if it might apply to you? This article aims to help you answer that question — but before we start, let's clarify what exactly headless commerce means:

What is headless commerce?

Headless commerce is the practice of separating the front and backends of an e-commerce app, and connecting them with APIs.

‍

Headless Commerce Terminology

• Frontend: Any channel for user experience, like a website or a mobile app. Also known as the presentation layer.
• Backend: A platform where data is hosted, handling product catalogues, discount logic, checkout and shopping carts and so on —
• Monolithic model: Applications where the frontend and backend are interlaced in one. Any changes to one area will spillover to others.
• Application Programming Interface (API): A connection between the front and backends, allowing them to communicate with each other e.g. a product detail page includes data from the catalogue in the backend, displayed on a website in the frontend.

Headless Commerce Vs. Traditional Commerce

When it comes to choosing between headless commerce and traditional commerce, it's important to understand the key differences and benefits of each approach. While traditional commerce has been the norm for many years, headless commerce is gaining popularity due to its flexibility and scalability.

One of the main distinctions between the two is the separation of the front and backends. In traditional commerce, the frontend and backend are tightly integrated, meaning any changes or updates made to one will affect the other. This can sometimes hinder the ability to innovate and make quick changes to the user experience.

On the other hand, headless commerce allows for the decoupling of the frontend and backend through the use of APIs. This means that the presentation layer, or frontend, can be customized and optimized without impacting the backend functionalities. The separation enables businesses to deliver personalized and consistent user experiences across multiple channels, including websites, mobile apps, and even emerging touchpoints like smart devices or voice assistants.

It's important to note that while headless commerce offers significant advantages, it may not be suitable for every business. Smaller businesses with limited resources and simpler requirements may find traditional commerce more cost-effective and easier to manage. However, for larger enterprises or businesses seeking to deliver innovative and personalized user experiences, headless commerce can be a game-changer.

What are the Benefits of Headless Commerce?

Headless commerce offers several benefits that make it a valuable approach for modern businesses. Let's explore some of these advantages:

1. Flexibility and Agility: By decoupling the frontend and backend, headless commerce enables businesses to make changes and updates more easily. This flexibility allows for a faster time to market, as developers can work independently on different aspects of the application without affecting each other. This agility is particularly important in today's fast-paced digital landscape.
2. Enhanced User Experience: With a headless approach, businesses can provide seamless user experiences across various channels, including websites, mobile apps, voice assistants, and even emerging technologies. By utilizing APIs to connect the frontend and backend, businesses can deliver personalized and consistent experiences to their customers regardless of the platform they choose.
3. Scalability and Performance: Headless commerce allows businesses to scale their applications more efficiently. By separating the frontend and backend, businesses can optimize each component independently to handle high loads and ensure optimal performance. This scalability ensures that the application can handle increased customer demands without compromising speed or functionality.
4. Integration Capabilities: Headless commerce enables easy integration with third-party systems and services. Businesses can leverage APIs to connect their e-commerce platform with various tools, such as content management systems, customer relationship management software, and marketing automation platforms. This integration capability empowers businesses to create a seamless ecosystem that enhances their overall operations.
5. Future-Proofing: With rapidly evolving technologies and customer expectations, future-proofing your e-commerce platform is crucial. Headless commerce provides the foundation for adaptability and innovation. By separating the frontend and backend, businesses can embrace new technologies and trends without the need for a complete system overhaul. This future-proofing ensures that businesses can stay ahead of the curve and deliver exceptional experiences to their customers.

‍

Is Headless Commerce a Fit for your Business?

An increasing number of direct-to-consumer and online retail brands are turning to headless commerce for greater flexibility in managing consumer experience journeys on their e-commerce platforms.

Gartner predicts that by 2022, 30% of applications will use internal, independent suites of libraries in a modular fashion. This is a huge leap from the 3% of new applications measured in 2019.

While headless commerce offers incredible advantages, some companies are better positioned than others to go headless.

Here are some questions to consider to determine if headless commerce is fit for your business:

Question #1: Are you digitally ready?

In Forrester's 2020 Now Tech reports for both B2B and B2C, they found that out of 30 headless e-commerce vendors, more than one-fourth of them offer solutions only fit for digitally advanced clients. Yet, about 84% of companies are still at a beginner or intermediate level of digital maturity.

In other words, transitioning to headless commerce will demand a lot of digital skill and adaptability from your organisation. And that's just when collaborating with frontend-as-a-service vendors or backend platforms.

Companies could technically take headless to the extreme, by building out their entire frontend internally, and only outsourcing the backend to a platform like Shopify. But all these possibilities are contingent on an organisation's technical and digital maturity — which is why this is the first question to consider, before we can start thinking about the benefits that come once the modular architecture is set up.

Question #2: Is omni-channel marketing part of your strategy?

There are now a tremendous number of ways consumers can access and purchase products: on traditional websites, mobile apps, social media pages, even smartwatches, connected cars, and AR/VR systems. Content like product information, graphics and so on need to be individually tailored to each frontend, which results in higher costs to build and maintain each platform.

Yet, casting a wider net by setting up more digital touchpoints can give companies an advantage, by increasing convenience, accessibility, and brand presence in consumers' daily lives.

This is why, if your company currently receives high traffic from touchpoints beyond a traditional website, you should consider going headless!

One of the key benefits of headless commerce is the ability to switch out the "head", or even have multiple "heads" — in other words, information from one backend platform can be sent to a variety of other frontend consumer touchpoints via different APIs.

Instead of building an entirely new model for each new frontend, headless commerce makes expansion to different ones easy, lowering customer acquisition costs (CACs), as well as streamlining the maintenance of consistent information on all touchpoints.

More than just adding or maintaining frontends, centralising information in one backend platform eliminates data silos within each touchpoint. Where customer data was previously isolated within the website or app platforms, such data on their purchase history, wishlists and preferences can now be shared across touchpoints, allowing you to better leverage predictive analytic capabilities as well!

An example of this would be Chilly's, an eco-friendly insulated bottles company:

• Went headless in order to build dynamic experiences for individual customers, based on their acquisition path and touchpoint engagement
• After successfully making the transition, their e-commerce business has grown over 166%
• Expanded platforms to mobile: Revenue earned from mobile channels increased by 302%, transactions by 544% and conversion rate by 134%.

In sum, one reason to go headless is if omnichannel marketing is or would help you boost sales. Headless commerce will keep your content and information consistent regardless of how many channels you expand to, and allow you to reliably have several touchpoints for consumers to interact with and start their purchase journey.

Question #3: Do you need high reliability?

There are several cases where reliability is critical:

1. High traffic

• ‍‍Under a monolithic model, high traffic on the frontend can affect how fast data from the backend is loaded onto the presentation layer.
• This can slow down a frontend like a website, fatally affecting conversion: A 100-millisecond delay in website load time can hurt conversion rates by 7 percent.

2. Spiky traffic

• Traffic on your touchpoints can spike with events like flash sales, product launches and marketing events. For example, BTS concert tickets sold out in 10 seconds for their 2016 concerts in China, with fans buying out all 15,000 seats in Nanjing and Beijing in that time.
• If a frontend is not optimised to handle a huge, sudden load, the interdependency of the monolithic structure could cause the backend to crash. In that time between the crash and getting sites back up again, many customers could decide not to buy altogether.

3. Your customers use mobile often

• Mobile access can be particularly slow, whether that's due to the slower monolithic structure, or customers' own slow data.
• Either way, the bounce rate for mobile users spikes the longer it takes for a site to load, since users on their phones are primarily looking for convenient and fast purchases.  According to Google, 53% of mobile users abandon sites that take over 3 seconds to load.

In these cases, a smooth customer journey from first click to checkout is integral to securing such customers. Any friction in the process could possibly cause them to abandon the product or swipe away from the product detail page. In the AIDA model below, for example, we want to move customers from Awareness to Action as quickly and smoothly as possible.

One of the most common causes of friction here is latency, or the time taken for a page to load.

In a traditional model where the front and backends are integrated, a company wouldn't be able to add new commerce functions without disrupting the entirety of the frontend. They would usually turn to third-party plug-ins instead, but over time, these additional integrations stack up:

• Requests are sent through the monolithic architecture
• Each has to trigger multiple more requests for action and data
• Necessary information can then be sent back and presented to the user on the frontend
• As a result, the website is sluggish, carrying out functions that may not actually be necessary for the one request that the customer sent.

With headless commerce, however, clunky, cluttered third-party integrations aren't necessary. New functions can be added directly into the modular architecture without affecting every other system.

This means that the system can handle even greater website traffic: Adapt Agency's work with Interflora, Denmark's leading flower delivery service, dropped its website load time by 56%, with 0% down time even while processing 40 orders per minute during its Mother's Day rush.

Another example would be Victoria Beckham Beauty, which wanted a platform with zero downtime, even with large amounts of traffic, and while loading high-res images and video content of products. Going headless was their answer — they used Shopify Plus for the backend, and Contentful for their content management system, and achieved those goals even through the heavy holiday season.

If your consumers are likely to go from first click to purchase in one sitting, perhaps because your product is well-suited to impulse buys, then the headless structure might help keep that experience frictionless for customers. They'd be able to slide from first click to purchase without so much as pausing for thought, leaving with a positive impression, and leaving you with a confirmed sale.

Question #4: Does you rely on interactive design?

There are some websites that are just downright stunning — think Apple's iPad Pro product page, Spotify.Design, or even Swab the World. These feature riveting animations, rich merchandising, engaging customisations, and more, with every component tailored to the brand and its identity. Apple's, for example, is sleek and slick, with extreme closeups of the iPad Pro that move as the user scrolls, in order to show off the product design they are renown for.

Quite obviously, it would be difficult for a mass-market frontend service to achieve that level of customisation. That's like comparing a generic restaurant meal to one cooked by a Michelin Star chef who knows you down to your tastebuds.

The headless commerce model, however, is designed for customisation.

While separating frontend from backend, a company can rely on a backend platform — to handle inventory, shopping carts, discount logic, checkout, payment and so on — that is front-end agnostic. Meanwhile, it can use a frontend-as-a-service solution for its presentation layer, like layer0 or Frontastic.

Or, it could get an internal team of website designers to build the frontend within the company too! With headless commerce, the possibilities are endless when a company isn't bound to a single monolithic platform.

Going headless for more user interactivity and engagement

For some brands, the kind of user interactivity and highly engaging visuals that headless commerce affords them is exactly what they'd need to rely on to drive a customer's journey through a marketing funnel online.

Impossible Foods, for example, has a product that mass markets would need some convincing to purchase: the Impossible Burger, made from plant-based meat. Their website needs to do most of that convincing, to communicate information like what plant-based meat is, the ingredients and how the product is made, as well as the health and environmental benefits of going plant-based.

In 2018, their static, minimal website wasn't doing that job well — it needed a customised, flexible, highly engaging platform instead, which was why Impossible Foods decided to go headless.

Combining Gatsby, Shopify Plus and Contentful CMS, Impossible Foods leveraged the headless model to boost their customer engagement by more than 40%, drop their bounce rate by 40%, and increase the number of unique website visitors by 60%. Now, the website is even search-engine-optimised, with A/B testing and dynamic pages!

Going headless for more innovative touchpoints, like AR/VR

But the benefits of headless commerce aren't limited to beautiful websites. When you're armed with headless APIs and progressive web applications (PWAs), you can leverage even more innovative technology for enhanced buying experiences.

PWAs are web applications that are essentially normal websites, but appear to the user like traditional, native mobile applications. They give you the the capabilities and integrations of both websites and apps — best of both worlds!

A key example of this would be adding augmented or virtual reality (AR/VR) to product pages, allowing customers to interact with a product as if they had physically picked it up in a store. For a real life case study, we turn to Herschel: Using headless architecture to support a PWA, Herschel displays an AR option for all visitors on any web browser.

After toggling on "View 3D & AR", customers scan a QR code with the phones, which uses their camera to "overlay" a 3D scan of the product in their physical environment. Users can “place” the selected item anywhere, with it appearing true to scale, as well as drag, rotate or view the item from any angle. Hard to believe?  Try it out yourself!

AR functions are commonly only used within apps — but headless commerce and PWAs have created a way for e-commerce companies to leverage web-friendly AR, without requiring customers to download a separate app just to view a product. This creates a seamless buying experience and reduces friction in your marketing funnel, with AR-enhanced product detail pages (PDPs), product catalogues, shopping carts and checkout, all centralised on one progressive web application.

Is your product one that would benefit from more interactive and experiential marketing? Would you be able to boost sales if you could just communicate product information better? Or even let customers trial a product virtually, on their phones? In that case, going headless is probably the right decision for you.

Question #5: Will you be scaling exponentially?

You might not have answered "Yes" to every single question above. But you might be at the precipice of extraordinary growth, or huge scale-up in operations. In that case, going headless might be the right decision for you too.

In a 2020 whitepaper on the rising trend of modular solutions, Gartner analysts predicted that companies that adopt modular architecture — like headless commerce — will be able to integrate new functionalities 80 percent faster than those who fail to do so.

Going headless means limbering up for greater flexibility, nimbleness and adaptability.

That's highly important if you're scaling up, and the reason why giants like Netflix and Amazon were the first to go headless, back when the concept was so new that only companies with enough resources could accord the transition.

‍If Netflix had retained a monolithic paradigm for its app, each and every tiny error could have caused several days of downtime — a fatal prospect for a platform built for convenience, accessibility and range of content.

Meanwhile, Amazon's microservices-based architecture was built internally, and is currently supported by thousands of APIs and software developers.

Luckily for you, headless commerce is now accessible even to smaller businesses, through software-as-a-service providers like Shopify Plus.

Furthermore, one particular facet to scaling up is going international. But that can be difficult without headless architecture.

Even with Shopify's all-in-one solution for an e-commerce business, there's no efficient support for multi-language translation or advanced content management systems.

Hypothetically, if you wanted to go international using only Shopify as a monolithic platform, you'd need to manually duplicate your backend for every single country you expand into — yes, that means copying information over individually, every product detail page, image, text and so on.

For every country.

And each of these stores will have separate backends, creating silos of customer, account and purchase information that can't be shared efficiently, hindering user personalisation across countries, or centralisation of data for analytics.

Furthermore, since currencies are matched to countries which are matched to languages, Shopify's monolithic structure would prevent a Mandarin-speaking customer from shopping in Mandarin and paying in USD. Finally, even if you were to use one of Shopify's multi-language apps, like Langify or Weglot, these would simply be stacking an additional integration on top of the frontend and, like as explained before, slow down your website's load time and disrupt the consumer purchase journey.

Of course, headless commerce comes to your rescue once again! Since all information is centralised on one backend platform, a bodiless frontend can take care of all the clunky transference work for each country, each language, and each currency. There'll be no need to wrangle individual Shopify product detail pages and descriptions for each product and each country, since any changes on the backend can be automatically reflected in the frontend.

A tool to scale up: Hypotenuse AI

If you're scaling up, make sure you're streamlining your headless commerce setup. One way is to automate the writing of your product descriptions.

Hypotenuse AI creates copywriting for your e-commerce storefront at scale: The AI takes in information from your product catalogue and can generate rich, unique and eloquent product descriptions in literal seconds.

No more writer's block, no more head-scratching over diction, no more blindly praying for search engine optimisation.

Hypotenuse AI can be integrated into the headless commerce architecture, adding flair, maintaining your brand voice and supercharging SEO.

Not only does the AI help you scale with product descriptions, it also helps you with the issues of Shopify's multi-language barrier: Hypotenuse AI supports English (UK & US), Bulgarian, Chinese, Danish, Dutch, Estonian, French, German, Greek, Hungarian, Italian, Japanese, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Russian, Slovak, Slovenian, Spanish and Swedish — that's a whole ton, and it's in the process of expanding to more.

Hypotenuse AI also helps with the interactive, experiential marketing that flexible frontend solutions can afford you.

With provisions for different tones and types of writing—from minimalistic to luxurious to humorous—you can tailor product descriptions in bulk, ensuring a consistent style across every single product detail page.

In other words, it complements the visual richness and interactivity of your website with PDPs that exude your specific brand voice down to every word choice and turn of phrase.

With a centralised decision-making process that rolls out changes to every product in your catalogue, Hypotenuse AI provides a natural extension to the modular logic of headless commerce, prioritising both consistency and flexibility.

Wrapping up

Going headless is a significant decision, but can put you in very good stead for future possibilities of growth. To help you make that decision, we've spent this article presenting many, many questions for you to carefully consider.  

‍If you answered "Yes" to any two questions in that list, you might want to seriously start thinking about adopting this streamlined, modular architecture.

That will open the door to tons of new possibilities for your e-commerce business, supported by a rich ecosystem of APIs to connect many user touchpoints to one centralised backend.

Tools like Hypotenuse AI could help you prime content from the backend for the presentation layer — and ultimately create a frictionless user experience, consistent between product detail pages, across websites, mobile apps and even AR, and over different countries, languages and currencies.