Skip to Main Content

Apr 23, 2019 | 12 minute read

Headless commerce 101

written by Anatoli IIakimets

 

Everything you need to know about Headless Commerce

 

“Headless” the term that most eCommerce platforms nowadays are describing themselves as. It is also the term that a lot of people are confused by. Headless commerce isn’t an approach for everyone and so this eBook aims to clear up what headless really is, and aims to get you into a headless mindset, so you can decide if going headless is the right strategy for your commerce business.

Let’s start by going back in time and look at how commerce has evolved over the past few years.

 

Chapter one: The pursuit of frictionless exchange.

The history of commerce

Throughout history, we've been striving to make commerce, transactions and the exchange of goods as frictionless as possible. Think about what Amazon has done for online shopping, Airbnb has done for finding places to stay, Uber has done for travel, Netflix has done for the film and TV. These brands are leading the way in saving people time by making buying products and services easier, more streamlined and convenient.

Let's take a quick overview of some of the milestones along the way.

What is a transaction?

A transaction, in its purest form, is where one person has an item and the other person has another item. They each want what the other person has and they decide to exchange those things so they each end up with what they want. What I've just described in simple terms is the barter system. It's not rocket science.

Transaction at the purest form

 

Barter-Chickens_for_Subscription_0.jpg

Barter, historically, has some limitations, including time and geographic location. There's also the physical aspect of exchanging the items themselves, which can be quite cumbersome.

 

Money = less friction

Here's a great example of the initial steps taken to reduce friction. We use money as a medium of exchange and representation of value. It's easier to carry and it can be fractioned. It's also easier to reach a shared agreement of the worth of money. Of course, over time, we've made further improvements on this and now we don't always need to carry around heavy coins or cash. For example, we now have debit and credit cards. Even these cards have been improved - from swipe and sign, to chip and pin, and now contactless.

More common transaction in commerce

 

Skipping through the industrial revolution

Let's fast-forward through the Industrial Revolution and the many other technological advancements around telecommunications, manufacturing, transportation and globalization generally through the 19th and 20th centuries which have significantly improved commercial exchange in one way or another.

wild west of commerce

The public Internet as we know it was launched in 1991 without much fanfare. It was a new digital Wild West, and through the early years it rapidly evolved. And similarly to the Wild West, those starting out during this time had to build things from scratch. The Internet heralded a new era of convenience in which transactions no longer needed to be held within the confines of physical retail spaces.

Amazon and eBay were formed in these early years and paved the road to our modern eCommerce websites. They replicated real world stores and catalogs by offering a centralized digital destination with a product shelf. They offered search tools to allow customers to discover and buy products. Amazon is, of course, famous for the one-click checkout which removes much of the friction from the checkout process itself.

The rise of the eCommerce platform

The development of eCommerce sites required downloadable, customizable eCommerce platforms that companies would host on their own servers. They offered standardized functionality and template layouts, which reduced friction and eliminated barriers-to-entry, thereby, allowing retailers and brands to get online fast. Continuing with the Wild West analogy, these were prefabricated houses into which settlers could assemble themselves and move. Well-known examples of this approach are osCommerce and Magento.

 

Movement to the SaaS model

Software as a service (SaaS) was the next wave. This removed the company’s burden and complexity of hosting, customizing, managing, and maintaining the eCommerce software. This commoditization meant for the first time, a company could launch a store without a developer, from Mom-and-Pop’s to big enterprise. Examples of successful SaaS platforms include Demandware acquired by Salesforce, Shopify, and BigCommerce. One limitation of these turnkey solutions was that they only offered rigid, cookie-cutter website experiences, as they prioritized low barriers-to-entry over flexibility. This can be seen in their APIs and proprietary standardized templating engines.

 

Mobile commerce becomes a game changer

While the mobile phone was not new in 2007, the release of Apple's iPhone marked a landmark moment for the evolution of commerce. This was a UX breakthrough which brought mobiles into the mainstream. Previous platforms were predominantly designed for a pre-mobile world and they have been working to catch up ever since. In more recent years, the release of Apple Pay and Google Pay have further streamlined the buying process.

