Alloy
Product
Integrations
Partners
Resources
headless

Headless in 2021 and Beyond

March 22, 2021
By Sara Du
Blog Dots
Blog Dots
Headless in 2021 and Beyond

The COVID-19 pandemic has bested any other disruptor in the e-commerce industry. Consider a few staggering statistics:

  • A McKinsey Quarterly report found that the pandemic led to 10 years of e-commerce growth in just 90 days
  • 84% of consumers shopped online during the pandemic
  • 150 million people shopped online for the first time during the pandemic
  • 48.8% of consumers say they will shop online more after the pandemic.

The global shift towards e-commerce is on a fast track. At the same time, however, running a successful e-commerce business has become costlier and more competitive than ever before. The online market is increasingly fragmented, making brand presence difficult to maintain. Half of global e-commerce sales now occur on marketplaces instead of stores, with 70% of Amazon searches not even including a brand name. Consequently, customer acquisition costs have also increased, with global ad spend having increased by 13% in 2020.

In this crowded industry, new e-commerce options like headless have sparked significant interest with promises to improve conversion rates, increase website loading speeds, and deliver unique experiences for customers that traditional e-commerce cannot offer. According to Joseph Sartre, Managing Partner at Interlace Ventures, “traditional platforms like Magento and Shopify are often referred to as ‘last-decade tech’ due to their complex code base and a tendency to create a tech lock for merchants.” On the other hand, Gartner Research report showed that API-driven headless commerce architecture was a top investment priority for e-commerce companies for 2019. In 2020, 61% of retailers were using or planned on using a headless platform.

What is headless commerce?

Screen Shot 2021-03-22 at 2.41.59 PM.png Unlike a traditional, monolithic architecture, where the backend and frontend are deeply intertwined, a headless architecture severs the two. Instead, APIs pull only the necessary information between the frontend and backend when a user interacts with the site (or app, or platform).

At its essence, headless commerce decouples the frontend -- what the user sees and interacts with -- from the backend. In a traditional e-commerce platform, developers build out templates and designs that transform content into web pages; the frontend and backend are deeply intertwined. In headless, however, developers only need to design the frontend to their liking and simply pull information from the backend through application programming interfaces (APIs).

For example, let’s zoom into the post-transaction workflows in a headless clothing store. Once a customer finishes navigating the website (frontend) and completes a purchase, APIs update the backend systems, which might include storing the credit card information, logging the financial exchange, updating inventory, storing the customer’s information, tracking what clothes he purchased and what clothes he looked at, and myriad more. The developer had to divert most of her attention towards creating a positive user experience on the frontend; the APIs automatically moved data between systems.

The benefits of going headless

Headless commerce has several benefits over the traditional monolithic design: 1. With a headless approach, omnichannel presentation is easy to implement 2. Headless allows for easy and rapid changes to the storefront, giving developers full control over the customer experience 3. Headless allows for faster website loading speeds, which correlates with greater conversion rates

Headless allows for easy omnichannel implementation. Because the presentation layer is decoupled from the content layer, developers simply have to design a new frontend if an e-commerce store wants to expand beyond desktop. They need not touch the backend at all; APIs can easily and securely pull data from backend systems to the new presentation layer, whether it be a mobile device or wearable tech. In contrast, in a traditional unified approach, developers must update the CMS layer or implement backend features to support the new platform, a process which is often time-consuming and frustrating. In an era where customers expect to reach an e-commerce store on a plethora of platforms and six in ten customers begin shopping on one device and finish on another, implementing frictionless omnichannel presentation is more important than ever.

Headless allows for easy and rapid changes to the storefront. With a traditional design, any major changes to the storefront often require outages. Stores must get it right from the get-go or suffer friction points that often require extensive coding to both the frontend and CMS to correct. On the other hand, headless allows developers to quickly make changes to the storefront with little code, a feature that has become more important with the age of rapidly changing customer expectations.

Companies that are able to keep up with customers’ expectations also often excel at testing out different user experiences. Research has shown that half of the fastest growing companies are more willing than their competitors to test and learn from different ideas. Headless makes A/B testing easy because developers simply need to design various storefronts without worrying about the backend. Once a business has decided on what their customer experience will look like, developers are then also able to tailor storefronts to different regions and demographics, providing personalized shopping experiences to each customer.

