What is headless eCommerce?

There’s plenty of hype around going headless with Shopify, BigCommerce, Shopware and Magento. Unless you’re familiar with programming concepts and architectures, the idea of a headless website is probably not clear. This article will aim to answer the question “what is headless eCommerce” as succinctly as possible.

The simplest way to break the headless concept down is to start by thinking about a “regular” website or eCommerce store.

Monolithic eCommerce Stores

These types of sites have code that lives on a server. When a user arrives at the site’s URL, a request is sent to the server which runs a series of commands and returns the code which is interpreted by the browser.

This traditional, all-in-one approach is called monolithic architecture. Within the codebase, any number of features can run. Reporting, ordering management, tools to write content, plugins that facilitate delivery and tracking, reviews, and thousands of other features.

To use a car analogy, all the features are powered by the same engine and living under the same hood.

The website’s “head” and “body” are connected. The head in this situation refers to the database (memories) and code that connects memories together to draw logical conclusions (backend functionality).

The body is everything that the user can see and interact with. This boils down to HTML, CSS and JavaScript.

Understanding this all-in-one, integrated architecture will provide some clarity to a headless setup.

Headless eCommerce Stores

Headless eCommerce stores are built from “microservices” and connected by API. Unlike monolithic setups, the frontend code that is delivered to the user isn’t integrated with the backend code that runs queries on the database and performs complex logic.

We’ll quickly break down the “headless” expression a little more in case it’s not clear. A headless website has a frontend (body) that users can interact with but there’s no database or backend code (head).

The head is living in the cloud and the body communicates via API over HTTP when bits of data or particular functions need to be run.

In the diagram above, the same features that were packed into the monolithic system now operate as their own platforms. This might be Contentful for content, Shopify for eCommerce functionality, Segment for Analytics and Routific for distribution planning.

For the sake of explaining the architecture, we’ll just talk about the headless application pulling data in from the microservices APIs.

The eCommerce store may need to display a blog article that features a handful of products. To do this, it sends a request to Contentful API to provide the blog content and another request to the Shopify API for the product details.

When the data arrives, it is modified and turned into code that is readable by the browser. This is typically handled by a frontend framework like Gatsby, Next.js, Nuxt, or Vue Storefront.

What’s the point of headless eCommerce

What’s the point of moving away from an all-in-one system and going headless with your eCommerce store? The answer boils down to store owners chasing faster load times, more flexibility and a solution that is tailored specifically to their business needs.

There’s actually a ton of benefits to headless eCommerce but the one that most store owners are drawn to is the blazing page load times.

Using a static site generator to build the stores’ frontend means the site’s code can be delivered from the closest CDN node, and the time to download and display the site is very quick.

Here are a couple of great, really fast headless eCommerce store examples:

FreshOnline - this is a headless Shopify store we built a little while back

Next.js Commerce Demo - this is a demo site combining BigCommerce and Next.js

Wrapping up

Jumping straight into understanding a complex software architecture concept is difficult if you don’t already have the prerequisite understanding of how the internet works. We’ve aimed to break down the concept as clearly as possible without diving too deep into the technical weeds.

Hopefully, this breakdown clears up some of the confusion!