Composable Commerce Explained: Defining Key Terms & Understanding Core Concepts

With a myriad of acronyms and jargon to get your head around, the topic of composable commerce can be difficult to navigate.

For those looking to grasp the basics of composable commerce, or perhaps refresh their memory on key definitions, we’ve compiled a glossary of terms commonly used when talking about this subject.

The terms we’ve included in this list provide a foundation for understanding the core concepts of composable and headless architectures, as well as the technologies and approaches involved in building modern digital commerce solutions on Shopify.

Use this menu to navigate to a particular term, or view the full glossary below.

APIs

Backend

Commerce Components by Shopify

Composable commerce

Frontend

Full-stack framework

Headless architecture

Hydrogen

JAMstack

MACH Alliance

MACH architecture

Microservices

Modularity

Monolithic architecture

Oxygen

Composable commerce definitions

APIs

API stands for Application Programming Interface.

An API is used to allow different systems and services in a digital architecture to interact with one another, regardless of their underlying technology. It outlines the ‘rules’ for communication, setting out standardised methods and data formats that applications can use for requesting and exchanging information.

APIs facilitate increased collaboration, flexibility and innovation. They play a key role in composable and headless commerce.

If you want to learn more about APIs, you can learn how they enable Shopify custom apps from one of our developers.

Back to menu.

Backend

This refers to the server-side part of a software application – the part that powers the frontend interactions. It is responsible for processing business logic, storing data and defining functionality.

In a digital commerce solution, the backend will store things such as customer, order and product information.

Back to menu.

Commerce Components by Shopify

Commerce Components by Shopify (CCS) offers composable modularity of the entire Shopify tech stack. Targeted solely at enterprise brands, it prioritises choice and flexibility by enabling retailers to handpick the Shopify components they want to leverage.

Crucially, CCS should not be confused with the primary headless tech stack for building composable architectures with Shopify at any scale – Hydrogen and Oxygen.

Learn more about CCS and our experts’ analysis of it.

Back to menu.

Composable commerce

Composable commerce is an approach that leverages a modular architecture, whereby separate components/functions/services are assembled and integrated. These individual business functions (like checkout, payments, content, etc.) are provided by independent microservices. They are deployed and maintained separately, and communicate via APIs.

Retailers can essentially pick and choose the software that best meets their business needs, without being ‘locked in’ to a single vendor or constrained to a monolithic platform. This is important for diversifying vendor risk and providing commercial robustness.

Composable commerce is often compared to building with LEGO – choosing any of the smaller components to build a complex overall system.

This approach enables increased versatility, flexibility and resilience for brands. Using a composable architecture means retailers can adapt quickly to market changes, deliver enhanced customer experiences and accelerate innovation.

To learn more about the opportunities and challenges of composable commerce, take a look at our resource The CTO’s Guide to Composable Commerce & Headless Technologies on Shopify.

Back to menu.

Frontend

This is the user-facing part of a software application, sometimes referred to as a ‘presentation layer’.

In the context of commerce solutions, the frontend refers to the part/s that online shoppers see and interact with – like a brand’s website or mobile app.

Back to menu.

Full-stack framework

Full-stack frameworks include all layers of a technology stack – everything needed to build a complete software application. This includes the frontend (or client-side), backend (server-side), database layers and integrations.

Developers have greater control and ownership over a full-stack framework and can perform backend development more efficiently – accelerating progress and reducing costs.

Full-stack frameworks also allow for extensive customisation and composability, enabling brands to build integrated digital commerce solutions that suit their unique business needs.

Examples of full-stack frameworks include Ruby on Rails, Remix, Next.js and Gatsby.

Back to menu.

Headless architecture

Headless architecture describes an approach where the frontend (the user interface) is decoupled, or separated, from the backend (data layer and business logic) in a digital solution.

The frontend and backend speak to each other using APIs.

A headless architecture enables brands to more flexibly build multichannel digital experiences, whilst providing increased design freedom.

Headless is typically considered as one step towards a composable architecture.

Back to menu.

Hydrogen

Hydrogen is Shopify’s full-stack framework for headless commerce, built using Remix, the popular React framework. It accelerates custom headless storefront development on Shopify with ready-to-use storefront components.

Back to menu.

JAMstack

JAMstack is a modern web development architecture, where an application is decoupled into three layers:

1. JavaScript – which handles dynamic functionality and interactivity.

2. APIs – connections to backend services.

3. Markup – referring to static assets that are pre-generated during the build process and deployed to a content delivery network for fast and efficient distribution to end users.

This term is typically used in reference to headless web development.

JAMstack architectures enable increased performance, security and scalability, as well as an enhanced developer experience, compared to traditional architectures.

Back to menu.

MACH Alliance

The MACH Alliance is a non-profit organisation that advocates for the adoption of “future-proof, open and best-of-breed enterprise technology ecosystems” in the context of digital commerce. It aims to educate and empower businesses to embrace modern architectural principles (see ‘MACH architecture’), better enabling them to build more agile, scalable and innovative digital commerce solutions.

Back to menu.

MACH architecture

MACH is an acronym that stands for:

1. Microservices
2. API-first
3. Cloud-native SaaS
4. Headless

It represents a principled approach to composable architectures. This architecture gives retailers the ability to remain agile and innovative, seamlessly experimenting and rapidly reacting to changes in the market.

Back to menu.

Microservices

Microservices are independent functions or features within a larger software application, each with its own specific business purpose, such as product catalogue management or payment processing. These can be deployed, operated and scaled independently of other solutions within the architecture. They communicate with each other through APIs.

Microservices promote flexibility and scalability in digital commerce development. This approach also provides greater resilience, since problems with one microservice are less likely to impact the entire system.

Back to menu.

Modularity

This is the principle of breaking down a system into smaller, independent components. These can be developed and managed separately.

The benefits of a modular architecture include increased flexibility, customisation and scalability.

Back to menu.

Monolithic architecture

A monolithic architecture is a traditional way of structuring digital solutions. Unlike a composable architecture, it incorporates various business functions into one unit maintained by a single platform vendor.

All components are developed and maintained within a single codebase, which means that changes to one part of the architecture may require modifications to other parts. This can limit flexibility and make it difficult to scale or adopt new technologies and/or practices.

Back to menu.

Oxygen

Oxygen is Shopify’s global hosting solution for Hydrogen storefronts. It enables “fast and globally available storefronts that securely integrate with the Shopify ecosystem while eliminating additional costs of setting up third-party hosting tools”. Find out more on the Shopify Engineering Blog.

Back to menu.

Learn more about composable commerce on Shopify

We hope this will be a useful point of reference for those looking to solidify their understanding of composable commerce definitions.

If you’d like to delve deeper into this topic, check out The CTO’s Guide to Composable Commerce & Headless Technologies on Shopify, expertly authored by Swanky’s Head of Technology, Ian Jamieson.

This comprehensive resource is perfect for CTOs, business leaders and other decision makers exploring the idea of a composable architecture. It covers the following topics and more:

• Leveraging composability on Shopify with modern development frameworks and microservice integrations.
• Use cases for going headless.
• Key considerations when exploring a headless architecture.
• Advantages, trade-offs and opportunities of a composable stack.
• How to budget for a composable commerce project.
• Leading your organisation through a composable commerce project.