Headless allows for faster website loading speeds and higher conversion rates. The average web page visit lasts less than a minute, and 53% of customers will abandon a mobile site that takes longer than three seconds to load. Traditional e-commerce sites tend to suffer in loading speed under two scenarios: times of high traffic, and when adding new functionalities. Because traditional designs load each new page from scratch and must wait for a response from the server, traffic spikes often overload the website, drastically worsening load speeds. Furthermore, when a store tries to add new functionalities, this often requires third-party plugins or integrations that layer onto existing integrations, causing a complex and messy system that only slows down further during traffic spikes.

On the other hand, a headless platform can take advantage of static site generation and load quickly no matter the level of traffic. Additionally, because APIs only pull the data that is needed at the time, the customer’s network processes less data than a full-stack system would. Thus, new functionalities rarely increase loading times because they only affect the data that they need, and not the entire system.

The headless options

With headless having become a top investment for e-commerce businesses in the past couple of years, there are now several platforms to choose from when going headless. Below are five major platforms: Screen Shot 2021-03-22 at 2.50.02 PM.png Five major headless platforms: Nacelle, Swell.is, Commerce.js, Builder.io, and Fabric.inc.

Why automation is critical to headless

This decade has featured two major changes in the e-commerce industry: an increasingly crowded market, and a growing embrace of the IoT. Headless, therefore, is truly a futuristic design that allows businesses to stay ahead of their competitors and thrive in the rapidly changing industry. It offers three competitive advantages: 1) easier omnichannel presentation, 2) easy-to-make changes to the storefront, and 3) faster website loading speeds and conversion rates.

With platforms that allow businesses to simply transfer their backend to a headless option and set up the frontend for them, migrating to headless is straightforward. For newer businesses that don’t have an established CMS, platforms like Commerce.js and Builder.io also offer backend APIs. Yet without an automation tool, businesses risk missing out on a swath of apps critical to their performance. Simply put, integrating apps is not a core competency of these platforms, and an automation tool like Alloy is important to connect the platforms to a wide-ranging app landscape. For example, Alloy connects with over 80 apps that create value for every part of the e-commerce experience, from operations to marketing to customer service.

Should I go headless?

  • Before investing in the headless experience, it’s important to understand your business’ needs by asking a few questions:
  • Does my store experience high traffic from mobile and platforms other than desktop? Is omnichannel presentation important to my store’s sales?
  • Does my store sell many SKUs that might slow down my website in a monolithic approach? Or, does my store sell items that differ based on geography or demographics?
  • Does my store operate in a rapidly changing market, where frequent changes to my storefront might be necessary? Does my business have the resources to hire a developer that can make adjustments to my storefront when I need them?
  • Am I in a fragmented market where automation would generate an advantage for my store, in which case an automation tool would be necessary to connect my store with the app landscape?

Appendix

Commerce.js provides APIs for both backend and frontend: product displays, cart and checkout designs. Commerce.js maintains the backend APIs, developer focus on frontend implementation. Compose commerce stack and backend with Commerce.js webhooks, integrations. No backend code. No code storefront (Commerce Rays). Or cuztomise with developer. Use frontend framework of your choice: vue.js, next.js, etc.

Nacelle is purely frontend -- orders and carts go through Shopify. Mobile first functionality, integrates your headless CMS of choice, integrates with 30 apps, static generation. Backend -> Nacelle API -> index system -> Nacelle API -> SDK -> PWAs

Builder.io is no code, one click publish content or schedule to go live, A/B testing, visual headless CMS (back) that can integrate with any site, app, or platform -- but you host your own site and use Builder’s APIs to pull in content that you create in Builder. Or you can create your own backend and frontend that are managed by Builder’s visual drag and drop editor

Swell.is offers headless frontend themes, API access to everything. Integrates with third parties. Headless theme. Sell products on subscription, built in payment, etc. Swell integrates with payment gateway

Fabric.inc provides storefronts, product info manager, no code