Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

This page was made in Builder!

‹ Back to blog

A visual explanation of headless commerce

By Steve Sewell

Contents

What is "headless"?

Current ecommerce platforms do everything in one place - we call these a "monolith." Two of the main pieces they provide are storing your product data (the "backend") and powering your web storefront (the "frontend") . The problem is that the major platforms were built 7+ years ago when the state of the art for site performance was much different. As a result, when using those platforms your site is running on an older generation of technology and cannot benefit from the latest advancements

Going "headless" means taking control of your site frontend for better performance. This means having the ability to choose your site's technology for maximum performance and control, separating it from the rest of the parts of your e-commerce platform. In this metaphor, your site is the "head," and the rest of the platform is the "body."

In short - taking control of your store's frontend gives you the ability to optimize for more speed, and thus more conversions

Why go headless?

How is headless faster?

With a typical monolithic site, a page load can take 10+ seconds. This is because there are many steps that need to be taken before the entire page can be displayed to your customer, each one consuming precious time and resources while the customer waits

Traditional site load times:

SIMPLE VIEW

DETAILED VIEW

With a headless site, all content can be delivered far faster. This is because the entire page including all content can be pre-generated in the fastest possible way, delivering the entire page contents in less than a second to your customer

Headless site load times:

SIMPLE VIEW

DETAILED VIEW

For an optimized headless site, the entire page loads near instantly, in one step. This is because headless sites invert the process, pre constructing each page ahead of time with all of its contents ready and optimized for your customers before they even request it.

On top of this, navigating between pages is substantially faster for headless sites as well, as subsequent pages can be "pre fetched" without a full page reload, so they can load in milliseconds

What do I need in order to go headless?

First, going headless requires software engineering effort to create a new site. The engineers can be in house or via an agency, and both can work out great. You can do this in one fell swoop or build and migrate your site incrementally.

Second, you will need a few solutions to host and edit your site. A common path is to choose one service in each of the following four categories:

  1. Commerce platform - Shopify, BigCommerce, and most others work great. It is where your product catalog lives
  2. Hosting - this is how you deliver your headless site to your customers
  3. Content management - aka a headless CMS, this is how you create and edit pages of your site
  4. Data layer (optional) - some platforms don't provide fast and scalable access to your product catalog, so a data layer can solve this. Some solutions provide a standalone data layer as a service you can integrate into your stack of choice, and others, like using Gatsby, Builder.io, or Shogun Frontend have scalable data access built in and don't require a separate data layer.

The above landscape is just a snapshot of some of the most popular options. Check out headlesscommerce.org for an even more complete list of headless solutions

Visually editing a headless site in Builder.io

What are the drawbacks?

Traditionally, headless technology being new had some drawbacks. Using some of the early solutions you could get stuck being heavily dependent on developers to edit and optimize your site.

But today you are in good hands, as modern headless solutions such as Builder were built to solve exactly this problem

Additionally, there is the upfront cost of the new site build and recurring costs of adding additional tools and services

Who should go headless?

If your business is doing > $5m in GMV you should seriously consider going headless, as the consequences of poor performance is likely hurting your bottom line significantly more than the cost of modernizing your storefront.

Read more about how we suggest to go headless the right way here.

If you would like a free consultation on how you can go headless and what the ROI could look like for your business, contact us

Read more on the blog
How to speed up your Shopify store to boost conversions
Introducing Theme Studio 2.0 - the ultimate no-code solution for Shopify
4 common headless commerce mistakes to avoid

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service