Headless Commerce Explained With Lunch Trays

Headless commerce isn’t as scary as it sounds (or it might be, depending on the expertise of your developer). Essentially, it means that the frontend of your ecommerce platform is separated from the backend, unlike traditional ecommerce where the two are connected.

This article will do a deep dive into what that actually looks like, but it isn’t meant to be an in-depth discussion of the technical aspects of headless commerce. Instead, we’ll focus on the business side of headless commerce—the benefits, challenges, and some illustrative examples.

What is Headless Commerce?

The technical definition: headless commerce is an ecommerce system in which the backend, where orders and payments are processed and data is stored, is separate from the frontend interface that the user interacts with when placing an order.

If you’re considering making the switch to headless commerce, this definition isn’t really of use. It’s full of jargon and doesn’t provide much insight into why or how you and your team might go about this.

Here’s A Better Way To Explain Headless Commerce

With a lunch tray.

The lunch tray represents the backend of your ecommerce system, and your lunch is the frontend.

headless commerce - graphics
In traditional ecommerce, the lunch tray influences what you order for lunch, while in a headless architecture you have more flexibility in what you order.

Traditional Ecommerce = Compartmentalized Lunch Tray

Go back to your grade school cafeteria, where you grab a tray for lunch. The tray has set compartments for each part of the meal.

headless commerce - traditional ecommerce graphics
There’s a spot or two for sides, a section for a drink, and a big compartment in the middle for the main course. You have your choice of a main course, sides, and drinks, but the lunch tray always has the same layout and doesn’t permit, say, ordering two mains and no sides.

headless commerce - compartmentalized graphics
If you wanted to do that, you’d need a whole new lunch tray with a different layout, which might take weeks or months for the manufacturer to make, and even after all that, you might decide you want to go back to the first option.

In the same way, the backend of traditional ecommerce systems limits the frontend presentation layer of your ecommerce system. The backend and frontend are tightly linked, so changes to the frontend also require changes to the backend, the same way that if you want two main courses and no sides for lunch, you need to change the lunch tray.

Headless Commerce = Flat Lunch Tray

In a different cafeteria, you grab a tray for lunch. This tray is flat, without any compartments.

headless commerce - flat lunch graphics
What you order for lunch isn’t limited by the compartments. The lunch tray and your order are not so tightly linked, and you don’t need different trays for ordering a main course and a side one day, and two sides the next.

headless commerce graphics
Headless commerce is not limited by the constraints of the backend. While there is still a connection between the backend and frontend (after all, you still need a tray to carry your lunch on), you are free to make changes to one or the other without needing to update both, or get a new tray, so to speak.

A Side Note On Content And Attributes:

Another side of headless commerce to consider is product attributes and characteristics.

Here’s an example of product attributes and characteristics to illustrate:

Say a customer is looking for pots and pans.

Ecommerce managers and marketers might classify the pots and pans products in a few ways, depending on sales or campaigns they might want to promote. For example, they might be listed separately under kitchenware, or as a set under kitchenware sets. They might be under-sale or clearance items, or sorted by colour, size, number of items in the set, or other ways.

The classification system that the attributes are part of needs to be applied the same way across every frontend that is part of the ecommerce architecture. This classification structure ensures products and content are properly retrieved across various frontends.

Let’s bring that back to the lunch tray analogy.

With attributes and characteristics used in headless commerce systems, a “lunch tray” that denotes which items can be ordered and where they are placed isn’t needed.

Rather than orders being based on what can fill the tray, it’s based on the attributes of what you want for lunch.

headless commerce - main dishes graphics
For example, at lunch, you might be in the mood for something:

  1. Spicy
  2. That has vegetables in it
  3. Is served hot
  4. Is a large portion
  5. That costs less than $10

If you input these attributes into your lunch order, you might receive a choice between a spicy Thai curry dish and a spicy minestrone. In this way—in headless commerce—you have more ways to offer choice to users and to make your products accessible to them.

Traditional vs Headless Commerce

While both ecommerce systems have their uses, headless commerce is arguably the superior option—for your customers, your ecommerce team, and your business overall.

Benefits Of Headless Commerce for Customers

Headless commerce provides a few key benefits for customers, and since they ultimately decide the success of your ecommerce business, you’ll want to keep them happy.

1. More choice.

With headless commerce, you can use APIs to connect your backend to any frontend or create custom frontends, giving your customers more ways to shop beyond your website. Think social commerce, voice-controlled ecommerce, or custom frontends.

2. Ease of ordering.

By providing more frontend options, or customizing a frontend that shortens the ordering process, customers will find it easier to order. They won’t need to go through your entire website checkout process when you have a custom one-click ordering frontend.

3. Convenience.

