Headless Architecture: What It Is & Why Scaling Stores Love It So Much

September 20, 2022

Headless Architecture v1 headless architecture

“Headless architecture” is a hot, technical-sounding term echoing through the ecommerce space these days. For good reason, too.

Ecommerce brands are constantly looking for ways to differentiate themselves from the competition, and it’s a densely populated space, whatever vertical you’re in.

But, like many terms relating to headless technology, it can be difficult to know what this is and whether it’s right for your brand.

For while there are many benefits to upgrading to a headless frontend solution (as you will see), not every brand is ready to take the leap.

If you’ve seen this concept pop up and hoped for a 101 walkthrough, you’re in the right place. Welcome.

In this post, we’ll cover:

To get us started, let’s clear up exactly what it is.

#cta-visual-fe#<cta-title>Create an unforgettable customer experience<cta-title>Shogun Frontend is a radically different approach to headless commerce.Learn more

 

What is headless architecture?

Headless architecture is the way in which the different parts of a headless commerce solution work together and how these different parts use application programming interfaces (APIs) to “talk” with each other.

You can think of it as the internal design that makes headless commerce possible—the headless framework or headless infrastructure if you will.

“Headless architecture” is often mentioned interchangeably with headless commerce, but they’re really two parts of the larger ecosystem.

When people talk about “headless commerce,” they’re usually referring to how this kind of site is made up or its components.

Overall, it’s more accurate to say that headless commerce uses headless architecture versus implying they’re the same thing.

So, there’s headless commerce and headless commerce architecture.

The architecture determines how your headless commerce platform communicates with important components like your CMS platform and all the other individual services that make up your online store (CDN, OMS, PIM, etc).

Monolithic vs microservices architecture

The traditional way software has been built is as a unified system where all parts are interconnected.

When changing one piece of this structure, the whole thing needs to be updated.

In a traditional Shopify or BigCommerce store, for example, everything from your CMS and PIM to your theme are interconnected. Making a change to one part can have dire implications for other parts.

Monolithic software architecture has one codebase, so development and deployment are easy.

But monoliths can’t scale easily. While they may do certain things really well (like checkout and payments, for example), they may lag on other important functions (like content management and themes).

On the other hand, a headless microservices architecture comprises many independent services, each with its own databases and business logic.

Given the smaller scope of each service and the fact that they aren’t dependent on each other, it’s easy to scale rapidly and update individual services without affecting the whole architecture.

A microservices-based approach allows brands to choose the tools they want, helping them break out of brand lock with a singular monolithic platform.

This composable commerce approach is much more flexible than the traditional approach, especially for rapidly growing brands.

Note: Recently, there’s been a move toward something called packaged business capabilities (PBCs) that bundle microservices into specific business functions. The difference is largely imperceptible, and reading too much about it will needlessly give you a headache.

But enough of the semantics! Let’s get to why it’s important for you.

Why headless architecture is good for ecommerce

Many modern online stores are transitioning to websites where the backend and frontend use separate technologies.

This headless approach allows brands to pick each service in their tech stack to scale their operations more efficiently and provide unequaled customer experiences.

Everything the customer sees (the frontend) is powered by snappy JavaScript frameworks, enabling super speedy page loads and unique site design.

Meanwhile, all the essential behind-the-scenes transactional functionality—checkout, payments, inventory management—is handled by your traditional ecommerce platform (Shopify, BigCommerce, Adobe Commerce) and/or other third-party services.

In other words, you can create a ‘headless ecommerce site’ where the tech is decoupled for greater flexibility—or you can run a ‘monolithic’ architecture where your front and backend use just one piece of technology for everything.

Here’s a simple side-by-side comparison of the two:

headless traditional compare headless architecture
Traditional monolithic architecture vs headless architecture

In the simplest terms, going headless means ungluing the frontend and backend from each other and reconnecting them by targeted APIs that call up services and data when and where they are needed.

As a result, merchants can provide richer, snappier shopping experiences and implement important site changes more quickly.

The benefits of a headless architecture

The reason that more and more brands are adopting a headless architecture is that it pays dividends. While it takes some work, the benefits are real.

Going headless helps you:

  • Achieve the exact brand look you want with your ecommerce site
  • Get a differentiated brand experience without tradeoffs
  • Scale a high volume of content/collections with ease
  • Expand your brand on a global scale

All of this becomes possible because—once decoupled—you’re no longer limited to the standard functionality of your traditional ecommerce platform.

Let’s dig deeper into what this means for your brand.

Complete design control

Traditional commerce templates can be found all over the internet. Every product page or collection page looks almost exactly the same.

With a headless frontend, you can break the mold, think outside the box, [insert your favorite relevant analogy here].

