Composable Commerce with Shopify: What It Is, How It Works, and When to Use It
Composable commerce is a modular approach to building ecommerce platforms where each business capability, such as checkout, product catalog, search, pricing, or order management, is an independent component connected to the others via APIs. Businesses assemble these components, called Packaged Business Capabilities (PBCs), into a custom commerce stack tailored to their specific requirements, rather than relying on a single all-in-one platform.
The term was coined by Gartner, who predicted that composable architecture would become the dominant enterprise software approach as organizations required greater agility in the face of rapidly changing market conditions.
On Shopify, composable commerce is available in two distinct forms: Commerce Components by Shopify, an enterprise-grade offering for brands with $100M+ GMV, and Shopify Plus with Hydrogen, the practical composable path for mid-market manufacturers, distributors, and wholesalers who need flexibility without the complexity overhead of a full composable build.
Traditional commerce platforms were monolithic: one system containing the storefront, checkout, product catalog, pricing engine, order management, and content management, all tightly woven together. Vendors like Oracle, IBM, and SAP built their suites on this model. The advantage was simplicity at setup. The cost was inflexibility at scale.
When a business needed to change its checkout experience, update its pricing logic, or swap in a new search engine, it had to work within the constraints of the entire monolith. Upgrades took months. Customizations broke on the next platform update.
Headless commerce emerged as the first response: decouple the frontend (what customers see) from the backend (commerce logic). The storefront could now be built in any framework and deployed anywhere, while the backend continued to handle commerce operations. Shopify Plus has been a leading headless backend since the launch of its Storefront API.
Composable commerce is the next evolution. Instead of just decoupling the frontend, composable architecture decouples every capability. Checkout is an independent service. Search is an independent service. The pricing engine is an independent service. Each can be built by a specialist vendor, selected on merit, and replaced without touching the rest of the stack. This is the architecture that powers the world's most complex retail organizations.
A Packaged Business Capability (PBC) is a software component that represents a complete, self-contained business function. Examples include:
Each PBC exposes APIs so it can communicate with adjacent components. In a composable stack, you select the best-in-class vendor for each PBC, connect them via a common API layer, and the result is a platform tailored entirely to your business requirements.
The key distinction from microservices: PBCs are not tiny individual programs. A PBC like "checkout" may itself be composed of multiple microservices internally, but it presents as a single, businesslogic-complete unit to the rest of the stack.
Composable commerce is typically built on MACH architecture, a technical framework established by the MACH Alliance:
M - Microservices: Individual business functions are developed and deployed independently, so a change to the checkout service does not require redeploying the search service.
A - API-first: Every capability exposes its functionality through a well-documented API, enabling any component to communicate with any other regardless of vendor or technology stack.
C - Cloud-native SaaS: Components are hosted in the cloud and delivered as managed services, with the vendor responsible for uptime, security patching, and infrastructure scaling.
H - Headless: The frontend presentation layer is decoupled from all backend services, giving developers full creative and technical freedom over the buyer experience.
Shopify's full platform was designed with API-first principles from the beginning. Every Shopify capability, including the checkout, the product catalog, customer data, B2B company accounts, and pricing, is accessible via documented REST and GraphQL APIs. This makes Shopify a natural MACH-compatible commerce backend, whether you are running a Liquid-based Shopify Plus storefront, a Hydrogen-based headless frontend, or consuming Shopify APIs as components within a larger composable stack.
For brands operating at enterprise scale (the $100M+ GMV threshold), Shopify offers Commerce Components by Shopify: a portfolio of more than 30 individual commerce capabilities that can be selected, combined, and integrated with any existing technology infrastructure.
Commerce Components does not require a Shopify storefront. Brands like Mattel, Staples, and Steve Madden use Commerce Components to power specific capabilities within their existing custom technology stacks, accessing Shopify's commerce infrastructure as a set of modular services.
Storefront components: Custom storefronts built with any framework, hosted anywhere. Includes Shopify's Headless APIs, Storefront SDK, Hydrogen (React-based headless framework), Oxygen (Shopify's edge hosting for Hydrogen), low-code storefront options, and AI-powered search with custom data models.
Cart and checkout components: Shopify's checkout platform as a standalone component, including Shopify Payments, checkout extensibility (customized fields, upsells, validation logic), built-in fraud detection, tax engine, and multi-currency support. Shopify's checkout converts at an average 15% higher rate than custom-built alternatives, making this one of the most valuable individual components in the catalog.
Core commerce components: Product catalog management, B2B sales (company accounts, catalogs, net terms, volume pricing), cross-border selling with Shopify Markets, discounts engine, subscription management, and customer data management.
Data and compliance components: ShopifyQL analytics and reporting, marketing attribution insights, card data vaulting for secure stored payment methods, and security and compliance infrastructure including PCI DSS Level 1 certification.
Shipping and logistics components: Fulfillment orchestration, order management with multi-location inventory routing, returns management, and Shopify Shipping carrier integrations.
Omnichannel components: Point of sale (POS) for physical retail, social commerce integrations (Shop Pay on Instagram, TikTok Shop), and live chat and support integrations.
Commerce Components is the right solution for an organization that:
For manufacturers, distributors, or wholesalers operating below the $100M GMV threshold, or without a dedicated engineering team, Shopify Plus with Hydrogen is the practical composable path that delivers most of the same flexibility at a fraction of the complexity and cost.
Shopify's Hydrogen is a React-based framework purpose-built for creating custom headless storefronts powered by Shopify's backend. Paired with Oxygen, Shopify's global edge hosting network, Hydrogen enables mid-market manufacturers, distributors, and wholesalers to build fully custom buyer portals and B2B storefronts without leaving the Shopify ecosystem.
Custom frontend architecture: Your B2B buyer portal can be built in React with full design freedom, rendering logic, and component structure completely under your control. There is no dependency on Shopify's Liquid templating language or Dawn theme.
Access to all Shopify B2B APIs: Hydrogen storefronts can access all of Shopify Plus's native B2B capabilities via the Storefront API and Customer Account API: company accounts, customer-specific catalogs, net payment terms, volume pricing, draft orders, and vaulted payment methods.
Edge-rendered performance: Oxygen deploys Hydrogen storefronts to Shopify's edge network, which has proven to sustain 312 million requests per minute during peak commerce events like Black Friday/Cyber Monday 2025, with 99.9% platform uptime. Shopify stores render 1.8x faster on average than stores on other platforms.
Composable third-party integrations: A Hydrogen frontend can consume APIs from any third-party service: a headless CMS like Contentful or Sanity for content management, Algolia or Shopify Search for product discovery, Klaviyo for personalized marketing, and your ERP for real-time pricing and inventory.
In a 2024 survey of more than 1,000 enterprise organizations conducted in partnership with IDC, Shopify found that 45% had adopted a hybrid composable architecture: a composable front end paired with a full-stack backend like Shopify Plus. This approach consistently outperformed both pure monolithic and pure composable architectures on time-to-market, cost-effectiveness, and customer experience quality.
For most B2B manufacturers, distributors, and wholesalers, this hybrid model represents the optimal balance: the buyer experience flexibility of a composable frontend, the operational reliability and native B2B feature set of Shopify Plus, and the clean ERP integration that connects the two.
The composable architecture principles that matter most differ between B2C and B2B commerce. In B2C, the primary driver is frontend experience differentiation: personalization, content, visual design. In B2B, the primary drivers are process integration, pricing accuracy, and buyer self-service.
For a manufacturer or distributor building a composable B2B commerce stack, the critical components to get right are:
Pricing engine accuracy: B2B pricing is complex. Contract prices, volume breaks, customer-segment discounts, and ERP-driven price lists must all be served accurately, in real time, to the correct buyer account. In a Shopify Plus architecture, this is handled via the native catalog and price list system plus a purpose-built ERP integration. In a full composable stack, you may need a dedicated pricing microservice (e.g., commercetools' pricing service) with a bidirectional ERP sync.
Company account and permission model: Enterprise buyers operate within approval hierarchies. A purchasing manager may need to approve any order over $10,000. A sales rep may need to create orders on behalf of accounts. These permissions must propagate correctly through every component in the stack.
ERP integration as the source of truth: In B2B commerce, the ERP is not a secondary system. It is the source of truth for customer credit limits, contract pricing, inventory positions, and order status. Any composable stack for B2B must establish a reliable, bidirectional ERP integration before the commerce architecture can function correctly.
Uncap Connect handles this integration layer for Shopify Plus B2B stores, syncing customer price lists, inventory, order exports, and net terms between Shopify Plus and ERPs including NetSuite, SAP S/4HANA, Microsoft Dynamics 365, and Epicor in near real-time.
Buyer portal UX: B2B buyers reorder. They check order history. They manage multiple ship-to locations. They need PO number entry and net terms visibility. A composable Hydrogen frontend allows you to build a buyer portal that mirrors the sophistication of your B2B sales process, rather than adapting your process to the constraints of a standard Shopify theme.
This is the most common source of confusion in the composable commerce conversation.
Headless commerce separates the frontend presentation layer from the backend commerce engine. The backend remains a single platform (such as Shopify Plus), but it is accessed via APIs rather than through a native storefront. All business logic (pricing, checkout, order management, B2B features) still lives in the backend platform.
Composable commerce goes further: every business capability, including the backend, is an independent, swappable component. You are not just choosing your frontend independently; you are choosing your checkout independently, your search independently, your pricing engine independently, your OMS independently.
The practical implication: headless is a frontend architecture decision. Composable is a full-stack architecture philosophy.
For B2B manufacturers and distributors, headless with Shopify Plus (Hydrogen + Shopify backend) delivers 80% of the composable benefit at 20% of the composable complexity. The Shopify Plus backend handles all B2B logic natively, and the Hydrogen frontend delivers the custom buyer experience. You only need to replace individual backend components (e.g., add Algolia search or Contentful CMS) where Shopify's native capabilities do not meet your specific requirements.
The composable architecture approach is the right choice when:
Composable architecture will likely create more problems than it solves when:
The IDC survey finding is instructive: the hybrid approach (composable frontend, full-stack backend) outperforms both extremes for most enterprise organizations. For B2B manufacturers and distributors, that hybrid looks like Shopify Plus + Hydrogen + Uncap Connect ERP integration.
Layer 1: Commerce backend (Shopify Plus)This is your source of truth for products, customers (company accounts), orders, pricing (catalogs and price lists), inventory, and B2B-specific logic. All accessed via Shopify's Admin API and Storefront API.
Layer 2: ERP integrationBidirectional sync between Shopify Plus and your ERP for customer pricing, inventory positions, order export, and payment terms. Built on Shopify's webhook and API infrastructure.
Layer 3: Headless frontend (Shopify Hydrogen)React-based buyer portal consuming Shopify's Customer Account API and B2B Storefront API. Deployed to Oxygen for global edge performance.
Layer 4: Best-of-breed services (as needed)Swap in specialist services where Shopify's native capabilities do not cover your requirement: Algolia or Searchanise for advanced B2B product search, Contentful or Sanity for complex content management, Klaviyo for account-based email automation, or a custom CPQ (configure-price-quote) layer for complex quote workflows.
Layer 5: Data and analyticsShopifyQL for commerce analytics, connected to your BI stack (Snowflake, BigQuery, or Looker) via Shopify's data export APIs.
This stack delivers the composable flexibility a complex B2B operation needs without the overhead of a full MACH rebuild. It is the architecture Uncap has deployed for manufacturers and distributors processing anywhere from $10M to $200M+ in annual B2B orders on Shopify Plus.
For context on the full B2B tech stack that supports this architecture, see The Best B2B Ecommerce Tech Stack for Shopify Plus.
Composable commerce is a modular approach to ecommerce architecture where each business capability, such as checkout, catalog, search, pricing, or order management, is built as an independent component (called a Packaged Business Capability, or PBC) and connected to others via APIs. Businesses assemble these components into a custom stack rather than relying on a single all-in-one platform. The term was coined by Gartner.
Headless commerce decouples the frontend presentation layer from the backend commerce engine. Composable commerce goes further: every business capability, including the backend, is an independent, swappable component. Headless is a frontend architecture decision. Composable is a full-stack architecture philosophy. For most B2B brands, headless with Shopify Plus (custom Hydrogen frontend, Shopify Plus backend) delivers most of the benefit of composable without the added complexity.
Commerce Components by Shopify is Shopify's enterprise composable offering: a catalog of 30+ individual commerce capabilities organized into six categories (Storefront, Cart and Checkout, Core Commerce, Data and Compliance, Shipping and Logistics, and Omnichannel). It allows enterprise brands with approximately $100M+ GMV to consume specific Shopify capabilities within their existing custom technology stacks. Reference brands include Mattel, Staples, and Steve Madden.
Shopify Hydrogen is a React-based framework built specifically for creating headless and composable storefronts powered by Shopify's backend. It is paired with Oxygen, Shopify's edge hosting network, which deploys Hydrogen storefronts globally and sustained 312 million requests per minute during BFCM 2025 at 99.9% uptime. Hydrogen gives B2B developers full control over the frontend while retaining all of Shopify Plus's native B2B capabilities via API.
A Packaged Business Capability (PBC) is a software component representing a complete, functionally self-contained business function, such as checkout, search, or pricing. PBCs are the building blocks of a composable commerce stack. Each PBC exposes its functionality via APIs, enabling it to be integrated with other PBCs regardless of vendor or technology. A PBC differs from a microservice in that it is a complete business function (potentially composed of multiple microservices internally) rather than a single tiny program unit.
MACH stands for Microservices, API-first, Cloud-native SaaS, and Headless. It is the technical framework, promoted by the MACH Alliance, that underpins composable commerce. Shopify's platform was built with API-first principles from its inception, making it MACH-compatible as a backend for both headless and fully composable commerce architectures.
Yes, in multiple ways. For enterprise brands ($100M+ GMV), Commerce Components by Shopify provides a full composable component catalog. For mid-market and growing brands, Shopify Plus combined with Hydrogen is a hybrid composable architecture (composable frontend, full-stack backend) that IDC research found outperforms both fully monolithic and fully composable approaches on speed to market, cost, and customer experience. Shopify's API-first design means every capability is accessible as a component.
When your GMV exceeds $100M, you have specific capability requirements no single platform can meet natively, and you have an in-house engineering team of 5+ dedicated to your commerce platform. For most manufacturers, distributors, and wholesalers below this threshold, Shopify Plus with Hydrogen and a purpose-built ERP integration delivers the right balance of flexibility and operational reliability without the complexity cost of a full composable build.
In a composable B2B commerce stack, the ERP remains the source of truth for customer pricing, inventory, credit terms, and order fulfillment. The composable architecture must establish a reliable, bidirectional API integration between the ERP and the relevant commerce PBCs (catalog, pricing, OMS). On Shopify Plus, this is handled via a purpose-built integration layer that syncs customer price lists, inventory, order exports, and net terms between Shopify and ERPs like NetSuite, SAP, Dynamics 365, and Epicor.
A production-ready composable commerce stack for a B2B enterprise typically runs $1M-$3M in year-one costs, including integration development, frontend build, multi-vendor licensing, and ongoing engineering. A Shopify Plus B2B implementation with Hydrogen frontend and ERP integration typically runs $100,000-$300,000. The difference reflects the complexity of maintaining multi-vendor API integrations at scale versus a unified platform with native B2B features and a documented integration architecture.
If you are evaluating a composable or headless architecture for a B2B manufacturing, distribution, or wholesale operation on Shopify Plus, the right architecture depends on your GMV, engineering capacity, and specific capability gaps. We have built composable and hybrid architectures for more than 380 B2B organizations.