Convenience is very important to customers. They will abandon an order at the first inconvenience. Keep your customers on your ecommerce platform by providing them the ease and convenience of ordering through their preferred method.

Benefits Of Headless Commerce for Ecommerce Teams

Developers, ecommerce managers, and content managers all benefit from headless commerce as well. While planning for and developing numerous frontends might seem like extra work, the benefits of headless commerce balance this out.

1. Integrate with any system.

Rather than be tied to one frontend ecommercesolution, your team can use several to cover every system, so you don’t miss out on the opportunities afforded by other systems. You can integrate one backend with multiple eCommerce architectures.

Lina Bustos, an ecommerce strategist and author for ecommerce Illustrated, explains:

“Now that most ecommerce platform vendors have decoupled their front ends from their back ends and “gone headless,” headless commerce is more accessible than ever. Today, single-page applications and progressive web apps are table stakes, which is great for both front and back end developers, who no longer have to coordinate everything they do with each other (something that responsive design made even more tricky). Fast-loading pages also are great for customers and conversion!”

2. Faster updates.

As the backend and frontend are separated in headless systems, updates are faster because you don’t need to update both every time. In traditional ecommerce, changes to the frontend require difficult changes to the backend as well, but not in headless commerce.

3. Easier to scale.

You don’t need to update the backend for every change to the frontend, so it’s easier to scale your ecommerce solution up or down. You can adjust your ecommerce architecture as you see fit and add new frontends.

4. Flexibility.

Frontend developers can be more flexible and creative in their work, as they are not limited by the constraints that the backend puts on frontend development. Give your developers the freedom to come up with the latest and greatest.

5. Less Downtime.

With less updates to the backend when you update the frontend, it follows that there is less downtime while you’re performing and testing any updates. Updates are also less risky because you don’t need to update the backend, so there is less risk of breaking it.

6. Reuse of Content.

With traditional ecommerce, putting your content on multiple platforms involves manually adding it to those platforms. With headless applications, you can focus on content commerce and reuse your content in many places, as it can simply be called by an API and used across every frontend.

7. More User-friendly Content Management System.

Ecommerce specialist Lina Bustos explains: 

“Another great benefit of headless is the ability to give business teams a more user-friendly content management system (CMS) or digital experience platform (DXP) to load their own content and make frequent (even daily) changes to the site without involving IT. This is HUGE, as in the past, sometimes even changing a home page banner could take hours of work and cost thousands of dollars through a development partner, let alone creating amazing landing pages and merchandising features.”

Benefits Of Headless Commerce for Businesses

There are benefits for businesses too, which include the continued delivery of content and convenient ordering to customers.

1. More flexibility and customization.

You can adapt your ecommerce strategy to where your customers are and how they are buying. You can give them the frontend experience they are looking for. For example, if your audience moves to use more voice-controlled shopping, you can follow them thereby creating a custom frontend that allows this.

2. More agile.

Headless commerce keeps you agile and competitive. You can quickly implement new frontend platforms without much downtime, as well as keep up with competitors and avoid lagging behind due to long development and testing times.

3. Implement omnichannel.

With more customization, you’ll be able to ensure a seamless experience across ecommerce platforms and systems that you’re using as part of your omnichannel marketing strategy. This is important to boosting your conversion rate and retaining customers. Currently, only about 52% of businesses have implemented omnichannel. Be in that percentage with headless commerce.

Challenges of Headless Commerce

For all the benefits of headless commerce, there are challenges that ecommerce teams will need to consider.

1. Managing Roles And Responsibilities

With both traditional and headless ecommerce, many team members are involved in implementing, maintaining, and improving the experience for customers. This can involve marketers, ecommerce managers, content managers, and frontend and backend developers.

In traditional ecommerce, roles are easily defined, because everyone can work on their task independently. For example, content managers can update content without necessarily needing input from developers.

In headless commerce, team members need input from each other, especially when ensuring the user’s journey is coherent and seamless. This might slow down workflow in the short term, but it can benefit your team as well. By collaborating with team members in different departments, they can avoid fishbowl thinking. The main way to avoid a slowdown is to define workflows that minimize back and forth and streamline content, development, and user journey updates.

2. Content Managers And Marketers Are Less Independent

Because the frontend requires custom coding by developers, marketers aren’t as free to go into the system and add and update content as they would with a traditional CMS and digital commerce platform. They will require support from a developer, which can be time-consuming and can cause a loss in agility.

The best way to tackle this is the same as above. Define a workflow that allows marketers to be as agile as possible.

3. Additional Work For Frontend Developers

Without a default frontend, developers need to build a custom one for each application or frontend in use. This is obviously more work upfront, and this process is ongoing as you add more applications and as maintenance is required.

