Register now: Best Builder Practices for Marketers & Designers

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

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

‹ Back to blog

Ecommerce

A visual explanation of headless ecommerce

January 18, 2021

Written By Steve Sewell

Contents

What is headless ecommerce?

Most popular ecommerce platforms on the market do everything in one place - they let you manage your storefront and inventory. These all-in-one platforms are called "monolithic ecommerce platforms" (or "monoliths" for short).

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.

Monoliths have additional disadvantage, such as lock in (your website will only run on their platform), but inability to best-of-breed solutions along with inherent performance issues are the two major drawbacks of monolothic ecommerce platforms, such as Shopify, Magento, Salesforce Commerce Cloud and others.

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 ecommerce platform. In this metaphor, your site is the "head," and the rest of the platform is the "body."

Going headless also means that your site isn't built just for the ecommerce platform you are on, it is portable and will work on any platform with APIs. This means that you can invest in your site, knowing that it will come with you if and when you decide to replatform.

In short - taking control of your storefront frontend gives you the ability to use best-of-bread tech and modern frameworks built for speed, thus increasing conversions and revenue.

For a detailed explanation of what headless commerce is and how it works, go here.

Simply put, controlling your site's frontend allows you to have a faster site, and faster sites mean more conversions. A lot has been written about the impact of site speed on conversions and revenue, here are a few stats:

On 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.

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 and cached at the edge so it loads as fast as possible, delivering the entire page contents in less than a second to your customer's device.

SIMPLE VIEW

DETAILED VIEW

An optimized headless site loads pages near instantly, in one step. This is because a Jamstack 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

*It's worth mentioning that headless websites, such as single-page application and progressive web apps can actually add to your first-page load as they are downloading assets to cut page transitions down to sub-seconds, but this can be solved with Jamstack as described above, as well as code splitting, lazy loading and other optimization tactics. For more tips on writing high performance code, read this post.

First, going headless requires software engineering effort to create a new API-driven website. 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 headless ecommerce site. A common path is to choose one service in each of the following four categories:

  1. Commerce platform - this is where your product catalog lives. Shopify, BigCommerce, commertools have the most robust APIs and are therefore the easiest to take headless, but you can go headless on other platforms too.
  2. Hosting - this is how you deliver your headless site to your customers.
  3. Content management system - 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 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 or easily add popular headless ecommerce apps to your storefront from the HeadlessApp.Store.

Visually editing a headless site in Builder.io

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 headless ecommerce 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 headless site build and recurring costs of adding additional tools and services.

If your business is doing $50M in GMV or more you should seriously consider 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 migrate to an headless ecommerce site 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.

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
AI10 MIN
Turn a Figma Design Into a Working Dashboard App in 5 Minutes
November 8, 2024
Design to code8 MIN
Figma to React Native: Convert designs to clean code in a click
November 6, 2024
AI5 MIN
Introducing Visual Copilot 2.0: Design to Interactive
October 31, 2024