Salesforce Commerce for B2C: Features and Use Cases

Salesforce Commerce Cloud (SFCC) scales B2C operations by decoupling storefront logic from backend services using OCAPI, SFRA, and PWA Kit. The platform handles multi-region deployments through tenant isolation, localized catalog APIs, and CDN-backed media delivery.

Storefronts render with PWA Kit lazy-loading video modules while Einstein AI injects personalized recommendations. OCAPI fetches real-time inventory and pricing, while Page Designer orchestrates conditional video hydration based on user segments.

SFCC"s runtime optimizes TTFB by pre-caching media assets at the edge and deferring non-critical JS for shoppable video interactions.

B2C Features

Multi-Storefront Management Under a Single Tenant

SFCC partitions storefronts using Business Manager configurations, where each site shares a catalog but isolates locale-specific rules. OCAPI enforces region-based access controls, while Storefront Reference Architecture (SFRA) applies theme variations via site_id-mapped templates.

code

// SFRA controller resolving site-specific templates

code

module.exports.render = function () {

code

const sitePrefs = require('dw/system/Site').getCurrent().getPreferences();

code

res.render(sitePrefs.custom.templatePath, { product: product });

code

};

Explanation:

Fetches the current site"s custom configuration using dw/system/Site.getCurrent().getPreferences(), allowing multi-site rendering flexibility.
Utilizes sitePrefs.custom.templatePath to route the response to a specific template path configured per storefront or region.
Passes product context into the rendering logic to ensure dynamic content population based on catalog or campaign targeting.

Real-Time Pricing via Einstein AI

Einstein"s Product Affinity Engine adjusts prices by analyzing session-level engagement data. The API merges real-time demand signals (e.g., cart abandonment rates) with baseline pricing rules.

code

// OCAPI request for Einstein-adjusted pricing

code

GET /product/(product_id)/prices HTTP/1.1

code

Host: {tenant}.commercecloud.salesforce.com

code

