Building a composable tech stack for B2C commerce

Table of Contents

Building a composable tech stack for B2C commerce: A comprehensive guide

Manuela Tchoe
Manuela Tchoe
Senior Content Writer, commercetools
Published 28 June 2023
Estimated reading time minutes

Much has been said about composable commerce and best-of-breed solutions, but how can you actually build a modern tech stack? What are the elements of a tech stack in a composable environment? This guide provides the what, why and how to build a modern commerce tech stack for your business. 

Building a composable tech stack for B2C commerce

Why a modern tech stack needs to be composable

For a long time, delivering online shopping experiences was the job of a single vendor providing all things commerce under one roof, from search and personalization to checkout and subscriptions. The problem with this approach is that all of these functions are standardized and cannot be customized easily, so brands end up with identical customer experiences instead of unique, differentiated ones. In addition, handling adaptability is complex with monolithic tech stacks, so brands have a lower capacity to queue changes, updates or upgrades, limiting their ability to innovate, differentiate and grow. 

A modern tech stack for eCommerce turns this model on its head. Now, it’s possible — and ideal — to create a tech stack with best-of-breed solutions that fit a company’s business requirements. In short, delivering modern online shopping is a collective effort of multiple software solutions working in tandem to provide a cohesive customer experience, as well as being adaptable to new requirements, market shifts and customer needs. 

Plus, composable tech stacks tackle adaptability head-on. With a modular and interchangeable approach, this modern infrastructure enables you to select, integrate and manage a collection of tools and features that best work for your business. That means each eCommerce component, such as inventory management, pricing or checkout, can come from different vendors that you pick according to your budget, compatibility, functionality, etc. 

The market analyst Gartner predicts that composability is the future of commerce applications, and by the end of 2024, we should see a new paradigm shift:

  • 70% of large and medium-sized enterprises will have composability as a key criterion for new application planning.  

  • 20% of global 2,000 CEOs will report an increased appetite for risk and improved resilience, both attributed to modular [composable] business redesign. 

  • The mantra for new SaaS will be “composable API-first and API-only,” relegating traditional SaaS vendors as “legacy.”

A deeper definition of composability

There’s more to a composable approach than best-of-breed and modularity. For a system to be considered truly composable, its core traits should include cloud-native SaaS, independent components and a tech-agnostic environment. 

A deeper definition of composability

Cloud-native SaaS

Cloud-native applications are created in the cloud, utilizing the full power of cloud architecture to lower maintenance costs, enhance scalability and improve workflow collaboration. In addition, cloud-native applications are designed to be resilient, self-healing and fault-tolerant. In other words, issues that once resulted in application downtime can now be isolated without taking down the entire application. Plus, updates to the cloud platform can be made without impacting user interactions and the vast amounts of computing resources optimize performance for online applications. 

Note that a cloud-native architecture is not the same as “cloud-hosted,” which are traditional applications that have been migrated to the cloud but aren’t designed to take full advantage of it. For instance, cloud-hosted applications are more risk-prone to downtime, security breaches and performance limitations. 

Independent components 

A composable system combines independent, interchangeable components that can be added, swapped or dropped at any time. These components work well together, as they communicate via an API-first approach, but are essentially independent of each other, so you can easily plug (or unplug) and play functionality according to your business needs. 

Also important to consider is that a composable system enables you to mix best-of-breed components from third-party vendors, such as search and personalization, with homegrown applications. This fully flexible approach allows you to maximize the benefits of a build-and-buy, whereby you can buy commoditized functions (like checkout) and build what’s unique to your business. The result is clear: You can unlock an unparalleled faster time to market and flexibility to adjust to new market conditions.

Tech-agnostic

A truly composable system is not bound to any walled garden or proprietary technology. It offers complete freedom to select, code, integrate, monitor and manage your applications without requiring new languages, specific tech or certifications. In practice, you can use and upskill your existing talent pool to extend your tech stack.

Overall, a composable system provides three main benefits:

  • Infinite scale: Brands are always ready for big moments. They can boost performance without limits, constantly responding to a new influx of traffic and customers without hassle. 

  • Unlimited flexibility and agility: Change a component, not the platform. When something doesn’t work, you can easily replace it or drop it. There’s no vendor lock-in for your team to worry about. 

  • Lower cost: When you invest in financial and technological flexibility, you achieve higher cost efficiency and eliminate technical debt. 

The specifics of a composable commerce tech stack

Now that you know what a composable tech stack is and why it’s vital to future-proof your business, let’s delve deeper into its specifics. First of all, a composable commerce tech stack will have two aspects:

  • The frontend (customer-facing): The frontend stack combines applications and languages used to develop and design your website or online storefront. 

  • The backend (server-facing): The commerce backend stack will be the server, application and database that work behind the scenes to deliver information to the customer.

Composable commerce tech stack overview

The frontend

An eCommerce frontend refers to the visual and interactive components of a digital storefront (website, mobile app and social media) that customers directly interact with, including the copy and visuals, navigation menus, buttons and even pop-ups. All the UI (user interface) and UX (user experience) elements are laid out for the users to engage with. A well-designed and visually appealing frontend can help build brand trust and increase the likelihood of conversion and loyalty.