Commoditization through APIs

With the movement from self-hosted, open-source platforms and SaaS, today we are experiencing the commoditization of services through utility APIs including Stripe for payments, Twilio for voice and SMS, Contentful for content management, and even TaxJar for tax calculations. There are thousands of these mature APIs available which serve very specific niche purposes. This fractured landscape spawned to meet the needs of a new, mobile-connected age and marks the start of the headless commerce revolution. Developers feel empowered to stitch together solutions tailored to their needs, using best-of-breed technologies for each part of their overall eCommerce ecosystem.

 

Chapter two: Headless commerce - an overview

Headless horseman commerce

Friction is continuously being removed from the transaction moment and overall commerce experience. The development of commerce experiences is undergoing a similar evolution in terms of how a developer builds an eCommerce website or an application. Bringing SaaS and utility APIs together leads to the arrival of the creation of headless commerce architecture.

It may seem counterintuitive, but headless commerce architecture is not actually headless. A head is the customer touchpoint where the transaction and value exchange takes place. The body is the commerce engine and systems within which the business operates and interacts. This frontend head is cleanly separated from this backend body via your APIs.

Headless may actually have one or even many heads. This might sound a little complicated, but it is far from being a monster, once you really come to grips with it. The head is the presentation layer. These are usually applications and websites, but may also be internet-connected things, voice interactions, or enhanced retail experiences
many heads of headless commerce

These heads may not always be aimed at your customers either, they could also be there to support your internal employees, such as merchandisers, warehouse staff and customer service representatives who need to interact with your business data.

The body is the eCommerce logic and storage engine. The head and the body are entirely decoupled, meaning a head can be added or swapped out seamlessly without making a change to the backend. In essence, headless commerce is the ideal architectural pattern to deliver omnichannel commerce experiences.

Headless eCommerce Diagram@2x-1

Chapter Three: Comparing headless commerce to traditional eCommerce architecture

Traditional eCommerce

The most common form of traditional eCommerce is the monolithic platform, where the frontend and backend are heavily tied together. They essentially serve a single channel, usually a website. They contain proprietary templating engines which are cumbersome to modify. The ability to modify is usually exposed by a rigid add-onto model--module patterns or very limited internal APIs.

Another downside to a monolithic platforms is time. Generally speaking, to add new features or develop new use cases using the platform, is time consuming and complex, meaning higher development costs and the inability to innovate quickly.

Don’t get me wrong, the traditional approach is still right for certain use cases, and is still advocated by many agencies. If you just want to spin up a website out-of-the-box, using readily-available templates and don’t see the need for modification and flexibility, this is probably the right option for you. You also get full control of the platform including hosting and maintaining - this is tiresome and cumbersome for a lot of developers but for some, it makes sense to give your IT department full control - particularly if your site needs extreme customization or data kept on lock down due to its sensitive nature.

Headless Vs Traditional

 

Headless commerce

Headless commerce is decoupled. Typically, the backend is connected to the frontend by simple REST and GraphQL APIs. Behind this API layer sits either a traditional, monolithic eCommerce platform or multiple separate microservices which can scale independently. The complexities of this backend logic and data storage can be abstracted away from the frontend. If you're evaluating traditional eCommerce platforms with APIs claiming to be headless, it's important to note that their underlying code bases can lead to limitations in their APIs feature/functionality or coverage. API-first commerce vendors typically have 100% coverage.

Learn more about using Integrations APIS

So what's so great about headless?

  1. It may be much faster to create new commerce experiences, even with a small team. The learning curve is much lower with well-abstracted and consistent APIs, meaning both junior and experienced developers are equally empowered.
  2. As the frontend and backend are separated, designers are free to create front-end applications with far fewer constraints. When working with traditional platforms, the developers would often say they couldn't produce something a designer had imagined. Compromise was the inevitable outcome, because traditional platforms were so rigid. With the headless approach, this is far less likely to happen.
  3. Headless platforms may be much cheaper to run on scale. This is because the backend can scale to meet demand. Whether the entire monolith scales up or in a micro-service based architecture individual services, like carts and payment services, scale up during a flash sale or a burst of traffic, and scale down during less busy periods.
  4. With headless commerce, you can control, deliver and orchestrate multiple consistent brand experiences.
  5. Headless commerce architecture enables innovation, new experiences and rapid experimentation. It's possible to adopt a layering strategy to keep an existing stable stack and implement headless architecture alongside it. Simple working prototypes may be built in weeks, days or even hours, depending on the complexity of the use case.
  6. All of this contributes to increased brand engagement through more touchpoints. These innovative customer experiences create new opportunities to convert. This will lead to delighted customers and ultimately to an increase to the bottom line.

 

