Composable Commerce: What Is It & Is It Right For Your Brand?

For years, ecommerce brands have heard that the only way to create the best possible ecommerce experience is to hand-pick every component powering their stores.

Essentially assembling your perfect headless front and backend solution, like choosing entrees from a buffet.

Of course, you want to use the best tech to power your store—with the flexibility you need to stay competitive and future-proof your online operations.

I mean, who doesn’t love options (or a buffet, for that matter!)?

Composable commerce is all about the buffet, giving ecommerce brands total control over what technologies power their stores, plus all that comes with that control (both good and bad).

This post aims to clearly define composable commerce, where it shines, where it falls short, and whether it’s the right approach to headless for your brand.

There isn’t just one way to go headless, luckily.

You can do it without the inherent complexities, massive software investment, and ongoing vendor management of composable commerce. But we’ll get to that later on.

In this post, we’ll cover:

• What composable commerce is
• Pros and cons of going the composable route
• Composable commerce vs an all-in-one frontend solution
• The anatomy of Shogun Frontend
• Examples of brands going headless
• Composable commerce FAQs

So settle in, and let’s get started.

#cta-visual-fe#<cta-title>Take full design control of your ecommerce store<cta-title>Create custom experiences without site bloat on Shogun Frontend.Learn more

What is composable commerce?

Composable commerce is a way for businesses to build a completely unique ecommerce experience by combining the best-of-breed technology aligning with their business goals.

It’s all about taking a monolithic ecommerce platform (Shopify, BigCommerce, Adobe Commerce) and breaking it into pieces to individually compose into a new platform.

According to Gartner, composable commerce is:

“…an architectural approach to digital commerce whereby applications are constructed with packaged business capabilities (PBCs)… which are used to compose new commerce functionality and experiences.”

They go on to say that the composable approach “contrasts with a platform-centric approach, in which monolithic commerce platforms are deployed to manage most aspects of the commerce customer experience.”

In other words, brands can cherry-pick top-tier technology to create a memorable online shopping experience.

But, content written for enterprise businesses is often overly complex, leaving readers guessing what it really means.

Here at Shogun, we prefer nostalgic analogies.

One way to think about composable commerce—also known as “modular commerce”—is like hand-selecting all the Lego pieces to build your ideal online experience.

Except—when it comes to the frontend of your store—the Lego pieces are your content management system (CMS), middleware, content delivery network (CDN), server-side rendering (SSR) frameworks, and more.

Instead of buying a complete Lego set from one vendor—including the blocks needed to create your online store—you buy each Lego block from a different vendor, hoping to end up with a complete store.

The reason brands go this route is the mistaken idea that it’s the only way to get the best-in-class tech to power their ecommerce storefront.

Before we forge into why brands might want to go another route, let’s go over the good and bad of composable commerce.

#cta-paragraph-fe#If you need a refresher on headless—or you are brand new to the topic—check out our jargon-free guide to all things headless commerce.

The pros and cons of composable commerce

When choosing how you construct your ecommerce site, you want to know the upsides and downsides of any particular method.

Let’s examine the pros and cons of pursuing a composable enterprise.

Benefits of composable commerce

Many enterprise merchants with big developer teams like the modular approach of composable commerce for a few major reasons:

• Complete control over the picking and managing of all site components
• Memorable shopping experiences at any touchpoint, helping your brand stand out
• The power to choose your software/swap out pieces you prefer at given times, allowing the ability to adapt to changing brand needs
• Long-term agility because you can swap out given pieces as best practices change

Disadvantages of composable commerce

However, there are cons to consider depending on the size of your business, like:

• Ongoing management of multiple vendors and contracts for each component
• Many complex decisions to make over modular pieces of your frontend (which your ecommerce team may not need oversight over)
• Requiring a large development team to do ongoing maintenance and compliance
• This method can get very expensive, as ongoing maintenance and several contracts aren’t very cost-effective

While composable commerce makes it possible to tailor-make each component of your store, for most ecommerce brands, it can make more sense to look to an alternative instead.

Especially when it comes to your frontend technologies.

How is composable architecture different from MACH architecture?

Composable commerce is a generic term for how brands choose their ecommerce headless tech stack.