There are different tools primed to build, manage, optimize and A/B test frontends, so delve deeper into that.

An overview of the frontend commerce tech stack

Building a custom frontend  

Due to the limited flexibility of legacy commerce platforms, many companies choose to build custom frontends with web frameworks, creating unique, differentiated UI/UX for their users. However, a new software category has emerged — Frontend-as-a-Service (FEaaS) — with the mission to cut down the long and complex process of building a frontend solution from scratch, which involves writing and testing code for weeks. With such a service, you can leverage prepackaged software tools that make building unique frontend experiences easier and faster. 

How to choose a frontend solution? First, it must be designed for headless architecture, so your developers can create custom user experiences without disrupting operations on the backend. This improves the flexibility, scalability and speed of your frontend solution. Other criteria are a developer-friendly toolset and a no-code user interface for your non-technical team members. A PWA-powered and cloud-native solution gives you the high performance needed to meet scalability needs. Check all the criteria in detail here

Featured solutions:

Managing your frontend 

There are two main tools to consider to manage your frontend: A content management system (CMS) and/or a digital experience platform (DXP). 

A CMS is a software application or platform designed to simplify the creation, organization and publishing of digital content. It offers a user-friendly interface and a range of tools that empower individuals or teams to manage, author, edit and publish diverse types of content — including text, images, videos and documents — without requiring advanced coding skills. The CMS streamlines the content workflow, to make creating and maintaining a dynamic online presence easier. Headless CMS solutions are emerging as the modern answer to the traditional CMSs that ruled content management in the last decades. 

DXPs offer comprehensive solutions for managing digital assets across various channels, such as websites, mobile apps, customer portals, IoT devices and social media platforms. Leveraging AI, DXPs enable personalized content delivery on web pages, emails and other channels, tailoring experiences for individual users rather than categorizing them into behavioral groups. By utilizing DXPs, businesses can provide highly personalized experiences while maintaining consistent messaging and branding across all channels, resulting in a cohesive and engaging customer journey.

Featured solutions:

  • Check our Integration Marketplace for CMS/DXP solutions, including Contentstack, Bloomreach, Contenful and more.
Optimizing your frontend

With 60% of consumers more likely to purchase when brands offer personalized experiences, it’s crucial you optimize your frontend with personalization and recommendation engines.

The importance of personalized experiences

Personalization engines enable brands to provide individualized experiences where they feel addressed in a one-to-one fashion. Personalization platforms utilize AI to continuously monitor real-time onsite behavior and customer data, enabling tailored experiences for each website visitor. These platforms allow retailers to personalize various aspects, including onsite search, product recommendations, ad retargeting, push notifications and even dynamic pricing when applicable.

Recommendation engines utilize predefined rules to filter and organize the product offerings in your online store. These rules leverage data about your products, such as the number of views, sales and reviews, to present the most popular and relevant items. The presentation of these results can range from the straightforward arrangement of products on category pages to more strategic placements aimed at influencing buyers throughout their entire customer journey. 

Featured solutions:

Testing your frontend 

Experimentation is a central part of any growth story! A/B testing plays a significant role in helping businesses become more disciplined and focused on how they experiment to learn what works and what doesn’t for your business growth. 

Featured solutions:

  • Vamp lets you experiment with functionality through A/B testing/canary releasing, so your business becomes more successful in releasing new functionality to your customers.

The backend

A commerce backend (or the commerce engine) refers to the behind-the-scenes components of eCommerce, handling the business logic and data management processes. It encompasses the server-side operations, database management and administrative functionalities that power the online store. The backend is responsible for tasks across discovery (search, PIM), checkout (cart and order), payments and systems of record. In a modern, composable commerce environment, the backend is decoupled from the frontend (aka, headless) and communication is API-only. 

An overview of the backend commerce tech stack

Discovery

The discovery process is supported by various tools and functionalities on the commerce backend, including search, personalization/recommendations, PIM (product information management) and Martech. Let’s have a look at each of them:

  • Search is a critical feature of online shopping, with the search function being the most common way for consumers to find products on a retail site. Yet, only one in 10 consumers find what they’re searching for, and 82% of consumers avoid websites where they’ve experienced search difficulties in the past. To prevent such worrisome figures, you can integrate modern search solutions that intelligently interpret and yield relevant results to complex search queries. For instance, you can also add AI and NLP (natural language processing) to boost your search performance. Check here how to integrate best-of-breed search in a headless commerce environment. 

  • A PIM system is a single place to collect, manage and enrich your product information, create a product catalog, and distribute it to your sales and eCommerce channels. In addition, PIM helps you to localize and contextualize product information to different regions, languages and markets. Also, this system activates your product records everywhere, acting as a single source of truth for your product data. A PIM should be easily integrated into a composable tech stack by communicating via APIs with the other components of your architecture. 

  • Martech refers to software marketers use to build and optimize their marketing efforts, which may include CRM, social media management, email marketing, SEO analysis and many others. This is a massive toolkit encompassing over 11,000 solutions! Regardless of what tools you decide to use in your marketing, it can be easily integrated and managed in a composable tech stack. 

