×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Developers

GET STARTED

FRAMEWORKS

Builder

Builder SDKs, examples, starters, and plugins

Mitosis

Universal component compiler. Write components once and compile to Vue, React, Svelte, Angular, and more

Builder

Builder SDKs, examples, starters, and plugins

Qwik

Extreme high speed frontent framework

Pricing

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

Made in Builder

‹ Back to blog

What is a headless CMS and why should ecommerce websites use one?

By Noa Shavit

A content management system (CMS) allows non-technical teams to update the content of a website or application. CMSs were built to help businesses move faster by removing the dependency on developers for content updates. There are other advantages to using a CMS, but this is the reason that nearly every ecommerce website already uses one.

Some CMSs let you design the experience as well as determine the copy, while others strictly separate the content database from the presentation layer. Some let you create fully bespoke experiences, while others confine you to a set of content models, templates and predetermined components. Some are proprietary, while others are homegrown, or open-source. You also have traditional CMSs, headless CMSs and agile CMSs. With so much variety it can be difficult to make sense of it all! 

In this post, we cover what a headless CMS is, why you should consider using one for your ecommerce business and what to look for when evaluating a headless CMS.

What is a headless CMS?

The benefits of a headless CMS

Traditional CMS headless CMS

Who is a headless CMS for?

What to look for in a headless CMS

Conclusion

What is a headless CMS?

Headless CMSs are API-first content management systems that can support unlimited ‘heads.’ In this analogy the frontend or interface the visitor is interacting with is the `head` (think social commerce, native applications, wearables, web apps, voice commerce, etc.). The ability to serve multiple frontends is the main difference between headless and traditional content management systems.

Traditional CMSs, like WordPress, take a monolithic approach to content management. They are responsible for everything visitors see when they land on a website. They are all-in-one solutions that combine the frontend presentation layer (which determines how things look) with the backend content database (which determines what things say).

Headless CMSs take a hub and spoke approach to content management and function as content hubs. They sever the ties between the content itself and how it is displayed, and focus on structured data. As a result, headless CMSs can support limitless ‘heads.’ The content is the same, the only thing that changes is how it is presented, which is determined by the specific frontend used (i.e. an iOS application will use the same content as the web app, but how the content is displayed is determined by the iOS application framework and web app framework, respectively).

The phrases ’headless’ and ‘monolithic’ might sound familiar, as there are also headless and monolithic ecommerce platforms, like commercetools, BigCommerce, Shopify, Magento and Salesforce Commerce Cloud, to name a few. A monolithic ecommerce platform comes with a proprietary CMS that allows merchants to build and manage storefronts on that platform. A headless commerce platform, on the other hand, is compatible with any API-first frontend and headless CMS.

ℹ️ INFO BOX

Monolithic platforms offer all-in-one solutions that tend to deliver sluggish websites. These sites are inherently slow due to code dependencies and un-optimized backend processes that need to finish running before the page can load and become interactive.

Blazing fast ecommerce sites are headless. Headless sites are modern websites that decouple the frontend presentation layer from the backend logic and use APIs to transfer information. As a result, headless sites are portable. They are also faster, more adaptable and offer developers far more flexibility and control compared to legacy sites.

For more about headless commerce and API-first architecture go here.

The ability to serve as a content hub and support multiple frontends might be the main advantage of a headless CMS over a traditional CMS. However, it is far from the only one.

The benefits of a headless CMS

Headless CMSs offer a few benefits over their traditional counterparts, including better performance, scalability, customization and compatibility.

1. A Headless CMS is faster

Headless CMSs are faster and more optimized than traditional content management systems. Decoupling the frontend from the backend content database results in less code dependency and overall better performance. This, and the use of modern headless frontends built for speed (e.g. Single-Page Applications and Progressive Web Apps), are the reasons that headless ecommerce sites are blazingly-fast, while the average traditional ecommerce site still takes 3-5 seconds to load.

2. A headless CMS is easier to scale

Headless CMSs are easier to scale than traditional CMSs on both the business and traffic fronts.

A headless CMS supports all of your channels and devices - current and future

A traditional CMS is a monolith. It controls the content and design of your storefront. These systems include content hosting and a limited WYSIWYG drag and drop website builder that gives non-technical teams the ability to build and manage ecommerce storefronts. These content systems are a great way to launch and build out your storefront with minimal developer investment, but the content they host is tied exclusively to that platform and will only work on it. Put differently, a traditional CMS cannot serve more than a single frontend.

