New! Our platform - Quizpipe is live!

Development

What is headless eCommerce?

Tim Davidson
by Tim Davidson
3 min

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!

Insights

More insights from us

Research and Development Tax Incentive - Australia
News & Announcements

Research and Development Tax Incentive - Australia

The Australian government introduced a research and development tax incentive scheme in 2017. The purpose of the scheme…
Case Study: Bitmax
News & Announcements

Case Study: Bitmax

The Bitmax team reached out to us for help redesigning and developing their website. After bouncing a few emails back…
Effective Communication For Remote Work - 5 Big Lessons
Productivity

Effective Communication For Remote Work - 5 Big Lessons

Communicating effectively is arguably the most challenging part of working remotely. As the global pandemic forced the…