Headers: {

code

"X-Request-Context": "geo={region};affinity_score=0.87"

code

Explanation:

Sends an OCAPI GET request to retrieve pricing details for a product, factoring in Einstein personalization signals.
The endpoint /product/(product_id)/prices queries price information from the specified tenant environment.
Uses the X-Request-Context header to include region-specific and affinity-based context, allowing dynamic price adjustments.

Region-Based Inventory APIs

Inventory APIs resolve stock levels by querying fulfillment centers prioritized by shipping address proximity. OCAPI"s inventory_lookup combines real-time warehouse data with fallback logic.

code

// OCAPI response for regional inventory

code

"product_id": "sku123",

code

"region_allocations": {

code

"NA": { "stock": 42, "fulfillment_center": "warehouse_us_east" },

code

"EU": { "stock": 0, "backorder_until": "2024-05-20" }

code

Explanation:

Returns product inventory data segmented by region in response to an OCAPI call.
"product_id": "sku123" identifies the specific product queried.
The region_allocations object maps inventory availability and fulfillment centers across regions like NA and EU.

Mobile-First Rendering Using PWA Kit and SFRA

PWA Kit"s React hydration lazy-loads product grids, while SFRA"s iscache tags cache mobile breakpoints. Video placeholders defer loading until viewport intersection.

code

// PWA Kit lazy-loading video component

code

<LazyVideo

code

src="cdn/pdp-video.mp4"

code

intersectionThreshold={0.1}

code

placeholder={<Spinner />}

code

/>

Explanation:

Implements a lazy-loaded video component in PWA Kit using <LazyVideo>.
src="cdn/pdp-video.mp4" specifies the video file hosted on the CDN.
intersectionThreshold={0.1} delays loading until 10% of the component enters the viewport.
placeholder={<Spinner />} displays a loading spinner while the video loads.

Localization for Currency, Language, and Tax Logic

SFCC"s locale pipelines inject translated video transcripts and tax-adjusted pricing. The system resolves currency conflicts using Accept-Language headers and IP geolocation.

code

// SFRA middleware applying locale rules

code

server.use((req, res, next) => {

code

res.locals.currency = req.locale.currency;

code

res.set('Content-Language', req.locale.language);

code

next();

code

});

Explanation:

Applies middleware in SFRA to handle locale-specific rules during requests.
res.locals.currency = req.locale.currency sets the current currency for rendering views.
res.set('Content-Language', req.locale.language) adds the appropriate language header to the response.
next() passes control to the next middleware or route handler in the chain.

How Video Workflow Works in Salesforce Commerce for B2C

Server-Side Video Module Initialization

The workflow begins when Page Designer processes the layout JSON during server-side rendering. It parses video configuration blocks from the templates, validates CDN URLs against Salesforce's Media Service whitelist, and generates placeholder DIVs with data attributes for deferred loading.

code

// SSR output for video placeholder

code

<div class="video-container"

code

data-video-src="https://cdn.com/{product_id}.m3u8"

code

data-min-score="0.65">

code

</div>

code

Explanation:

Outputs a server-side rendered <div> container prepared for client-side hydration of video content.
Embeds a dynamic HLS video source using a placeholder {product_id} in the data-video-src attribute for runtime substitution.
Includes a data-min-score attribute to enable conditional rendering based on affinity scoring or personalization logic.

Client-Side Hydration Logic

Upon reaching the client, PWA Kit's hydration script checks Einstein scores stored in Session Storage. These scores are compared against predefined data-min-score thresholds, and matching elements trigger the initialization of HLS.js for video playback.

code

document.querySelectorAll('[data-video-src]').forEach(el => {

code

if (parseFloat(sessionStorage.einsteinScore) >= parseFloat(el.dataset.minScore)) {

code

new HLSPlayer(el, el.dataset.videoSrc);

code

});

code

Explanation:

Selects all DOM elements containing the data-video-src attribute to identify deferred video containers.
Compares each element"s data-min-score threshold with the user"s einsteinScore stored in sessionStorage to enforce personalization logic.
Initializes an instance of HLSPlayer for qualifying elements, passing in the container and HLS video source for dynamic playback.

Real-Time Media Adaptation

The player dynamically adjusts based on network API detection, distinguishing between connections like 5G, Wi-Fi, or slower networks such as 3G and 4G. It also profiles device capabilities, including checks for GPU acceleration, and evaluates viewport intersection ratios to optimize playback behavior.

code

const streamQualities = {

code

mobile: [480p, 720p],

code

desktop: [720p, 1080p, 4K]

code

};

code

function selectStream() {

code

return navigator.connection.effectiveType.includes('4g')

code

? streamQualities.desktop

code

: streamQualities.mobile;

code

Explanation:

Defines available streaming resolutions categorized by device context, mobile gets 480p and 720p, while desktop supports up to 4K.
Uses navigator.connection.effectiveType to detect current network quality, optimizing delivery based on bandwidth.
Returns high-resolution streams for 4G or better connections, enabling 1080p or 4K playback on desktop.

Shoppable Event Processing

Hotspot interactions follow a defined sequence where click events are captured using event delegation. The system then validates product IDs against OCAPI inventory before applying cart mutations with optimistic UI updates for faster user feedback.

code

document.body.addEventListener('click', (e) => {

code

if (e.target.classList.contains('hotspot')) {

code

OCAPI.post('/cart/items', {

code

product_id: e.target.dataset.sku,

code

quantity: 1

code

}).then(updateCartBadge);

code

});

Explanation:

Attaches a click event listener to the document body to monitor user interactions dynamically.
Identifies interactive elements with the hotspot class for clickable product tags on video overlays or 3D models.
On interaction, it triggers an OCAPI POST request to /cart/items to add the associated product (data-sku) to the shopping cart.

Engagement Data Pipeline

Video analytics flow begins with client-side buffering metrics collection. Web Workers handle scroll and viewport tracking, and the processed data is sent to Salesforce CDP through the bulk API integration.

code

const observer = new IntersectionObserver((entries) => {

code

entries.forEach(entry => {

code

if (entry.isIntersecting) {

code

MediaTracker.logViewability(entry.target.id);

code

});

code

}, {threshold: 0.5});

Explanation:

Creates an IntersectionObserver instance to track when elements become visible within the viewport.
Monitors each observed element and checks if at least 50% of it is visible (threshold: 0.5).
When an element meets the visibility threshold (entry.isIntersecting), it calls MediaTracker.logViewability with the element"s id.
Supports performance-efficient media analytics by only logging viewability when content is meaningfully seen.

B2C Use Cases

Leading B2C brands integrate video throughout the customer journey using Salesforce Commerce Cloud and edge delivery strategies. These workflows optimize performance, engagement, and conversion outcomes.

Product Demos Gated by Network Conditions

On electronics PDPs, 4K demo videos (up to 18MB) load only for users on Wi-Fi. PWA Kit leverages the NetworkInformation API to control delivery, while Einstein tracks segment-level engagement to measure conversion lift.

Shoppable Livestreams with Real-Time Inventory Sync

A beauty brand embeds Twitch livestreams on PDPs, enabling users to add products to cart in real time. Viewer counts sync with SFCC"s ProductInterest objects to manage inventory allocation dynamically.

A/B Testing Video Length for Merchandising Strategy

A home goods retailer tests 15-second versus 30-second product videos on category pages. Einstein"s Media Lift Analysis compares video length against add-to-cart rates across desktop and mobile devices.

Dynamic Video Mapping with Real-Time Engagement Scores

A jewelry brand personalizes PDP content by showing craftsmanship videos to users with more than 3 minutes of session activity. Interaction Studio updates user segments in real time using behavioral event streams.

Salesforce Commerce for B2C: Features and Use Cases

B2C Features

Multi-Storefront Management Under a Single Tenant

Real-Time Pricing via Einstein AI

Region-Based Inventory APIs

Mobile-First Rendering Using PWA Kit and SFRA

Localization for Currency, Language, and Tax Logic

How Video Workflow Works in Salesforce Commerce for B2C

Server-Side Video Module Initialization

Client-Side Hydration Logic

Real-Time Media Adaptation

Shoppable Event Processing

Engagement Data Pipeline

B2C Use Cases

Product Demos Gated by Network Conditions

Shoppable Livestreams with Real-Time Inventory Sync

A/B Testing Video Length for Merchandising Strategy

Dynamic Video Mapping with Real-Time Engagement Scores

Was this article helpful?