When you use a traditional CMS you have a one-to-one relationship between the content management system and your frontend. With a headless CMS the relationship is that of one-to-many. A headless CMS functions as a content hub that can share your content with any API-supported frontend, this means it supports all of your current and future ‘heads.’

Think about it this way, if your storefront was built with a traditional CMS you won’t be able to use the content hosted there for your native iOS application, for example. There are workarounds of course, you can extract the content from your pages’ HTML, and then add it to the content system that is connected to your native app. But there is no straightforward way to scale the use of the content in a traditional CMS. With a headless CMS, all you need to do is connect APIs and, in this example, start using content from your headless CMS on your native iOS application.

When you use a traditional CMS you have a one-to-one relationship with a frontend. With a headless CMS the relationship is that of one-to-many, as your content can be displayed on any frontend. A headless CMS essentially future proofs your content against new devices and platforms.

A Headless CMS scales endlessly in the cloud

Headless CMSs host your content in the cloud, so it scales easily with traffic influxes. Traditional CMSs, on the other hand, tend to host content in-house, making it more difficult to scale. As a result, headless content management systems can scale endlessly to support new devices, platforms and traffic, while traditional CMSs fail all three.

👉 Schedule a free consultation to learn about going headless with Builder!

3. A headless CMS is compatible with any stack

Headless CMSs are compatible with any API-first stack. Traditional CMSs either provide their own proprietary ecommerce solutions, or are a service offered as part of a monolithic ecommerce platform. Regardless, traditional CMSs are only compatible with a limited amount of stack variations.

You might be using Shopify’s built-in theme editor which will only work with your Shopify storefront, or use WordPress with an ecommerce platform plugin. Ultimately you are limited in your stack choices.

Headless CMSs are stack agnostic. They will work with any stack combination that is based on APIs transferring information between distinct services (aka microservices architecture). This adds a level of flexibility that is missing from every monolithic platform. With a headless CMS you are free to tailor your stack to your specific needs.

4. A headless CMS offers more customization

Traditional CMSs offer only limited customization. Some only allow you to add custom code to your web pages, while others let you slightly modify the user interface, or even the editor (e.g. extend the functionality of the rich text editor). Regardless, you can only customize your experience to a certain degree with a traditional CMS, after all it is a closed monolith.

Headless CMSs, on the other hand, offer developers far more flexibility and customization options. They can create new content types and models, extend the platform’s functionality with third-party apps or their own custom code, tweak the UI, define roles and permissions, and much more.

Headless CMSs offer far more flexibility and customization than traditional content systems.

Traditional vs. headless CMS

Here are the main differences between the capabilities of traditional vs. headless content management systems when used for ecommerce storefronts:

Capabilities

Performance

Code interdependencies

Scalability

Storefront customization

Platform customization

Device compatibility

Stack compatibility

Traditional CMS

Slower

Many as the frontend and backend are part of the same codebase.

Difficult to scale

Limited and based on the frontend tooling offered by the traditional CMS.

Very limited

Limited

Limited

Headless CMS

Built for speed

Optimized code without dependencies between the frontend and backend.

Built-in scalability

Limitless, but, you'll need a developer to create bespoke shopping experiences on most headless CMSs.

Developers have far more control and customization options with headless CMSs.

Limitless

Limitless, allowing storefronts to completely tailor their stack to their needs.

The main disadvantage of most headless CMSs is that you rely on developers for new content models and layouts. Builder is unique in that it offers a headless CMS paired with a powerful visual editor, allowing non-technical teams to create fully bespoke experiences from scratch without relying on developers.

Who is a headless CMS for?

The main benefit of a headless CMS over a traditional one is that it functions as a content hub that can support limitless ‘heads.’ This really helps define who headless CMSs are best suited for.

Headless content management systems are built for merchants that need to be able to scale their content and support multiple channels and/or devices. High-trafficked sites are a great fit as well, as the performance improvements a headless CMS brings over a traditional CMS can have a disproportional impact on conversion rates. Merchants that offer personalized experiences and need to deliver variants dynamically based on criteria, such as visitor location, shopping behavior, cart information, previous purchases, new vs. return customers, etc. are also great fits and should definitely consider upgrading to a headless CMS.

If one or more of the following accurately describes your ecommerce businesses, you should seriously consider a headless CMS:

1. Omnichannel commerce - Share your content with social commerce, mobile and web experiences, wearables, etc.

2. Hyper-personalization - Dynamically determine your customer’s experience based on their shopping behavior, browsing history, customer information or any other criteria.

3. Localization - Store all of your localized content in one place and deliver the right version to customers based on their location.

