Headless CMS and Commerce: Unifying Content and Products in Composable Architecture
The separation of content and commerce has been one of the persistent failures of traditional ecommerce platforms. On a typical monolithic platform, such as Adobe Commerce (formerly Magento), product pages are data-driven templates — structured fields for price, description, specifications — while editorial content lives in a separate CMS, often a WordPress blog bolted onto the side. Adobe Commerce exemplifies a traditional ecommerce platform with a monolithic architecture that is easy to use for small businesses, but can become limiting as businesses grow. These traditional ecommerce solutions are known for their simplicity and quick deployment, but they often lack flexibility and are difficult to scale. Additionally, such platforms frequently include drag and drop tools, enabling merchants to quickly set up and customize their online stores without extensive technical skills. However, legacy platforms like these can hinder scalability and adaptability, making it challenging to support modern, AI-driven, and flexible commerce solutions. The commerce vs traditional debate centers on the differences between monolithic, tightly integrated systems and composable commerce architectures that emphasize modularity, flexibility, and scalability.
Composable commerce architecture solves this by treating content and commerce as equal, API-first services that can be combined freely. Modern e commerce platforms built on composable principles offer greater flexibility, scalability, and customization compared to traditional solutions. A product page can include editorial storytelling. A blog article can include shoppable product cards. A landing page can blend promotional content with real-time product data, pricing, and add-to-cart functionality, giving businesses the freedom to innovate and rapidly integrate new technologies.
But achieving this content-commerce convergence requires deliberate integration architecture. This guide covers the technical patterns for integrating headless CMS platforms with composable commerce platforms like Elastic Path, the content modelling decisions involved, and how to avoid the common pitfalls.
Introduction to Composable Commerce
Composable commerce is transforming the landscape of digital commerce by empowering businesses to assemble their ideal commerce solutions from modular, best-of-breed components. Unlike traditional monolithic platforms, which often lock companies into rigid, one-size-fits-all systems, composable commerce solutions offer the freedom to select and integrate only the software components that align with specific business needs. This modular approach enables digital commerce platforms to deliver highly differentiated and personalized experiences, adapting quickly to new market demands and customer expectations.
By leveraging composable commerce, organizations can build a flexible software ecosystem that supports rapid innovation and seamless integration with emerging technologies. Whether launching new digital channels, experimenting with unique business models, or scaling to meet increased demand, composable commerce platforms provide the agility and customization required to stay ahead in today’s competitive e-commerce environment. Ultimately, composable commerce allows businesses to break free from the constraints of traditional monolithic platforms and create tailored solutions that drive growth and customer satisfaction.
Benefits of Composable Commerce
The benefits of composable commerce are both immediate and far-reaching for modern businesses. Composable commerce platforms offer unparalleled flexibility, allowing organizations to adapt their e-commerce operations as customer expectations and market conditions evolve. With seamless integration capabilities, businesses can connect their commerce platforms with a wide range of technologies, from advanced inventory management systems to personalized marketing tools, ensuring a unified and efficient workflow.
One of the key advantages is the ability to deliver consistent and engaging customer experiences across all touchpoints—websites, mobile apps, and even in-store kiosks. Composable commerce enables businesses to improve customer engagement by tailoring content, promotions, and commerce functionality to individual preferences and behaviors. Enhanced business logic and real-time data synchronization ensure that inventory, pricing, and product information are always accurate and up-to-date.
Moreover, composable commerce offers complete ownership of e-commerce operations, empowering businesses to make changes and updates without being dependent on third-party vendors or legacy systems. This autonomy accelerates innovation and reduces time-to-market for new features and experiences. By adopting composable commerce, companies can not only meet but exceed changing customer expectations, positioning themselves as leaders in the digital commerce space.
The Content-Commerce Convergence
Modern B2B and B2C commerce experiences demand content at every stage of the buyer journey, and meeting evolving customer demands for personalized, content-rich experiences is crucial for success:
Discovery. Buyers find products through search, social media, and content marketing. Blog articles, guides, and comparison pages drive organic traffic and brand authority. These content pieces need to include relevant product information — pricing, availability, direct purchase links.
Evaluation. Product pages need more than specifications. Buying guides, use case descriptions, video demonstrations, and customer testimonials provide the context buyers need to make decisions. This rich content is editorial in nature and best managed in a CMS.
Purchase. Even at the point of purchase, content matters. Trust signals, warranty information, delivery details, and post-purchase guidance all influence conversion.
Post-purchase. Onboarding guides, setup tutorials, and maintenance schedules extend the content relationship beyond the transaction.
In a composable architecture, the headless CMS manages all of this editorial content, while the commerce platform (Elastic Path) manages products, pricing, inventory, and transactions. The integration layer brings them together.
Headless CMS Options for Headless Commerce
The headless CMS market is mature, with several platforms that integrate well with composable commerce architectures. In a modern ecommerce architecture, headless CMS platforms decouple content management from commerce systems, enabling flexible integration through APIs and supporting multichannel shopping experiences. Here is how the leading options compare for commerce integration:
Contentful
Strengths for commerce: Contentful’s structured content model maps well to commerce content types. Its references feature allows content entries to link to products (via external IDs stored in custom fields). The GraphQL API provides efficient querying for complex content structures.
Integration pattern: Store Elastic Path product IDs as reference fields in Contentful content entries. The frontend fetches content from Contentful and product data from Elastic Path, merging them at render time.
Consideration: Contentful’s pricing scales with the number of content entries and API calls, which can become significant for large catalogues with extensive content.
Strapi
Strengths for commerce: Strapi’s open-source model provides maximum control over the content infrastructure. Custom content types can be designed specifically for commerce use cases. The REST and GraphQL APIs are flexible, and Strapi can be self-hosted for data sovereignty requirements.
Integration pattern: Define custom content types in Strapi that mirror your commerce content needs (product stories, buying guides, category descriptions). Use relation fields to store Elastic Path product or category identifiers.
Consideration: Self-hosted Strapi requires infrastructure management. Strapi Cloud is available for managed hosting but has less mature enterprise features than Contentful.
Sanity
Strengths for commerce: Sanity’s real-time collaboration and customisable editing studio make it strong for teams that need to iterate quickly on content. The GROQ query language is powerful for complex content retrieval.
Integration pattern: Sanity’s schema system allows rich custom objects that can embed commerce data (product references, pricing snapshots, promotional rules). The real-time API enables preview workflows where editors see content changes reflected immediately alongside live product data.
Consideration: Sanity’s query language (GROQ) is proprietary, which creates a learning curve and potential lock-in concern.
Choosing the Right CMS
The decision depends on your specific requirements:
| Requirement | Recommended CMS |
|---|---|
| Enterprise scale with managed hosting | Contentful |
| Self-hosted with maximum control | Strapi |
| Real-time collaboration and customisation | Sanity |
| GraphQL-first API strategy | Contentful or Strapi |
| Budget-conscious with developer resources | Strapi (open source) |
Content Modelling for Commerce
The content model — how content types, fields, and relationships are structured in the CMS — is the foundation of a successful content-commerce integration. Poor content modelling creates rigid, hard-to-maintain integrations. Good content modelling creates flexible, composable content that adapts to changing business needs by decoupling the presentation layer from the backend. This separation allows for greater flexibility and enables independent updates to the frontend without impacting backend operations.
Principles
1. Separate content from presentation. Content entries should describe what the content is, not how it should be displayed. A “Product Story” content type should contain the narrative, images, and product references — but not CSS classes, layout positions, or viewport-specific formatting.
2. Use references, not duplicated data. Do not copy product data (prices, descriptions, images) into the CMS. Store a reference (product ID or SKU) and let the frontend resolve the current product data from Elastic Path at render time. This ensures content always reflects current pricing and availability.
3. Design for reuse. A single content entry should be usable in multiple contexts — on a product page, in a category landing page, in an email campaign. This requires content types that are granular enough to be composed, not monolithic page-level entries.
4. Plan for localisation. If you operate in multiple markets, your content model must support locale-specific versions of content from the start. Retrofitting localisation into an established content model is significantly more difficult.
Example Content Types
Here is a practical content model for a composable commerce implementation:
Product Story
-
Title (text)
-
Summary (rich text)
-
Body content (rich text with embedded media)
-
Product references (array of Elastic Path product IDs)
-
Category (reference to a category content type)
-
Author (reference to an author content type)
-
Locale (localisation field)
Buying Guide
-
Title (text)
-
Introduction (rich text)
-
Sections (array of section components, each with heading, body, and optional product references)
-
Target audience (enumeration: technical, business, both)
-
Related guides (references to other buying guides)
Category Landing Content
-
Category identifier (maps to Elastic Path category)
-
Hero content (rich text with image)
-
Featured products (array of product IDs for manual merchandising)
-
Promotional banner (reference to a promotional content type)
-
SEO metadata (title, description, canonical URL)
Promotional Content
-
Campaign name (text)
-
Start date / end date (date range)
-
Content variants (array of locale-specific content blocks)
-
Display rules (JSON field for targeting rules)
API Orchestration Patterns for Seamless Integration
With content in the CMS and products in Elastic Path, the integration challenge is orchestrating API calls efficiently. There are several patterns:
Packaged business capabilities (PBCs) can be integrated as modular, prebuilt functionalities—such as search or payments—within these orchestration patterns, enabling greater flexibility and scalability when building headless ecommerce solutions.
Backend-for-Frontend (BFF)
A BFF layer sits between the frontend and the backend services, orchestrating requests and assembling responses:
-
The frontend requests a page (e.g., a product detail page).
-
The BFF fetches product data from Elastic Path.
-
The BFF fetches associated content from the CMS (product stories, buying guides, promotional banners) using the product ID as a key.
-
The BFF merges the data into a single response and returns it to the frontend.
Advantages: The frontend makes a single request per page. Complex orchestration logic is centralised. Caching can be applied at the BFF layer.
Disadvantages: The BFF is an additional service to build and maintain. It can become a bottleneck if not designed for scale.
Frontend Orchestration
The frontend makes parallel API calls directly to each service:
-
On page load, the frontend simultaneously requests product data from Elastic Path and content data from the CMS.
-
The frontend merges the responses client-side and renders the page.
Advantages: No additional backend service. Each API call is independent and cacheable.
Disadvantages: Multiple API calls per page increase latency (mitigated by parallel execution). The frontend contains orchestration logic, which can become complex.
Static Site Generation with Incremental Rebuilds
For content that does not change frequently, static site generation (SSG) is highly effective:
-
At build time, the SSG framework fetches all content from the CMS and product data from Elastic Path.
-
Pages are pre-rendered as static HTML.
-
When content changes, a webhook triggers an incremental rebuild of affected pages.
-
Dynamic data (pricing, inventory) is loaded client-side or via edge functions.
Advantages: Maximum performance (static HTML served from CDN). Reduced API load on CMS and commerce platforms.
Disadvantages: Dynamic data requires client-side hydration. Build times can be long for large catalogues.
Preview Workflows
Content editors need to see how their content will appear alongside live product data before publishing. In a composable architecture, this requires a preview workflow that spans both the CMS and the commerce platform:
-
The CMS provides a draft/preview mode that serves unpublished content via a separate API endpoint.
-
The frontend (or a dedicated preview environment) is configured to use the CMS preview endpoint instead of the published endpoint.
-
Product data is fetched from Elastic Path as normal (or from a staging catalogue if product data changes are also being previewed).
-
The editor sees a complete page rendering with their draft content alongside current product data.
Most headless CMS platforms (Contentful, Strapi, Sanity) support preview modes. The key is ensuring that the preview environment accurately represents the production experience.
Avoiding the Content Silo Problem
The most common failure mode in content-commerce integration is the content silo: the CMS and commerce platform operate independently, producing a disjointed experience. Unified commerce addresses this by connecting content management, order processing, inventory, and customer engagement within a single, scalable platform, enabling a seamless and flexible customer journey.
Symptoms of the content silo problem:
-
Product pages have no editorial content — just structured data fields.
-
Blog articles mention products but do not include current pricing, availability, or purchase links.
-
Promotional campaigns are managed separately in the CMS and the commerce platform, with manual coordination.
-
Content editors and merchandisers use separate tools with no shared workflow, and account management features are often isolated, making it harder to streamline B2B operations and enhance the customer experience.
Avoiding Silos
-
Shared taxonomy: Use the same category structure in both the CMS and the commerce platform. This enables automatic content-product association.
-
Bidirectional references: Product entries in the commerce platform reference CMS content, and CMS content entries reference commerce products.
-
Unified search: Implement a search layer that indexes both content and products, so customers find relevant results regardless of the source.
-
Cross-functional workflows: Involve both content editors and merchandisers in content planning and review processes.
Challenges of Composable Commerce
While composable commerce offers significant advantages, it also introduces a set of challenges that businesses must be prepared to address. Implementing and maintaining a composable commerce platform requires substantial technical resources and expertise, particularly in areas such as API integration, business logic development, and customer engagement strategies. The modular nature of composable commerce platforms means that IT teams must be adept at orchestrating multiple software components and ensuring seamless interoperability.
Another consideration is cost. For some organizations, especially small and medium-sized businesses, the initial investment in composable commerce platforms and the technical talent required can be higher than with traditional platforms. Additionally, developing and maintaining a robust, scalable architecture demands ongoing attention and resources.
Despite these challenges, the long-term benefits of composable commerce—such as increased agility, scalability, and the ability to deliver tailored customer experiences—often outweigh the upfront complexities. To navigate these hurdles, many businesses choose to partner with experienced vendors and consultants who can provide the technical guidance and support needed to maximize the benefits of composable commerce solutions.
Best Practices for Composable Commerce
To fully realize the potential of composable commerce, businesses should adhere to several best practices. Start by clearly defining your business goals and understanding your customers’ expectations—this ensures that every component of your e-commerce solution is aligned with your strategic objectives. Selecting a composable commerce platform that is both scalable and adaptable is crucial, as it allows your business to grow and evolve without being constrained by technology.
A robust technical strategy is essential. Embrace a decoupled architecture, leveraging application programming interfaces (APIs) to enable seamless integration between your commerce platform, content management systems, and other business-critical tools. This approach not only streamlines operations but also provides the flexibility to incorporate new technologies as they emerge.
Prioritizing customer experience is key. Ensure that your composable commerce solution delivers consistent, personalized interactions across all digital and physical touchpoints. By focusing on seamless integration and adaptability, businesses can respond quickly to changing customer expectations and market trends, unlocking the full value of composable commerce in their e-commerce operations.
Future of Composable Commerce
The future of composable commerce is poised for rapid innovation and expansion. As digital commerce platforms continue to evolve, composable commerce platforms will become even more powerful, enabling businesses to deliver highly personalized and immersive customer experiences. The emergence of new digital touchpoints—such as augmented reality, voice commerce, and native mobile apps—will further drive the adoption of composable commerce, as companies seek to create unified, omnichannel experiences that meet customers wherever they are.
Custom development will play an increasingly important role, allowing businesses to differentiate themselves with unique features and tailored workflows that traditional commerce platforms simply can’t match. As customer engagement becomes more sophisticated, composable commerce will empower organizations to innovate faster, adapt to shifting market dynamics, and maintain a competitive edge.
Ultimately, composable commerce will become the standard for e-commerce, enabling businesses to improve customer engagement, increase revenue, and thrive in a digital-first world. By embracing composable commerce solutions today, companies can position themselves for long-term success in an ever-changing digital landscape.
Getting Started
For enterprises building or evolving a composable commerce architecture, it is essential to first evaluate whether headless commerce aligns with your business model—considering operational complexity, customization needs, and growth plans. Adopting headless and composable commerce is a key part of digital transformation, enabling organizations to modernize their technology stack and move away from legacy architecture for greater agility and scalability. Integrating a headless CMS should be a priority, not an afterthought, as headless commerce decouples the frontend and backend, allowing for more flexible, personalized, and omnichannel experiences. Headless commerce platforms serve as the foundation for modern, API-driven digital commerce solutions, supporting seamless integration with digital experience platforms (DXPs) and content management systems. Composable technology empowers businesses to rapidly adapt and integrate new features or services without overhauling the entire platform, making it easier to experiment with new channels such as mobile apps, online marketplaces, and social media platforms. Online retailers especially benefit from headless and composable commerce by delivering seamless, cross-device experiences that drive engagement and conversions. The content-commerce convergence is a competitive differentiator that improves SEO, conversion rates, and customer engagement.
McKenna Consultants has extensive experience integrating headless CMS platforms with Elastic Path and other composable commerce services. If you are planning a content-commerce integration or evaluating CMS options for your composable architecture, contact us to discuss your requirements.
