Want to use your Salesforce Commerce Cloud (SFCC) instance in headless mode with a modern storefront, while taking full advantage of modern experience management and search solutions?
The release of the 64Labs Composable Storefront Accelerator makes it easy.
In this blog post I’m going to delve deeper into this new solution by answering the following questions:
Why go headless on SFCC?
What is the 64Labs Composable Storefront Accelerator?
How does it give merchants and marketers more freedom?
Let’s start with question one…
1. Why Go Headless on SFCC?
Headless is a term often used amongst technologists and software vendors, along with terms like MACH (Micro-services, API-first, Cloud-native and Headless) and composable (as in ‘composable commerce’). There is no doubt that using these modern approaches has the potential to transform the capability of your teams and simplify innovation in the customer experience.
Put simply: in headless mode your commerce solution communicates with the storefront experience using APIs (application programme interfaces). This has several advantages over the older and more tightly integrated web storefronts that many brands still use:
Frontend flexibility: you can run a range of modern, mobile-optimized frontends from the same commerce instance, including single page apps (SPAs) and progressive web apps (PWAs). By using a headless solution’s APIs you can also power native mobile apps and even internet of things (IoT) devices from the same instance of the commerce backend, simplifying support for a range of customer use cases that would previously have required their own dedicated solutions.
Backend flexibility: composable commerce is all-the-rage when it comes to modern commerce experiences. Composable means you have the freedom to pick and choose the backend components for each main functional area as you see fit, whether that’s for content management, site search, merchandizing or anything else.
Performance: by interacting with the APIs directly, your applications consume the backend data using JSON, which is more efficient when used with a modern PWA-based mobile frontend. Older website frameworks like Site Genesis and SFRA use HTML, which is slower to transfer and come in larger, whole-page blocks.
Productivity: by using better tools your team can do more with less (and do it better) – launch more campaigns, target more segments, create richer content and use better-guided selling tools. By running a number of frontend applications from the same set of headless APIs, your teams can create once and publish everywhere, saving them time and simplifying the orchestration (a fancy name for ‘control’) of the customer experience.
But as many modern commerce vendors will tell you, SFCC is not a pure MACH platform. It is, however, now available in headless mode. So as an SFCC customer you can now access the many benefits of headless without the cost and risk of an expensive re-platform, buying you time to plan the transition to a MACH and composable future on your own terms.
By using SFCC in headless mode you no longer need to use the default Site Genesis or SFRA storefronts, enabling you to access the powerful backend commerce APIs directly and choose the frontend that works best for you. You will still need at least one head – a storefront – and perhaps more heads if you want to give customers and employees native mobile apps to use. But you can add those later as required.
And by moving to a frontend that is less tightly integrated into SFCC, you can take a ‘composable’ approach to your commerce solution and choose to use best-of-breed software vendors for specific capability that are right for your brand and customer experience, giving you far more freedom than before.
So now we’ve covered off the main reasons to use SFCC in headless mode, which frontend should you use for your storefront?
2. What Is the 64Labs Composable Storefront Accelerator?
The 64labs Composable Storefront Accelerator Solution is a headless reference framework pre-integrated into Amplience (for content, media and experience, Algolia (for search and assortment) and Salesforce’s powerful APIs (to manage catalog, cart, promotions and customer groups).
Brands can immediately use this solution as-is or as the base for customization and further extension, making this a low-risk option for SFCC customers who are interested in headless: gaining the flexibility and speed of lightweight frontends while maintaining the trusted commerce platform and tooling merchants and marketers are familiar with.
The Composable Storefront Accelerator Solution enables eCommerce teams to take full control over the storefront experience, giving them the freedom to drive improvements in customer engagement and sales by using best-of-breed modern tools and high-performance delivery APIs.
The whole solution looks like this:
So what is Composable Storefront?
It’s Salesforce’s answer to a modern mobile storefront framework, designed to be the next generation SFCC frontend: a PWA (Progressive Web App) built using React, a modern JavaScript language.
It interacts with the SFCC backend APIs, and any other backend system APIs directly, using the fast and efficient JSON format. It also renders (builds) the customer experience more efficiently, updating each part of the screen as required rather than re-loading the entire screen one page at a time (in HTML) after every user interaction.
Using a modern and flexible frontend (PWA Kit) coupled with extendable and easy-to-integrate data (backend system APIs) allows you to maintain the reliability and trust of the Salesforce platform without being locked into a website that often requires specific developers to manage. You can create any application you want (web, app, in-store kiosks, tablets or anything in between) with shared data across all endpoints.
This makes it much faster and more flexible than older website storefront frameworks like Site Genesis and SFRA. And it’s also less costly, as you no longer have to reply on proprietary SFCC developers.
The 64Labs Composable Storefront Accelerator Solution uses a specially upscaled version of the standard Salesforce PWA Kit, which has been optimised for even better page-load performance, accessibility and SEO.
Read my recent blog post for more on the performance benefits of the new Accelerator.
3. How Does the 64Labs Composable Storefront Accelerator Give Merchants and Marketers More Freedom?
Moving to Composable Storefront sounds great, but there are implications for the eCommerce team.
Removing the tightly integrated Site Genesis or SFRA web storefront means that SFCC’s experience management tools like Page Designer and the CMS in Business Manager no longer work.
This immediately raises some critical questions:
How will marketers manage landing pages, site content, blogs and campaigns?
How will merchants create assortments and manage category pages?
What tools do my content managers have to manage the experience and optimize the site for SEO and accessibility?
What happens to my existing content?
The good news is the smart folks at 64Labs have thought this through and built the Composable Storefront Accelerator to use Amplience (for CMS, DAM and Rich-Media) and Algolia, (for Search). These two integrated capabilities replace Salesforce’s tools with more modern, headless alternatives.
You might be thinking: why does headless technology matter?
Here are two very good reasons:
Not only do these headless integrations deliver a faster storefront experience through their high-performance delivery APIs, they’re also more powerful , making experience management faster and more productive.
And since headless technologies are not tied to an application, the content can be created once and published to multiple endpoints. So that promo banner can be created once and delivered to your website, native app, web POS, email service provider or even digital in-store signage. Or your customer service questions, blog posts and YouTube videos can be returned to customers as they interact with the search bar on your web, native app or in-store tablet.
Going back to our four questions above, then, let’s answer each in a little more detail:
How will marketers manage landing pages, site content, blogs and campaigns?
Amplience Dynamic Content and Dynamic Media provide a powerful set of capabilities to create and manage content and media, from simple banners to complex landing pages. Business users have access to a content authoring console from which they can create a content library and push content into slots within the experience.
How will merchants create assortments and manage category pages?
This is where Algolia comes in. It is a modern headless search engine that can manage site search and product listers throughout the experience. In the 64Labs Accelerator, Algolia indexes the product catalogue which is held in SFCC. Algolia can then be used to bring back product assortments as a parameterised search result.
The 64Labs Accelerator uses Algolia to drive the product listers for category pages, which feature a range of filters to help users find what they are looking for:
So far, so good. But isn’t that what Salesforce’s own search does already?
Well, yes and no. Salesforce search is perfectly capable, but lacks the advanced merchandizing features of Algolia. Merchandizing involves promoting specified products or categories of products. It lets you:
Offer recommendations to your users
Highlight your inventory’s best products
Follow trends
Improve conversion rates
Algolia offers multiple merchandizing capabilities, all powered by Rules. It has a visual editor with a drag-and-drop interface to easily merchandize search and browse experiences. You can also create advanced rules with the API clients or the manual editor on Algolia’s dashboard. You can even personalize the results (if you’re looking for a more advanced use case example).
The Algolia delivery APIs are also very fast, improving page-load performance wherever they are used in the experience. So while Salesforce search will do the basics well, Algolia will help to take your commerce experience to the next level.
What tools do content managers have to manage storefront experience and optimise the site for SEO and accessibility?
Amplience is a full experience management platform designed to help business users take control of the experience and manage in content, not code.
This gives non-technical users the freedom to make changes to experience elements without resorting to time-consuming and expensive developer-led change.
The 64Labs team has built a range of capabilities into the Composable Storefront Accelerator that take full advantage of Amplience’s powerful capabilities:
Use of content slots: Amplience Dynamic Content has a flexible slot model. You can add slots to pages and control them independently of each other, making it easy to manage content in and out of pages. Slots can also be nested to create a stack of content items. And you can set them up to be site-wide (for example the content slug at the top of the Style 64Labs sample store that says ‘Free shipping’).
What happens to my existing content?
In conjunction with your tech team or systems integrator and with assistance from the Amplience Expert Services team, 64Labs will migrate your content from SFCC to Amplience as part of the Composable Storefront implementation process.
There are three key advantages to this approach:
Content is now stored as data externally to SFCC so you can easily re-use it in a range of frontend experiences like native mobile apps and in-store systems
Content is now portable – you can manage it separately to the SFCC instance, making upgrades and re-platforming simpler and less risky than before
If internationalization and localization of content is required, content managers can use Amplience’s powerful tools to create localization workflows that use a range of external translation providers
Conclusion
Going headless on SFCC is easier than ever with the new 64Labs Composable Storefront Accelerator.
Migrating your Site Genesis or SFRA storefront will deliver immediate benefits in terms of page-load speed, SEO and accessibility, giving eCommerce teams access to the powerful capabilities of Amplience and Algolia for experience management.
Want to know more about this solution, what it can do and how to make the most of it?