4. High-trafficked - Boost conversions and engagement with a faster and more scalable experience, powered by a headless CMS.

5. Headless commerce - If you have already gone headless using a headless CMS is a no brainer.

Everlane is a great example: the ecommerce powerhouse delivers hyper-personalization at scale with Builder. In just one month, Everlane published over a 100 versions of its homepage and delivered variants to customers based on their previous purchases, if they were new or returning customers, and other criteria. But that’s not all. With Builder, product launches are 4x faster, site updates are 32x faster and developers are no longer required to make content updates.

Everlane leverages Builder to merchandise sections across the entire storefront.

Site navigation and links are also managed in Builder with live, real-time previewing.

👉 Learn how Everlane gets more done faster with Builder, here!

Armed with the understanding of what headless CMSs are and what kind of businesses are best suited to use them, we can dive into what to look for when you are evaluating headless CMSs for your ecommerce business.

What to look for in a headless CMS?

A headless CMS, at its core, is meant to provide non-technical teams with a way to update the websites, apps, etc. in a performant way. The goal is to empower teams to move faster. Therefore, you should look for a system that is easy to use for non-technical teams, easy to set up for developers, and flexible enough to allow marketers, merchandisers and product managers to create rich shopping experiences, independently.

A headless CMS also gives multiple users access to manage your storefront, so some safety measures need to be put in place. Make sure to assess the extent that different headless CMSs provide your developers with control over your content and workflows. Roles and permission settings are a commodity. Look for a headless content system that gives your developers control over your content and the platform itself - after all this is your business!

Lastly, your headless CMS needs to play nice with your frontend frameworks and backend ecommerce platform. It needs to be able to deliver content based on data from third-party tools, such as your CRM and ecommerce platform, or custom code, and it needs to have robust APIs to do so. When evaluating the options make sure to have your developers look into each platform’s APIs and the level of customization they support.

👉 Schedule a free consultation to learn about going headless with Builder!

A fully customizable headless content management system with an intuitive interface and robust APIs is the ideal. One that empowers non-technical teams to create bespoke experiences and developers can easily control workflows and extend functionality with custom code. This is precisely what Builder is.

To recap, a headless CMS for ecommerce offers the following benefits:

1. It’s a high-speed content hub that can share content with limitless ‘heads.’

2. It’s easy to use for non-technical teams, and for developers to set up (SDKs, native integrations, rendering, etc.) and maintain.

3. It offers flexibility for non-technical teams to create rich shopping experiences without relying on developers, as well as for developers to customize the platform to their specific needs.

4. It offers developers control so that they can easily determine who can use the platform, the options they will have at their disposal and what parts of the storefront they can update.

5. It's extensible. Ideally, your headless CMS will have robust APIs, and support both third-party apps and custom code.

Headless CMSs deliver better performance, flexibility, extensibility and customization than traditional content management systems.

Conclusion

A headless CMS offers a few advantages over a traditional CMS. Headless CMSs provide better performance, scalability, flexibility and customization than traditional CMSs. They also function as content hubs that can serve limitless ‘heads.’ A headless CMS essentially future proofs your sites against channels and devices.

If your storefront is highly-trafficked, supports multiple locales, provides hyper-personalized experiences, or take an omnichannel approach, you should definitely consider a headless CMS. And if you are already headless, or are in the process of going headless, a headless CMS is a no brainer.

When evaluating headless CMSs look for one that is easy to use for technical and non-technical teams alike. One that lets marketers, merchandisers and product managers create rich digital experiences without waiting on development cycles. One that is customizable and offers developers control over the content and the platform itself. And one that can be easily supplemented with additional tools or even your own code.

Look no further, Builder does all of the above and more. It provides non-technical teams with autonomy to create bespoke experiences and gives developers full control over the storefront and platform. It is completely modular and can be used for just one section of a page, or collection, or even your entire storefront. Regardless of how you use the platform, you will also have access to advanced features, like high-performance A/B testing, content scheduling, and content targeting based on any criteria, including previous purchases, items in cart, browsing behavior, and more.

👉 Schedule a free consultation to learn about going headless with Builder!

Read more on the blog
Shopify Online Store 2.0 + Builder = Magic
Death by Closure (and how Qwik solves it)
A first look at Qwik - the HTML first framework

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

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

DEVELOPERS

Builder for Developers

Developer Docs

Github

Mitosis

Qwik

INTEGRATIONS

All integrations

Shopify

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

Partners

© 2021 Builder.io, Inc.

Security

Privacy Policy

Terms of Service