Salesforce Commerce Cloud now makes it easier than ever for merchants to create modern storefronts using best of breed technologies and solutions, like Builder.io (of course!) through it’s headless commerce offerings.
In this blog post we’ll cover the following:
- Benefits of headless with Salesforce
- Our new Salesforce integrations, including our Salesforce Commerce API plugin and Salesforce Composable Storefront
- Deep-dive into our Salesforce Composable Storefront
- How Builder.io makes Salesforce headless easier for everyone
Benefits of headless with Salesforce
Separating the frontend (head) from the backend allows merchants to pick and choose (compose) the best software for each specific part of their stack that is right for their brand, desired user experience, and specific business use cases. This is especially critical for large-scale ecommerce merchants, and has several advantages over legacy platforms with tightly coupled storefronts, such as:
Full-stack flexibility - You can choose your preferred frontend framework, and more seamlessly manage multiple “heads” like web and mobile apps. On the backend you aren’t tied to what your monolithic platform provides. You can pick and choose from a myriad of API-first backend solutions for each part of your tech stack, such as content management, search, personalization, loyalty, payments, and more. Headless allows you to build the exact type of storefront you need.
Future-proof - If you decide to change your frontend to the newest, most performant framework (we hear Qwik is great!), you don’t need to make significant changes to your backend. Similarly, if you decide to migrate ecommerce platforms, you don’t need to completely rebuild your frontend. Ultimately, this can minimize the cost of any future replatforms.
Performance - Going headless means taking control of your frontend for better performance, generally through single page apps (SPAs) and progressive web apps (PWAs). On a typical monolithic ecommerce store, a page load can take over 10 seconds because there are many steps that need to be taken before the entire page can be displayed to the customer. With a headless site, all content can be delivered far faster because it can be pre-generated and cached at the edge so it loads as fast as possible, delivering sub-second page loads. And we know that fast user experiences and app-like browsing drives higher conversions and average order values.
Iterate faster* - Decoupling the frontend from the backend simplifies the developer experience and speeds up release cycles. Importantly, though, headless can create too much dependency on developers to build and maintain content and digital experiences. Fortunately, since headless allows you to adopt best of breed solutions, you can further accelerate your content development workflow and build-measure-learn cycles to create and test digital experiences faster to drive growth with the right tool (*this is where Builder.io comes in and truly stands out).
Builder.io integrations for Salesforce
While we have an integration for hosted SFCC stores (leveraging the Site Genesis / Salesforce Reference Architecture (SFRA) solutions), we now have two additional headless integrations based on the major investments Salesforce has made into their powerful backend commerce APIs — the Salesforce Commerce API Plugin and the Salesforce Composable Storefront.
What is our Salesforce Commerce API Plugin integration?
Our Salesforce Commerce API integration is a plugin that allows you to easily connect your Salesforce B2C Commerce backend to your Builder.io content. The plugin acts as a data source to access product and catalog data to create rich, dynamic experiences within Builder.io’s visual editor.
Customers can search and link selected products and categories from their SFCC store to structured data, sections, and pages built within the visual editor. This allows e-commerce teams to easily enrich the content for selected products and build landing pages or custom sections with elements linked directly to their SFCC backend, for e.g product cards, product galleries, add-to-cart buttons, a list of product recommendations, and much more.
What is the Salesforce Composable Storefront integration?
While the Salesforce Commerce API plugin gives you the ability to “roll your own” headless solution, Salesforce has created Composable Storefronts as a headless reference framework to quickly create robust storefronts. Composable Storefronts are meant to accelerate the ROI of headless with a fast and flexible storefront that is pre-packed with integrations, like Builder.io, and achieve faster time to value. It provides a quick starting point for your headless storefront that you can further extend and customize. The out-of-the-box Composable Storefront comes with:
- Project templates, including the Retail React App. The Retail React App is a customizable storefront that implements core e-commerce flows from home page to checkout.
- A rendering system that works on both the server side and client side — and handles hydration (the process of transferring rendering from server to client).
- A routing system that allows you to inject data from the Commerce API into your components.
- Utility functions and scripts for automating routine development tasks.
- Integration with the B2C Commerce API and Open Commerce API (OCAPI).
We have taken Salesforce’s standard Composable Storefront and pre-configured it to include Builder.io so that digital teams can accelerate the ROI of headless even faster.
Deep-dive: Builder.io + SFCC Composable Storefront Solution
We’ve integrated the Builder SDK into several parts of the Composable Storefront to allow teams to kickstart their building journey. We also extended our visual editor to connect to the Salesforce Commerce API directly and added a few pre-configured custom blocks that allow for very powerful use cases. The solution can be broken down into two main categories: custom blocks and editable sections & pages.
Custom Blocks:
In addition to the built-in blocks Builder provides out of the box, we’ve added few blocks specifc to Salesforce that you can drag and drop in the visual editor:
It takes a Salesforce product as an input from the editor and renders a section with all the product options and images, and allows the site visitor to add products to cart from anywhere it’s used, whether a landing page, a blog article, or any editable section within the storefront.
Teams can use this component to render a grid of selected products on the page or section they’re editing. It will render a card for each product selected and links to the respective product page.
This is similar to the Product Grid, but it’ll dynamically picks the list of products based on the Einstein recommender algorithm the editor picks.
Blog cards are a convenient way to link and show blog article previews within editable sections. This is useful when linking to articles from within pages or sections, like your homepage and PLPs. It takes an Article as an input and will render the blog article’s title, image, author information:
Editable Section and pages:
Our visual editor and SDKs work by extending codebases with editable sections and pages. Ecommerce teams can use this to extend the headless storefront using Builder’s built-in and custom blocks.
Teams will be able to preview their changes, share preview links, collaborate on specific parts, and then when ready they can publish, schedule, or a/b test.
🎉 Announcement bars
E-commerce teams can publish, schedule, and A/B test global messages on their Composable Storefront.
🖥 Landing pages
Using the Builder editor, e-commerce teams can spin up landing pages at any URL path that’s not already reserved by the Composable Storefront or other models (e.g.: /account , /category/** , /product/** , /account , /cart , and /blog/**.
Page custom fields:
- Title: SEO document title
- Description: SEO document description
- Keywords: A list of keywords
📰 Blog articles
Blog articles are rendered at /blog/[slug] where slug is an auto computed property from the article title, so if you created an article title Hello World it’ll be served from the URL /blog/hello-world.
Blog Article options:
- Title: The article title, will also be used in creating the
slugin the URL. - Keywords: List of keywords or tags that will appear as pills in the article.
- Image: the article’s main image.
- Keywords: List of keywords of this article.
- Author: You can pick an author from the list of pre-defined authors within the space.
- No Index: This will set the
noindexmeta tag on the document for search engines to ignore this article.
🛒 Cart modal upsell
Content editors can customize the section in the modal that pops up when a visitor adds a product to the cart.
You can personalize this per product.
📦 Product page footer
Teams can customize the bottom of the product page to merchandise and tell stories to site visitors. You can also aim to cross-sell and up-sell through recommendations, whether powered by Einstein or or manually pick to display specific products. Of course, you can A/B test this all right in the visual editor.
⭐️ Category Hero
Teams can customize the top of any or all category pages.
How Builder.io Makes Headless Easier
As discussed previously, one of the advantages of headless is improving developer experience and release cycles by decoupling the front and backend. But we also called out that headless can lead to an over-reliance on developers, creating bottlenecks in content development workflows. This can kill a business and erase the benefits of headless, if not addressed.
While it has its disadvantages, the rigidity of hosted, monolith platforms does make it easier for them to provide “out of the box” solutions to manage content and shopping experiences without too much reliance on developers. With headless, you immediately lose access to these familiar content editing and CMS tools, like those available with Salesforce. Enter Builder.io.
Builder.io is the world’s first Visual CMS, which includes a WYSIWIG visual editor that is compatible with any frontend, any backend (hello, Salesforce!) and any data sources to streamline content development workflows and help teams build faster. Developers maintain the flexiblity and freedom of headless along with a component-based approach to content management that leads to cleaner, higher quality code. And business teams, like ecommerce, merchandising, and marketing can self-serve to build and optimize commerce experiences without overwhelming development backlogs. The result is that teams build and ship at a higher velocity than ever before enabling them to test and iterate more and ultimately drive growth, faster.
We’re thrilled to deepen our partnership with Salesforce and enable its merchants to build their way, faster. Please reach out if you’re interested in a demo.