MACH is a set of principles guiding how brands should build their ecommerce headless tech stack.

But, in most ways, MACH and composable are two words for the same thing. They both describe assembling best-of-breed modern technologies into a singular enterprise tech stack.

They differ in that MACH is a prescriptive way of thinking about the architecture, requiring it to be Microservices-based, API-first, Cloud-native, and Headless—an unshifting acronym.

Composable architecture just needs modularity, standing more in defiance of monolithic architecture than anything else.

According to Gartner, a distinct difference between the two is that composable uses packaged business capabilities instead of microservices (which we’ll get into next).

What are packaged business capabilities (PBCs) vs microservices?

While the more technical among us might see PBCs and microservices as obviously different things, those outside DevOps are seeing double.

And, where most of us are concerned, the distinction between the two doesn’t really matter.

Microservices architecture refers to all the independent services that make up a complete technology stack (i.e., your ecommerce store) that talk over APIs.

PBCs bundle microservices together to serve particular business functions (or capabilities).

So, your checkout may contain multiple microservices, which would be bundled into a single PBC. The idea is to reduce technical complexity and create a clearer headless architecture.

OK, enough with the technical jargon. Let’s compare a composable approach to a frontend-as-a-solution approach.

Composable commerce vs an all-in-one frontend platform

Instead of assembling a custom frontend piece by piece from scratch for your headless commerce solution, your brand can opt for a unified frontend platform—a frontend-as-a-service (FEaaS) solution.

So, you still get all the best components without the complexity of choosing and managing them yourself.

Think of it this way:

Composable commerce is like choosing every single piece you want for your ideal custom Lego set, all from your imagination.

A packaged frontend solution is like choosing a complete Lego set with the standard (and best) pieces you need to build something incredible.

With a packaged frontend solution, your brand enjoys all the benefits of composable commerce, like:

• Keeping your existing backend totally intact (your payments, checkout, and inventory management from Shopify, Shopify Plus, or BigCommerce can all stay the same)
• Gaining creative flexibility on the presentation layer of your store without code, reliance on developers, or tradeoffs to site performance
• Unparalleled page-to-page load times that lead to more conversions

The difference is that with a packaged all-in-one frontend platform (like Shogun Frontend), you can focus on the revenue-driving actions of your business, like the customer-facing experience and content of your website.

This, instead of piecing together custom software from scratch (which really isn’t the focus of your DTC business).

Plus, with an all-in-one frontend platform like Shogun Frontend, your team gets other benefits like more control with less code and a native CMS purpose-built for ecommerce managers.

#cta-mini-fe#Curious to see how a packaged frontend solution works?Learn more‍

So how do you know if a packaged frontend solution will have everything you need? Let’s look at what’s included in the Lego set.

Shogun Frontend: The anatomy of our headless architecture

When you custom code a frontend from scratch, it’s made of the following parts:

• A custom-coded storefront layer
• Your server-side rendering (SSR) framework
• The content delivery network (CDN)
• Your content management system (CMS)
• Middleware connecting everything together
• Third-party integrations you code

When you go the packaged, frontend-as-a-service route, all these modular components get bundled and taken care of for you.

For example, Shogun Frontend is already built with the best-in-breed technology.

Here’s what comprises our platform and why we’re confident these are the very best components for the frontend of your headless ecommerce site.

React-based presentation layer

This is where the rubber hits the road—well, where the customer meets your brand.

We use React.js to build our custom-coded storefronts because we think it’s the best JavaScript framework for providing incredibly fast user experiences.

We’re confident React.js is a framework that will continue to pave the way for exceptional ecommerce, which is why we’ve chosen it to power our software for customers.

And we’re excited to see our friends at Shopify agree: During Shopify Unite 2021, Shopify announced that they were using React.js to build their Hydrogen framework for developers.

For most brands, this React frontend is built as a progressive web app (PWA), giving sites app-like behavior on any device.

That includes sub-second page loads, offline functionality, push notification capabilities, SEO-friendliness, and more.

Server-side rendering (SSR)

For server-side rendering, we use Next.js.

Next.js makes React-based web application functionalities, like server-side rendering and generating static websites, possible.

We chose Next.js to power Shogun Frontend because:

