Headless commerce solutions give companies the flexibility to build unique, cross-channel shopping experiences and the agility to quickly adapt as customers demand innovations. The growing popularity of a headless approach has led many traditional ecommerce platforms, like Salesforce Commerce Cloud , to add support for a headless approach.
This article takes a look at key considerations for a headless Salesforce Commerce Cloud implementation, including:
Headless architecture for the Salesforce B2B and B2C commerce platforms;
Variations of headless implementations with Salesforce Commerce Cloud;
Pros and cons of using Salesforce as your headless commerce engine;
3 ways to build the headless storefront for Salesforce Commerce Cloud.
What is headless commerce?
Headless architecture is an approach to software design that separates backend and frontend code.
Unlike a traditional commerce solution, where the storefront templates are part of the platform, a headless commerce platform can be used with any modern frontend framework . It takes care of commerce functionality but doesn’t provide a frontend presentation layer. Instead, the platform shares all data and logic in a standardized way via APIs, allowing each frontend channel (i.e. the “heads”) to choose which information to use and how to present it.
This decoupled architecture enables businesses to:
Update the customer experience at a fast pace. Backend and frontend code can be developed and deployed independently. Allowing teams to make fast, iterative improvements to the storefront without worrying about causing errors to critical business processes.
Build high-performing, customized storefronts. Instead of being locked into a vendor’s one-size-fits-all page templates, teams can use modern frameworks like React and Vue.js to quickly build custom frontend features and deliver storefronts as fast-loading progressive web apps.
Simplify omnichannel shopping. All backend data is communicated via APIs, making it possible to use the same commerce engine to power webstores, mobile apps, customer portals, marketplaces, in store kiosks, and any other digital channel.
Integrate other business systems. The API-based approach makes it easier to bring together various data sources to power the shopping experience.
Is Salesforce Commerce Cloud headless?
The short answer is yes: Salesforce Commerce Cloud can be implemented as a headless solution.
Salesforce offers two different products for commerce, one for business-to-consumer (B2C) and one for business-to-business (B2B), that have completely separate architectures. Both were originally designed as traditional platforms with an embedded frontend framework, and both have had APIs added to be able to support a headless setup.
The traditional Salesforce way relies heavily on building with Salesforce's templates and reference implementations. Unfortunately, here you can easily run into issues with some implementation not being up to date with modern technologies you may want to implement.
That is perfectly understandable since Salesforce CC is a backend company, not a frontend company.
That's why, there is now the "new way" – using a headless frontend together with the original backend.
What tools does Salesforce Commerce Cloud offer to support a headless architecture?
Salesforce has put in substantial effort over the past few years to make both their B2B and B2C commerce platforms able to support a headless approach.
Headless Salesforce Commerce Cloud B2C
Salesforce Commerce API (SCAPI)
Salesforce Commerce API (SCAPI) is a collection of RESTful APIs for interacting with B2C commerce instances. SCAPI functionality is divided into two main groups:
The Shopper API group provides endpoints for customer-facing functionality such as product browsing, shopping cart management, and checkout. Shopper APIs are read-only, with exceptions for baskets and orders.
The Admin API group provides endpoints for merchant-facing functionality such as management of products, orders, inventory, and customers. Admin APIs are read and write.
SCAPI can be used to integrate Salesforce Commerce Cloud B2C with any modern frontend framework, or with Salesforce Composable Storefront.
Salesforce Composable Storefront
Composable Storefront is a set of developer tools used to build a storefront as a progressive web application (PWA) that talks to Commerce Cloud exclusively through SCAPI. PWAs are web apps that use caching and rendering strategies to mimic the feel of interacting with a native mobile app.
Composable Storefront consists of two primary components:
PWA Kit: A framework used to build storefronts as React-based apps. The PWA toolkit includes a customizable storefront starter, the Retail React App, to help developers get started.
Managed Runtime (MRT): A hosting environment for your headless storefronts. MRT provides infrastructure to deploy, host, and manage your PWA frontend.
Headless Salesforce Commerce Cloud B2B
Connect REST API
Connect REST API allows you to programmatically get, create, update, and delete your B2B commerce data. With endpoints for address management, cart, checkout, orders, products, promotions, taxes, wishlists, and search settings.
Connect REST API can be used to integrate Salesforce Commerce Cloud B2B with any modern frontend framework. There is no Salesforce specific option for headless B2B storefronts (i.e. an equivalent to Composable Storefront).
Exploring variations in headless commerce architecture with Salesforce Commerce Cloud
Headless doesn’t have to be all or nothing. Many companies go headless in stages, and Salesforce Commerce Cloud supports implementations all along the spectrum of traditional to fully headless commerce.
Traditional commerce architecture
A traditional implementation of Salesforce Commerce Cloud isn’t headless. The main benefit of this setup is that it provides a ready-to-go storefront template with little coding needed to get started. This can make it a good option for straightforward webshops that don’t deviate much from the prebuilt template.
The challenges come when businesses need to customize the storefront. The more changes made to the template, the harder it is to maintain and update the customer experience. Since the frontend and backend code are tightly linked, even a small change to the storefront has to go through a time-intensive testing process and it can quickly feel too risky to improve or scale the experience.
Hybrid, or partially headless
In a hybrid architecture, parts of the frontend use SFRA or LWR templates just like in a traditional setup. While other parts are built as an external frontend application that talks to Salesforce Commerce Cloud via APIs (i.e. headless). This application can be custom-built, a third-party frontend solution , or, for Salesforce Commerce Cloud B2C customers, can be built using Salesforce Composable Storefront.
One way to split this up is by channel, for example using traditional templates for the webshop but using headless APIs to power a native mobile app. It’s also possible to run a hybrid storefront, for example keeping the cart and checkout pages on traditional templates but using a progressive web app for the homepage and product pages.
This approach lets you quickly get the benefits of headless in key parts of the commerce experience without having to first invest in a full replatform. It also gives teams the chance to learn headless best practices on simpler use cases before moving more complex, business-critical features to the architecture. Overall, de-risking the transition to headless commerce.
A hybrid setup is typically a step on the way to becoming fully headless, not a long-term solution. Managing two separate frontend architectures adds unnecessary complexity and, especially with a hybrid storefront, it can require multiple API calls to handle authentication between the traditional and headless components which can slow down site performance.
Fully headless
In a fully headless implementation, Salesforce Commerce Cloud is used as the backend commerce engine while the storefront, and any other frontend channel, is built and deployed as an external application.
A headless approach offers a high level of flexibility that makes it great for teams that need to build unique features, manage multiple channels , and frequently update the customer experience. However, it’s also more complex to implement than a traditional solution where the storefront is ready out-of-the-box, so it’s probably not the right fit for businesses that just need a simple webshop.
Composable commerce
Composable commerce is the idea that, instead of being locked into a one-size-fits-all set of features from a single vendor’s suite, businesses should be able to “compose” their own tech stack of best-fit tools for each part of the digital experience. Technologies that support a composable approach are API-based and typically headless, which is why the terms are often linked.
For instance, a composable tech stack could include Salesforce Commerce Cloud for core commerce functionality, a headless content management system (CMS) for marketing content and campaigns, a site search solution that specializes in personalization, and a frontend app to bring it all together for the customer.
What are the pros and cons of Salesforce headless commerce?
If you’ve decided to move to a headless commerce approach and are wondering if Salesforce is the right ecommerce platform to support your transition, here are some considerations to keep in mind.
Pros of using Salesforce Commerce Cloud for headless commerce transformation
Using Salesforce for headless commerce is an attractive option for companies that currently have a traditional implementation of Commerce Cloud, or have already invested in other Salesforce tools.
Support for hybrid implementations. The storefront can be gradually moved from legacy SFRA or LWR templates to a headless application, lowering the barrier to get started and allowing teams to move at their own pace.
Composable Storefront. For B2C merchants, Composable Storefront offers a starter headless storefront application that has been built specifically for Salesforce functionality.
Integrations with the Salesforce ecosystem. Prebuilt integrations are available with other Salesforce Cloud tools. This is especially true for Salesforce Commerce Cloud B2B, as it is built on top of Salesforce’s flagship customer relationship management (CRM) software.
Cons of using Salesforce Commerce Cloud for headless architecture
The biggest limitations of the platform stem from the fact that it was originally designed as a traditional, all-in-one solution. While natively headless platforms like commercetools or BigCommerce have been built with an API-first approach from the ground up, Commerce Cloud has added APIs on top of legacy code. This can make it less flexible when it comes to customization and integrations.
Requires experienced Salesforce developers. Commerce Cloud is a complex platform, and developers will need to be familiar with Salesforce-specific logic, features, and data models. Even when primarily working with the platform’s APIs.
Limited composability. Not all functionality is exposed via APIs, and a lot of backend processes are tightly intertwined. This can make it difficult to integrate certain Commerce Cloud features with third-party services and platforms.
B2C and B2B solutions are separate. The B2C platform (formerly Demandware) and B2B platform (built on top of Salesforce CRM) have different architectures. Companies that have both business models will likely prefer a headless commerce platform that can be used to manage all their use cases.
3 ways to build a headless digital storefront for Salesforce Commerce Cloud
Using a headless commerce platform means that you’ll need to create the storefront “head”. With Salesforce Commerce Cloud, there are 3 main ways to do this:
1. Custom-built storefront
With any headless commerce platform it’s possible to build your own storefront from scratch using a modern frontend framework like React or Vue.js.
This gives you absolute control, but it requires expertise in everything from frontend design to integrations to cloud infrastructure. It also means developers have to spend a lot of time and resources “rebuilding the wheel” before they can start focusing on the features that are unique to the business.
2. Salesforce Composable Storefront (B2C only)
Salesforce Composable Storefront provides a starter PWA storefront, prebuilt components, and hosting infrastructure to help teams get a headless storefront up and running.
Composable Storefront is only for Salesforce Commerce Cloud implementations, and the prebuilt components are designed specifically for the platform’s functionalities. This can make it a good option for companies just getting started with headless, but also makes it less suited for a more advanced composable approach where parts of the storefront are powered by other platforms and third party services.
3. Frontend as a Service
Frontend as a Service (FEaaS) solutions provide prebuilt components, developer tools, and cloud infrastructure to help teams build and deploy headless frontends. With FEaaS, teams can get to market much faster than with a custom-built storefront and have more flexibility to build unique features and integrations than with a solution that’s intended for a specific backend technology, like Composable Storefront.
Alokai is a FEaaS that simplifies composable commerce . Alokai provides ready frontend components in React and Vue.js, making it faster to build ecommerce storefront and connect it with any current ecommerce tech stack. With prebuilt integrations for many leading commerce, CMS, search, and payment platforms, including Salesforce Commerce Cloud .
Alokai provides an API orchestration layer, Alokai Connect , to bring together the data from across your tech stack and deliver to the frontend. This setup allows teams to create future-proof storefronts that can easily adapt as needs change.
Wrap-up
Salesforce Commerce Cloud now supports a headless approach and existing Commerce Cloud customers are encouraged to move towards this API-based architecture to more easily manage, improve, and scale the frontend shopping experience.
Using an external Frontend-as-a-Service solution, like Alokai, lets you quickly build storefronts that leverage Commerce Cloud APIs but aren’t locked to just Salesforce functionality. Supporting a future-proof, composable approach to commerce technology.