No longer constrained by the design conventions of ecommerce themes, you can design every store page based on your vision.

nomad mobile merchandising headless architecture
Nomad is able to show off incredible merchandising capabilities

You can see this on full display in these exceptional ecommerce experiences.

Sub-second load times

By unburdening your frontend from your backend, you unlock enormous speed improvements. Third-party plugins are no longer directly tied into your frontend, slowing it down.

On top of that, replacing that customer-facing frontend with a React-based PWA means pages load in a flash, and your store delivers an app-like experience on any device.

stikwood scroll headless architecture
Stikwood uses a PWA in this speedy Shogun Frontend build

So, you can get richer shopping experiences and have them load faster than the cookie-cutter themes.

Can handle complexity and volume

As your store scales, complexity increases.

You add more products and more variants and get more traffic. More, more, more. The benefits of going big-time, I guess.

The monolithic ecommerce systems start showing signs of wear as you add this complexity, unable to handle the content requirements and growing traffic.

Headless stores are built for scalability.

The presentation layer doesn’t even blink at the skyrocketing traffic numbers, and your decoupled CMS manages complexity with ease.

Easily expand into multiple markets

Another side effect of a growing ecommerce brand is expansion.

New countries, new currencies, new stores—no problem.

multi store headless headless architecture

By switching to a headless architecture, you can spin up multiple storefronts for your various regions or accept multiple currencies to expand your business internationally.

Two types of headless architecture

Brands stack a custom headless system together in different ways, but to get the headless benefits above, your site typically needs a separated content management system (or CMS).

If your CMS is separated, you are, by default, more flexible with what you can do with your content.

Many are used to being underwhelmed by content management systems since they’ve been using a traditional CMS built into their monolithic systems. But, a powerful CMS, untethered from an ecommerce platform, can allow brands to do more with their content.

#cta-paragraph-fe#There are other parts to headless architecture—like middleware, your content distribution network (CDN), and more—but in this post, we’ll focus on talking about the CMS portion of headless architecture.

There are two common ‘structures’ brands use when building a headless site: one involves a ‘decoupled CMS’ and the other a ‘headless CMS.’

Both of these architectures separate the backend of your store from the frontend presentation layer, meaning they both help you achieve “headlessness.”

But there’s a fundamental difference.

A headless CMS can be thought of as a foundational type of headless architecture.

It’s focused on pushing content to different channels without any concern for exactly where that content is published or what it looks like on particular devices/channels.

A decoupled CMS is similar in that you can still publish content to various channels. But with this style of CMS, ecommerce managers can preview how content looks on various devices/channels before publishing.

For non-technical team members, the distinction is vital.

Let’s zoom in and look at the two side-by-side:

#cta-mini-fe#Find out if your store is a good fit for headless commerce.Take the quiz

 

Headless CMS

Both a headless CMS and a decoupled CMS have content management and storage backends and can deliver content from this database.

But with a headless CMS, there’s no one defined frontend or presentation layer—meaning you can publish your ecommerce web content to an array of channels or devices (often referred to as omnichannel).

headless cms headless architecture

Think of a headless CMS as a foundational type of headless architecture—there’s no defined frontend or presentation layer to push content to.

This means you can choose where your content will be delivered—like on your online store, mobile app, or even a smartwatch output—because your content is not limited to a specific interface.

However, a headless CMS isn’t concerned with how your content renders across devices once published.

For example, your team can push your website content to your in-store iPads, but the formatting might not look right.

To confirm your content appears like it’s meant to, the presentation layers must be customized to fit the iPad specs (requiring custom code).

While a headless CMS offers limitless flexibility for your store, you still need many dev resources to ensure things are functioning and looking as intended.

Maintaining a headless CMS is next to impossible without developer help.

So why should merchants consider a headless CMS?

  • It gets your site headless, for one! This headless architecture offers unlocked potential for building faster, more engaging ecommerce experiences through UX and rich content.
  • You get all the benefits of headless, but you’ll typically need a larger internal development team to support your site with this setup.

Decoupled CMS

Just like in the case of a headless CMS, with a decoupled CMS, the front and backends work independently (they’re separate) but talk to one another with APIs.

The core difference between the two is that a decoupled CMS is concerned with the presentation layer of a device or its output.

You can preview content using a customized template or theme so your content is publish-ready.

#cta-paragraph-fe#An example of this architecture in practice would be if you had Shopify or BigCommerce running as your backend and Contentful as your decoupled CMS. This software would then connect to your WordPress frontend through APIs.

decoupled cms headless architecture

A decoupled CMS has preview capabilities, meaning you can see how your content will render before its published.

This preview capability helps your non-technical team make changes to the content to fit various channels without dev reliance.