Featured solutions:

  • Check our Integration Marketplace for search vendors, including Algolia and Constructor, and PIM solutions, including Akeneo and Vaimo.
Checkout

The checkout process is at the heart of the customer journey! With the right technology, you can future-proof your checkout and make it more performant, customize it per channel and optimize conversions. 

  • Cart and order components enable an omnichannel checkout process, whereby customers can come to the checkout page from vastly different touchpoints, such as email, scanning a QR code, clicking on an ad and more. The convergence of these touchpoints and third-party applications, like product catalog, order, price, cart, payment service provider and other components, all come together at checkout, making it a crucial point in the digital commerce journey. 

  • Promotion engines deliver personalized promotional offerings to shoppers based on their unique characteristics, allowing you to set up complex promotion rules based on multiple criteria. That way, you can ensure that a personalized promotion is available at the right step of the user journey and in the right channel.

  • Pricing engines provide each product displays accurate pricing based on currency, country, channels, taxation rules, applied promotions, etc. 

Featured solutions:

  • Plug in commercetools Checkout and open the floodgates to conversion opportunities by inserting commerce everywhere. Transform packaging into customer inspiration, turn landing pages and microsites into shopping channels and make every app experience an opportunity to purchase.
  • Check our Integration Marketplace for promotions and loyalty vendors, including Talon.One, Voucherify and more.
Payment

There are many payment tools you can integrate to differentiate the payment experience, from payment service providers (PSPs) and payment gateways to BNPL and subscriptions: 

  • PSPs and payment gateways are networks through which your customers transfer funds to you. Payment gateways are similar to the point-of-sale terminals used at most brick-and-mortar stores. When using a payment gateway such as Adyen, Worldpay and Stripe, customers and businesses need to work together to make a transaction.

  • Buy Now Pay Later (BNPL) is a loan offered to a customer at the point of sale so they can purchase merchandise on credit but without a credit card. Popular options include Afterpay, Sezzle, PayPal and Klarna.

  • Subscription payments, also called recurring payments, are automatic payments on a schedule, e.g., monthly or annual, and can be enabled by providers such as Bold and Checkout.com. The customer can withdraw permission or cancel the subscription. 

Featured solutions:

  • Check our Integration Marketplace for payment tools, including Klarna, Adyen, Bold and more.

Systems of record

While not necessarily a part of the commerce stack, systems of record like OMS, ERP, CDP and others are required to ensure the post-checkout experience. Essentially, a system of record holds essential business data such as customer information, financial transactions, inventory data or employee records. It is a reliable source of truth that other systems or applications rely upon for accessing or updating relevant information. When these solutions are poorly integrated into the rest of the ecosystem, they create lots of inefficiencies and may negatively impact customer experiences through delayed deliveries, unclear return policies, order errors, etc. 

A best-of-breed, composable stack = unique CX

The beauty of composable is that you can build your tech stack to be truly unique and customized to your business needs. But how can this be translated into differentiated customer experiences? 

When your business is free to choose best-of-breed components, you can quickly adapt and innovate to serve customer expectations at a fast pace. You can get customer feedback about any part of your buying journey and transform that into a new feature, which can be shipped without the constraints associated with legacy platforms. In addition, it’s so much easier to experiment with new commerce possibilities, so you can stay on top of your game. 

Hundreds of leading brands have taken achieved fantastic results with a composable tech stack powered by commercetools Composable Commerce for B2C:

The leading automaker Audi is paving the way with cutting-edge digital capabilities integrated into their vehicles. The company implemented in-car commerce functionality and functions on demand. Drivers can buy and activate new car functions via the myAudi app, including car upgrades, infotainment, driver assistance systems, and more.  

The American retailer Ulta Beauty created fun, functional and personalized shopping experiences that can be used regardless if the shopper is at home, on the go or in a store. The company provides personalized recommendations with Glam Lab, a virtual makeup try-on service powered by augmented reality (AR) and AI. 

Mars, Inc., which owns brands including M&M's, Skittles, Snickers and Orbit, leverages digital commerce as a way to start up different brands, launch them online, test them to see if they work and get customer feedback, which results in a constant stream of innovation for all brands of the group. Since launching the “My M&M’s” configurator online store, allowing customers to choose their colors, create custom candy bags and buy branded merchandise, the CPG giant has launched sites for many candy brands. 

Are you ready to take on the advantages of a composable tech stack like Audi, Ulta Beauty and Mars? That’s where we can help! Discover how commercetools Composable Commerce for B2C enables you to differentiate and grow.

Manuela Tchoe
Manuela Tchoe
Senior Content Writer, commercetools

Manuela Marques Tchoe is a Content Writer at commercetools. She was a Content and Product Marketing Director at conversational commerce provider tyntec. She has written content in partnership with Facebook, Rakuten Viber and other social media platforms.

Latest Blog Posts