• It’s the most popular React framework with the largest ecosystem
• It’s battle-tested against bugs
• The majority of our engineers are familiar with it
• It offers many features while remaining flexible
• It produces extremely fast storefronts

Content delivery network (CDN)

A big part of creating exceptional ecommerce experiences is ensuring all your customers—no matter where they’re located or what device they’re using—get the same quality experience.

And a reliable content delivery network (CDN) makes this possible.

For this, Shogun Frontend uses Fastly, a secure, edge cloud platform that helps you reach more users without lag or server disruption.

It’s used far and wide by leading ecommerce providers (looking at you, Shopify).

Content management system (CMS)

We know ecommerce, so when building Shogun Frontend, we knew a robust CMS would be a high priority for our merchants.

After all, your CMS is the lifeblood of your store—it’s how you create content, manage site updates, launch new products, and so much more.

So we decided to create our own.

Our CMS is purpose-built for ecommerce managers and teams, allowing you to simplify things like automating aspects of your collections, publishing site-wide updates, and managing your content without tedious one-to-one tasks.

Combined with our powerful Experience Manager, our native CMS is helping Shogun Frontend customers regain control of their ecommerce sites without needing to code.

#cta-visual-fe#<cta-title>Get a lightening fast CMS<cta-title>Create custom experiences without site bloat on Shogun Frontend.Learn more

Middleware

Middleware is the software that sits between your site’s front and backend, bridging the gap between applications.

This middleware makes headless commerce possible. Some refer to it as the “glue.”

We wrote our own middleware, so Shogun Frontend integrates seamlessly with ecommerce platforms like Shopify, BigCommerce, and more.

Best-in-class integrations

Choosing a frontend platform doesn’t mean giving up picking the technology powering your store.

With an all-in-one provider like Shogun Frontend, composability is still possible with our growing ecosystem of powerful integrations.

For example, if you use Klaviyo for email marketing or Recharge to manage your subscriptions or recurring payments, these can be connected to your Shogun Frontend store.

See the complete list of best-in-class integrations.

The bottom line: You can focus your energy on scaling your brand

A bundled frontend solution simplifies your build process while also enabling you a degree of composability as you do discovery on your build and grow your brand.

As an ecomm pro, you need to be agile.

You want to focus your efforts on revenue-driving activities and the invisible parts of your business that make you successful.

Worrying over whether or not you have the best-in-breed technology powering your store should not be on your to-do list.

Or, in our opinion, something you need to assemble yourself.

With a frontend-as-a-service solution that contains all the best-in-breed parts, you can focus on growing your brand confidently, knowing you are running on the top-tier software that will scale with you, and you’ll have far fewer complex decisions to make.

You’ll get the flexibility you want with headless without the massive upfront investment or risk.

Examples of brands going headless with Shogun Frontend

So, even though some businesses will still benefit from composable commerce, what kind of ecommerce stores might be right for a unified headless frontend platform?

One thing is sure: Headless isn’t just for big-name brands anymore. Packaging it up like this has made it increasingly accessible.

Nomad

Take luxury lifestyle goods brand, Nomad, for example.

Their team wanted to create ecommerce experiences with rich features like real-time personalization, background videos, and their Product Finder catalog search.

They wanted to go headless to scale even faster as their ecommerce business grew.

Nomad’s headless ecommerce site built with Shogun Frontend is packed with small details that enhance the customer experience.

Nomad was a great fit for a unified frontend platform because their main focus is bringing their creative ideas to life fast while maintaining incredible site performance.

They want a site that looks and feels like their brand, but they didn’t necessarily see the frontend software as something they need to build from scratch.

#cta-mini-fe#Want to learn more about how Nomad went headless with Shogun Frontend?See the case study

The Feed

Another example of a brand that’s fit for a bundled frontend platform is the nutrition marketplace, The Feed.

The Feed wanted to build a headless site that’s not only fast but flexible for developing new store interactions when inspiration strikes.

The Feed’s website is sleek, easy to navigate, and super fast.

The Feed’s CTO, Ben Kennedy, said it best:

“Despite the cautionary tales you hear about headless, my experience has been: It’s even easier and faster for us to develop new features now. No more themekit and Liquid code. It’s all React components, lazy-loaded, and fast.”