Time management will become more important for frontend developers, as will allocating time for testing and maintenance. You’ll also want to make sure you’re following UX best practices for each channel.

The Birth Of A New Generation Of Headless Commerce: Microservices

With headless commerce now so common, there’s the next generation of headless commerce: microservices. This approach goes steps further than just separating front and back and starts chipping away at the commerce platform itself.

To get insight on this topic, I reached out to Lina Bustos, an ecommerce specialist and author for Ecommerce Illustrated. Here’s her explanation of microservices and where she sees the new generation “headed”:

“Because most commerce platforms are deployed as one system (monolithic code), all pieces of the platform such as catalog, cart, checkout, customer accounts, pricing, payments, and promotions are all tightly woven together. This means that any changes or updates to the platform or content impacts this large block of code, and can potentially break something anywhere in the platform. IT has to be very careful about managing the commerce application, and business users often are restricted from making updates independently (like adding promotions, changing pricing or creating new categories).

With microservices, a promotions service (for example) would be its own application. And like with a CMS, business users could (with the right business user tooling) add, modify, delete and schedule promotions independent of IT. The microservice could also be extended to new touchpoints and experiences like an airport vending machine or pop-up shop, so customers could apply the same discounts from the online shop anywhere they encounter the brand or retailer, and self-checkout through their mobile phones (connecting to cart, checkout, and payment microservices).

Microservices can also scale independently, which helps site performance and uptime. Net-a-Porter, for example, built a microservice to support the traffic spike for their twice-annual clearance sales (events that would ALWAYS bring down the site).

With analysts recommending IT and business teams choose more modular platforms to run ecommerce, and more vendors embracing microservices architecture, I predict we’ll see more and more online merchants (large and small) using them by 2022, and blending commerce with unconventional touchpoints like voice assistants, chatbots and in-store digital.”

Headless Commerce Platform Examples

A good way to understand how headless commerce works is with concrete examples. We’ve put together a few examples of headless commerce solutions currently being offered.

1. About You Cloud Backbone

About You, Cloud’s Backbone is an ecommerce infrastructure that companies can use as their ecommerce solution. Backbone is API based, allowing ecommerce activities such as product management, catalogue organization, order processing, stock management, warehouse management, and more. Backbone lets you do all of this in one place, through API calls. You can also integrate it with eCommerce tools you are currently using.

2. Elastic Path

Elastic Path offers ecommerce architecture solutions, including APIs and headless commerce solutions. They also offer solutions for things like voice commerce and chatbots. Elastic Path partners with all types of different companies, from CRM to consulting to web hosting services to ensure you have the tools you need to make your ecommerce system work.

3. Amplience

Amplience is a headless commerce solution that also provides a content solution. With Amplience, your headless system can extend to both commerce and content. Their main focus is allowing ecommerce teams, including content managers and their teams, to work together to keep the content and ecommerce itself up to date and ensure a coherent and polished customer experience. This includes product attributes and classification, product page content, landing page content, and greater ease of development.

Here’s how Amplience works to do this.

Ampliance Screenshot
Image from James Brooke’s stellar article on headless commerce, which I highly recommend reading.

This image shows one of Amplience’s add-ons, which allows ecommerce teams to easily create, update, and scale frontend menus, based on their classification and sorting model for products. There are separate tabs for production and development, allowing both developers and content teams to work from the same place. No matter what the frontend looks like, this menu will be consistent across all applications. The preview above shows the desktop view of how this looks in practice.

Ampliance add-on Screenshot
Amplience add-on, one which uses API calls to pull product information such as pricing, features, and stock.

This image shows another Amplience add-on, one which uses API calls to pull product information such as pricing, features, and stock so that content teams can quickly build lists of products, such as best sellers or new featured products.

Ampliance workflow planning features screenshot
Amplience workflow planning features.

Importantly, Amplience has a way to plan workflows so that marketers, content teams, and developers can plan launches and schedule milestones together. Roles and responsibilities are defined and deadlines are noted. This makes it easy to plan content updates, ecommerce updates, and campaigns.

The Future of Headless Commerce

These days, ecommerce conversions are hovering at only 2.86% globally. This means it’s more important than ever to meet your customer’s needs by tailoring your ecommerce solution to them. One of the easiest ways to do that is with headless commerce. Not enough companies are using headless commerce yet, and as a result, they are having trouble keeping up with competitors that are using headless commerce. This is the way ecommerce is heading, and ecommerce managers implement it early, in order to manage the challenges that come with it and keep their heads on straight (see what we did there).

To keep up with the latest in headless commerce and other hot ecommerce topics, subscribe to our newsletter! After that, read our article on other ecommerce trends driving the future of ecommerce.

Newsletter

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.

Read More
email marketing best practices
Email Marketing Best Practices From The Pros