Ecommerce team members can update images and fonts, which allows your dev resources to focus on other, more critical projects.

Even though a decoupled CMS doesn’t call for as robust development teams due to content preview capabilities, they’re still beneficial to have on your team.

For example, if you want to publish content to channels like smartwatches, you’ll need dev resources to add custom code to the site.

With a decoupled CMS:

  • You still get the benefits of going headless, but with content preview capabilities.
  • This kind of CMS is best suited for teams who want to move fast with more autonomy for ecommerce teams and minimal developer help. Merchants with marketing teams who want the ability to make site changes without relying entirely on developers would favor a decoupled CMS as part of their headless architecture.

Which headless architecture is best for your brand?

Many ecommerce managers want a solution that gives them total control over where their content is published and unlimited creative flexibility for their site without performance tradeoffs.

As we walked through here, both headless architectures can help you achieve this.

So, of these two architectures, is one “better” for your brand? Here’s the simple answer: It depends on the needs of your team.

A headless CMS and decoupled CMS both require a trusted developer resource to ensure proper site functionality and customize it to fit your brand’s needs.

But a decoupled CMS is the best fit for brands looking to build a future-proof site with content preview capabilities and reduced reliance on developer help for everyday site updates and tasks.

And for brands looking for even more simplicity, an all-in-one frontend solution can help you go headless without the headaches!

An all-in-one frontend solution, like Shogun Frontend, uses best-in-breed technology to power your headless site.

traditional vs frontend headless architecture

You can focus on revenue-driving activities—like sales and customer retention—without needing to assemble all the parts of your site architecture.

#cta-visual-fe#<cta-title>Shogun Frontend: A radically different approach to headless commerce.<cta-title>See if an all-in-one Frontend Platform is right for your brand.Learn more

 

What types of brands should consider going headless?

Brands of all ecommerce niches are using headless technology to power their store—apparel, consumer packaged goods, wellness, you name it!

Typically, headless is a route for ecommerce brands experiencing high levels of growth.

But the question is: Is headless architecture right for your brand? You might want to consider headless if…

  • You need to accommodate high volumes of website traffic
  • You want to create a completely customized online user experience for your customers
  • You want to experiment with UX and design while maintaining fast site speeds with minimal dev help

Many scaling DTC brands like Nomad, Zinus, WellPath, and more have gone the progressive web app (PWA) route to keep up with their growth.

zinus furniture scroll headless architecture
The Zinus store is blazing fast and beautiful to scroll through.

A headless architecture gives these brands the agility they need to meet (and exceed) customer expectations.

Also, it’s worth noting that you don’t need a huge team to go headless.

However, your team should have a working knowledge of the ecommerce industry, how your website contributes to the overall growth of your brand, and how headless architecture can help you reach your business goals.

Headless architecture FAQs

What is a headless API?

Headless architecture has application programming interfaces (APIs) at its core, facilitating the delivery of crucial information between the piece of your headless tech stack.

Instead of having one monolithic architecture with all functionalities fused together, these vital services are loosely coupled by way of APIs, allowing the backend and frontend to work independently while quickly getting data back and forth.

We talk more about this in our complete guide to headless commerce.

What is a headless platform?

A headless platform could describe various things because headless is comprised of multiple services working together.

For headless-enabled ecommerce platforms, you have Shopify, BigCommerce, Adobe Commerce, and Salesforce Commerce Cloud.

For headless CMS platforms, there are options like Contentful, Prismic, Storyblok, and Sanity.

Shogun Frontend is the headless platform you want when you need an all-in-one bundled frontend solution.

What does headless implementation mean?

If headless builds have architects, they also have builders. To make your headless architecture a reality, it needs to be implemented by engineers.

This involves getting all the distinct headless technologies connected and your frontend developed to your specifications.

Going from your monolithic ecommerce store to a headless commerce build takes the right expertise and time to get it all just right.

Ditch the monolith for a headless architecture approach

Headless architecture empowers merchants to build stellar online shopping experiences for their customers.

And it allows them to stand out from the competition in their own way.

Brands can control how they present themselves to the world, which is one of the coolest parts of headless technology.

Don’t you think it’s about time to ditch the monolith and build the store you really want?

 

#cta-visual-fe#<cta-title>Shogun Frontend: A radically different approach to headless commerce.<cta-title>See if an all-in-one Frontend Platform is right for your brand.Learn more

Kaitlyn Ambrose

Kaitlyn works on all things content at Shogun. ⚡

The latest ecomm tips sent to your inbox

share this post

You might also like

Advanced Multi-store Discounts

[go_pricing id="pba-discounts"]

Cookie Settings is not available. Cookie Consent is disabled or is just disabled for your country.