Chapter four: How headless commerce architecture 

manifests itself today 

Headless commerce is part of a much broader headless movement. A new stack has rapidly matured to compliment this new architectural approach. This is called the JAMstack.

JAMStack websites

JAM stands for JavaScript, API and Markup. Developers can create the frontend view the customers will experience. Merchandising, fulfillment and administrative teams can update and manage their commerce data via dashboards. Both of these actions trigger an automated build process which takes the developer's front-end view and commerce data to create simple HTML, CSS, and JavaScript files. These files can then be deployed to a content delivery network for super fast load times, where they get served up. This is essentially a static website which is very cheap to host and run. This is the head--the website your customer visits. The static site communicates with the commerce head to fire API requests. Good examples of such requests might be when a customer adds something to their cart or proceeds to checkout.


Headless eCommerce Architecture - Generic@2x (side 24)

A headless commerce solution is often just one piece of a much larger puzzle for larger websites with more complex requirements. At Elastic Path what sets us a part is our focus on delivering a commerce service, not a platform. What do we mean by this? Well this means that we focused on creating a super flexible cart, checkout and order service to act as your core commerce engine that leans into the existing ecosystem. Above you can see an abstracted and simplified architecture implementation highlighting some integration as to existing systems. This is essentially a best-in-class approach to create a whole website solution. This also includes downstream providers and utility APIs for specific functionality, such as warehouse inventory, tax calculation, and fulfillment. These integrations are created by simple, streamlined, serverless functions.

Chapter five

In summary - key takeaways

  1. Headless commerce isn't actually headless. One of the key benefits is this approach may have one or many heads. Heads are essentially websites and applications.
  2. Headless commerce abstracts away the core commerce business logic. This abstraction happens by a simple, powerful and easy-to-use eCommerce API.
  3. Headless commerce enables you the freedom and flexibility to rapidly create innovative new touchpoints and customer experiences.
  4. Architecting modern commerce stacks is going through a rapid evolution and is solidifying around movements happening in the developer ecosystem, such as JAMstack and serverless functions.
  5. Throughout history, humans have always been trying to make commerce transactions frictionless. Headless commerce is the natural next step in this journey. This isn't just about the future of commerce. This is happening today, and those who make the move to headless commerce will reap the benefits.

How do I know if headless commerce is right for me?  

If you're okay with cookie-cutter experiences and you just really need an out-of-the-box solution, then headless commerce may not be for you. If you really care about flexibility, speed and control, then headless commerce is probably a really good fit for you. However, you do need to have a build mindset, whether that's an internal development team or working with an agency partner. You may be building something from scratch, layering additional functionality on top of something you already have today, improving an existing eCommerce experience, or even doing something totally crazy, trying to rapidly innovate on the edge with some really interesting use cases. 

You need to have a build mindset and must really care about flexibility, speed, and control.

 

Who we are

Elastic Path enables brands and retailers to finally create the commerce experiences they’ve always imagined. Elastic Path provides the headless commerce service designed with the flexibility and speed to give builders what they want - complete control to build and deliver commerce their way. Hundreds of the world’s most innovative brands and retailers use Elastic Path to deliver the most innovative consumer experiences imaginable - spanning projects such as modern commerce websites, self checkout, IoT commerce, in-store kiosks, social media commerce, voice-enabled commerce, and more. If you are a builder looking to innovate, deliver ROI quickly, and you won’t settle for rigid, cookie-cutter commerce experiences, then Elastic Path is the right partner for you. 

 

    

Stay on top of industry trends with the latest blogs and articles from our eCommerce experts.