TULA

Wanting to create a richer frontend experience for their customers, beauty brand TULA pursued a PWA-powered headless frontend solution.

Their Head of Technology & Digital Product, Ilan Levine, had overseen a headless build at another company and wanted to avoid the complexities of a composable build.

Shogun Frontend allowed them to avoid putting together a frontend from scratch so they could focus on creating the best customer experience possible.

Their PWA delivered speed improvements and resulting conversion increases that they were hoping to achieve. Their page load times increased by 35%, deeply impacting their mobile conversion rates.

“Speed is incredibly important and is one of the biggest reasons we have gone headless. By building our own frontend, we can really optimize speed and the shopping experience.”

– Savannah Sachs, CEO of TULA

#cta-paragraph-fe#Learn more about how going headless helped TULA design better shopping experiences.

Stikwood

This home decor brand had big dreams for how their shoppers would interact with their store, like including augmented reality tools that helped users digitally transform their own space.

Through online experiences that educate and inspire their shoppers, they hoped to save them a trip to any physical store.

Stikwood launched their Shogun Frontend storefront with a small and nimble team in July 2021. It has since enabled them to quickly make changes without developer help and launch new products.

They can add rich merchandising features to their store without ever worrying about the speed tradeoffs they’d worried about with a traditional ecommerce store.

“The ability to design our own page sections, have them look how we want, and turn the site into a place for customers to learn was a huge reason why we invested in headless.”

– Steve Worth, Director of Marketing at Stikwood

#cta-paragraph-fe#See how Stikwood leveled up their visual merchandising game with their Shogun Frontend store.

Is an all-on-one frontend solution a fit for your brand?

Your brand might be a good fit for a packaged frontend solution if:

• Your store is scaling fast, you want the benefits of headless, and you want to enable your ecommerce team
• You want to incorporate more personalization into your customer experience
• You want to experiment with UX and design while maintaining unparalleled site speed and performance
• You have the ecommerce team that can support a headless build (note: this doesn’t mean you need a specific number of people, more so baseline familiarity with react.js and ecommerce technology)

All ecommerce teams have unique goals, but if you identify with any of the above statements, a provider like Shogun Frontend is worth looking into.

Composable commerce FAQs

Is composable commerce the same as headless commerce?

Composable commerce is an evolution of headless commerce.

Where headless created the idea of a separated front and backend, composable added the concept of modular technologies to it.

Headless commerce is the umbrella for many ways of breaking away from monolithic ecommerce platforms.

What is composable architecture?

The architecture of a composable commerce build is all the connections that allow the individual pieces to work together and form a complete ecommerce storefront.

The parts that make this possible are the application programming interfaces (APIs) which ferry essential data between different services in the tech stack.

This allows each technology to work independently while getting the right data at the right time for a great user experience.

What are composable technologies?

Composable commerce is an assemblage of technologies that take care of all the functionalities needed to run a store.

Some crucial technologies that make headless frontends work are server-side rendering (SSR), content delivery networks (CDNs), content management systems (CMSs), middleware, the presentation layer (commonly a PWA), site search, etc.

For the backend, things like payment processing, checkout, product information management (PIM), and order management systems (OMS) make everything work.

Compose an exceptional ecommerce experience with Shogun Frontend

Ecommerce brands experiencing rapid growth must find digital commerce technologies that scale with them instead of hampering their ability to grow.

By assembling a stack of the best-in-breed ecommerce technologies, your store can flex and grow with your brand over time.

A composable commerce solution can undoubtedly help you achieve greater creative and UX freedom on your store while maintaining exceptional site performance.

But, you’ll face the realities of managing several disconnected platforms simultaneously.

While the composable approach suits some stores, there’s another way to achieve headless commerce without complexity, massive investment in custom software, or juggling multiple vendors and contracts.

A bundled solution comprised of the best frontend technologies makes things extraordinarily simple for you and your team.

Get all the benefits of composable commerce without the headaches.

#cta-visual-fe#<cta-title>The pre-composed approach to headless commerce<cta-title>Shogun Frontend includes all the best frontend tech to attach your existing backend to.Learn more