We're hiring! Check out open positions
Development

What is headless eCommerce?

Tim Davidson
3 min read

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.

diagram of a monolithic website architecture

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.

headless ecommerce architecture diagram

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!

Tim Davidson
Tim Davidson
Tim is the face of the company. When you want to kick off a new project, or an update on your existing project, Tim is your man. With a background in project management, Tim specialises in managing the chaos around the company.

Have an idea you want to discuss?

We’re based in Canberra, Australia and we LOVE working with locals… but we work with clients all around the world.

From the U.S. to the U.K. From Norway to New Zealand. Where there’s a problem to solve, we’ll be there!

More insights from us

Cross Platform App Development: Developing an Application for Maximum Exposure
Development

Cross Platform App Development: Developing an Application for Maximum Exposure

There was a time when developing an app for mobile users meant that you had to develop different applications for iOS…
Tim Davidson
Tim Davidson
12 min read
What's the Difference Between a Web Developer, Website Programmer and Web Designer
Development

What's the Difference Between a Web Developer, Website Programmer and Web Designer

Do you know the difference between a web developer, web programmer and web designer? Most people use those words…
Tim Davidson
Tim Davidson
6 min read
Make (formally Integromat) vs. Zapier: A Comprehensive Comparison
Productivity

Make (formally Integromat) vs. Zapier: A Comprehensive Comparison

Make (formally Integromat) and Zapier are two of the most popular integrative tools on the web. Both boast a large user…
Tim Davidson
Tim Davidson
13 min read