Ecommerce customers are fickle and demanding, competition is intense, and new features like visual search and virtual fitting rooms are becoming available at an increasing pace. Headless commerce architecture is the technical foundation that lets companies stay ahead of the curve with these innovations. It gives you more flexibility in how you present products, lets you upgrade to the newest technologies more easily and faster, and supports all your sales channels for an integrated customer experience.

If you’re new to headless commerce, or looking for a refresh, this article is for you. These benefits are described in detail below, but first, some basics about how headless commerce works.

What is headless commerce?

A  traditional ecommerce architecture is monolithic. Front-end presentation and display functions (the “head”) and back-end data management functions (the “tail”) are tightly coupled. In practical terms, this means that any changes made to the front end, such as UX revisions, require changes to the back end, which is responsible for managing ordering, payment, tracking, fulfillment and other related functions.

Here’s the problem. Even simple front-end changes can conflict with backend functions, and visa versa, which may require extensive involvement of the development team to re-architect the app. IT and engineering involvement increases time-to-market for updates, and makes such updates more costly.

In contrast, with a headless ecommerce architecture, the front and the back end are decoupled and operate independently. This means go-to-market teams can quickly and easily add new UX features, new content or even new channels without having to wait for IT to implement back end changes.

How headless commerce works

A headless commerce architecture consists of multiple functional components – “building blocks” — that communicate with one another via application programming interfaces (APIs) to get things done. For example, when a visitor to an ecommerce site interacts with the front end – such as by clicking on an item to get more information – the front end uses an API to obtain that information from the appropriate back-end component (such as a PIM or headless CMS). There are two basic approaches to building a headless architecture. (Both are frequently compared to building something with Lego blocks.)

The microservices approach breaks tasks into very small modules dedicated to only one specific service, such as currency conversion or image resizing. These modules are connected (using APIs) to handle a larger process, like making a purchase online. One of the advantages of microservices is that they can be shared throughout an organization, so various development groups don’t have to “re-invent the wheel.”

Composable architectures are built from larger modules that are typically available as products (search engine, inventory management, cart, etc.). This approach allows companies to take a best-of-breed strategy and link the various modules for a total solution, again using APIs.

A discussion of headless architecture wouldn’t be complete without reference to MACH, an acronym that anyone researching headless commerce is likely to encounter. MACH refers to Microservices, API-first, Cloud-native and Headless. Of these four, API-first is particularly important. It’s a development strategy where the APIs are built before the modules themselves in order to best support today’s microsystem/composable system designs. (Algolia is part of a consortium of companies that make up the MACH Alliance).

Why go for headless ecommerce?

Scalable omnichannel experiences

Desktop PCs, smartphones, and tablets still dominate as the primary digital experiences and delivery channels, but savvy developers are thinking about smart watches, Alexa-type devices, digital signage, kiosks, VR/AR apps, social media apps, and even screens on next-generation home appliances. Omnichannel (omni- means “all” in Latin, so literally “all the channels”) means delivering messaging, content, and products to any channel where potential customers can be found. While that would be very difficult to pull off with a traditional architecture, headless architecture doesn’t care about where the data it outputs is displayed to the user, so it’s very straightforward to go omnichannel with headless ecommerce.

Increased agility and flexibility

A headless commerce system can easily support new technologies as they are invented, which makes it ideal for product, merchandising, and marketing teams that want to rapidly create and deploy new customer experiences. You can roll out multiple digital experiences and merchandising campaigns so quickly that they can even be based on current events or pop culture and make you revenue before the next unrelated news cycle takes over. Engineers and developers won’t have to spend eons developing backend features or switching between contexts — they can iterate quickly and flexibly, bringing new features to market in hours, not months.

Personalized customer experiences

With headless platforms, developers can create unique, personalized ecommerce user experiences from scratch, with more control of the look and feel of the platform for both customers and administrators. This helps brands differentiate and drive ecommerce personalization benefits like higher customer engagement and sales. And when the customer experience is customized, targeted, supportive, and frictionless, shoppers naturally feel more inclined to buy, so going for headless architecture gives a company an easy way to boost their revenue.

Who has headless ecommerce worked for?

Shoe Carnival

As a major U.S. and Puerto Rican shoe retailer, Shoe Carnival operates in a fast-moving retail environment that demands constant, rapid changes in its online channel. The company decided to move to a headless architecture that would eliminate time-consuming developer involvement in front-end changes, and also provide a better customer experience via faster and more accurate search.

The two main components of the new approach were a headless content management system (CMS) from Amplience and AI-powered search from Algolia. The new CMS enables Shoe Carnival to make campaign changes almost instantly. Algolia’s search features, including dynamic re-ranking, ensure that customers find exactly what they want quickly. The improved customer experience has resulted in a 4.5% increase in conversions. Shoe Carnival anticipates further improvements over time due to the new system’s ease of use, which provides much greater flexibility in responding to business opportunities such as Black Friday and back-to-school

Gymshark

Gymshark, one of Britain’s fastest-growing fashion brands, moved from its monolithic, self-hosted store to a headless architecture to solve serious problems with search relevance, peak period crashes and overwhelmed manual merchandising teams.

Gymshark chose Shopify as a foundation, combined with Algolia for search and navigation, ReactJS for the front-end interface, and Contenful as a CRM. The implementation, completed in a matter of months, delivered spectacula results. In addition to ending scalability problems and automating many many merchandizing tasks with AI, the new architecture’s improved search and merchandising capabilities resulted in increased sales estimated at £2 million (US$ 2.6 million) per year.

Other well-known brands using headless architecture include:

• Amazon
• Best Buy
• eBay
• Etsy
• Coca-Cola
• J.Crew
• Netflix
• Spotify
• Uber

How to get started with headless ecommerce

Moving to a headless ecommerce architecture is a major undertaking. It’s also expensive, so the first step in the process should be identifying business goals that headless commerce can meet. These goals might include:

• greater front-end flexibility for a unique CX that goes beyond fixed templates and includes personalization
• greater agility for quickly adapting to new market requirements and integrating new software over time
• a consistent consumer experience across all sales channels
• improved site performance, e.g. faster load times
• quantifiable sales-oriented targets such as higher conversion rates or average order value

Beyond establishing goals, it’s important to analyze the path to achieving them. What will the TCO be over time? Does IT have developers with the requisite skill sets onboard, or will they have to be recruited? Should the project be done in stages, or is a rip-and-replace approach more efficient? What is the timeline to completion?

Implementation options for an headless commerce architecture

Once you’ve established your business and technical requirements, you have three choices on how to proceed: build in-house, buy from a vendor, or take a hybrid approach.

For large companies with adequate resources, the in-house approach has definite advantages. The most important is control. You can get exactly the functionality you want with no compromises. There are also disadvantages. Building a headless ecommerce system is a serious undertaking that may take longer than anticipated, and may require technical expertise that’s hard to find. In short, it’s not for everyone.

The buy decision eliminates months of development time. You can choose a system with a proven track record – a system that will work from day one. Once implemented, you don’t have to deal with upgrades and maintenance. On the other hand, your ability to customize may be more limited. You’re locked in to a single vendor, and when the market evolves new features – which it surely will – you can’t proactively implement them. You have to wait for your vendor.

The hybrid approach, combining vendor and in-house components, also has pros and cons. The most important advantage is that you can choose best-of-breed components for every function from, from search to check-out. There is a robust ecosystem, with products to meet most needs. If you have unusual requirements, you can address them with in-house code. The primary disadvantage is having to deal with multiple vendors, which includes managing business as well as technical relationships. Also, even with the abundance of API-first products, orchestration can pose challenges.

Key considerations when evaluating vendors

When it comes to selecting which vendors and tools you’ll use, there are many important considerations.

Ease of use. One of the major benefits of headless commerce is quick reaction time. Developers don’t have to be involved in every front-end change. To obtain this benefit, however, the process of making front-end changes has to be straightforward and genuinely easy for non-technical people.

Personalization. It’s now possible to base personalization on data that goes far beyond browsing history or simple segmentation, but doing so is not necessarily a simple process. You need to understand exactly what personalization capabilities any given system may have, and how easy or difficult they are to implement.

Compatibility. Today’s ecommerce tools are likely to fall into the API-first model, but you still need to verify that the products you want will be compatible, now and into the future. Also, not all products run on all three clouds, which is another issue that needs to be explored.

Scalability. Most ecommerce companies need to ramp up capacity at certain times of the year. You should make sure that adequate capacity exists.

Security. Ecommerce sites are essentially public spaces, which makes them especially vulnerable to attack. Every ecommerce system, headless or not, needs to deal with shopper authentication. API authentication is equally important, as APIs can provide gates to sensitive information. You also need to be sure that all systems meet the security regulations where you do business, such as the GDPR for Europe and the CCPA in California.

Cost. Beyond the obvious issue of ROI, evaluating costs can be complex. Different vendors have different pricing models with different features that need to be taken into account, such as volume discounts.

What tools are proving the most useful in this space?

Salesforce Commerce Cloud

Salesforce Commerce Cloud is an all-in-one software-as-a-service (SaaS) ecommerce platform that enables users to create a powerful online presence with relative ease. Headless commerce is integral to the platform’s capabilities, empowering brands to enrich customer experiences through APIs, experience managers, and application of third-party tools from Heroku, MuleSoft, Algolia, and other partners.

Commercetools

Commercetools offers a versatile ecommerce platform as a service (PaaS) that allows merchants to build and connect world-class shopping experiences on the Web, smartphones, tablets, or points of sale. Since acquiring the popular tool Frontastic, their market share has grown even more.

Elastic Path

Elastic Path is a headless ecommerce system that supports templateless ecommerce to integrate as middleware with enterprise resource planning (ERP) systems. The system is API based and specifically targeted to enterprise-level organizations.

Contentful

Contentful offers a flexible and future-friendly content platform that helps editors manage content and developers serve it to mobile and web applications. Contentful’s API-first platform enables developers to create digital experiences at scale and launch websites and apps faster than with competitors’ platforms.

Hygraph

Hygraph (formerly GraphCMS) is the first native GraphQL API-first headless content management system. It enables teams around the world to rapidly build and deliver multichannel digital experiences at scale. GraphCMS integrates with any front-end technology, including React, Angular, and Vue.

Prismic

Prismic is a headless CMS for editing online content. Using Prismic, developers can choose their technology, framework, and language, and then easily manage their content without building out custom dashboards.

The need for search

Headless solutions offer robust management and orchestration of different solutions. One of the first solutions to consider is ecommerce search. Your catalog’s search index can be used to drive onsite discovery, merchandising, product recommendations, personalization, and of course search itself.

Algolia is a platform that helps businesses in any industry build leading, personalized search and discovery experiences on every channel, driving greater engagement, conversion, and ROI. Algolia handles all the backend logic required to run search and makes it available to your front-end through an API and super straightforward language-specific libraries, so you can trust it when you go headless.

Interested in learning more about how Algolia can help your revenue skyrocket or want to learn more about ecommerce personalization? We’re here to help. Just click the chat button in the bottom right and ask for a free demo.