Edit Templates and Create Slot Configurations

Learning Objectives

After completing this unit, you’ll be able to:

• Describe the connection between B2C Commerce page templates and content slots for showing product recommendations.
  
• Differentiate the template creation and slot configuration processes across SFRA, Composable, and Site Genesis storefronts.
  
• Configure a content slot in Business Manager to show product recommendations.
  
• Identify which recommender types align with specific slot contexts and storefront pages.
  

Configure Storefront Pages to Show Recommendations

With your recommender configured, you can set up your storefront pages to show the recommendations it generates.

To build a B2C Commerce storefront, developers use various tools. Among the most important are templates. B2C Commerce uses templates to define how it transforms data and page information into dynamic, HTML-based web pages that it renders on the browser.

This unit explains how page templates, content slots, and Einstein Product Recommenders work together to create a slot configuration that shows personalized product recommendations to shoppers. You also learn how to collaborate with your developer to create a page template, and how to create a content slot in Business Manager.

Create Page Templates for Recommendations

Templates play a critical role in the deployment of a B2C Commerce Einstein Product Recommender. They are the foundational framework for integrating and showing personalized product recommendations on your storefront.

Merchandisers and developers need to collaborate to develop templates for Einstein Product Recommendations in Salesforce B2C Commerce. The specific requirements vary depending on how your B2C Commerce developers build your storefront—Storefront Reference Architecture (SFRA), Composable Commerce, or Site Genesis. Let’s take a look at each approach, and the different tasks for developers and merchandisers.

SFRA Storefronts

SFRA storefronts use ISML-based templates but follow a modular approach, with slot configurations managed in Business Manager.

• Templates: Developers create Internet Store Markup Language (ISML)–based templates that separate page functions and logic. SFRA’s predefined cartridges and components use rendering logic to parse the template. For example, controllers or models handle business logic not the templates.
  Developers use the app_storefront_base cartridge as a foundation and extend it for customizations.
  
• Slot configurations: Merchandisers create and manage content slot configuration through Business Manager.
  

Composable Storefronts

Composable storefronts operate differently. Developers use modern front-end frameworks to create and manage templates.

• Templates: Developers build templates that use modern frameworks like React, Angular, or Vue.js. Composable decouples the frontend from the backend and consumes the recommender and content slot data via the Salesforce Commerce APIs (SCAPI).
  
• Slot configurations: Merchandisers create and manage content slot configuration through Business Manager.
  

Site Genesis Storefronts

Developers manage templates and slots directly with ISML files and Business Manager.

• Templates: Developers work directly within (ISML) files. They modify existing templates to include the recommender content slot. Developers use ISML tags to define dynamic content, rendering logic, and slot configurations.
  
• Configure slots: Merchandisers create and manage content slot configuration through Business Manager.
  

As a merchandiser, you give your developer details on the recommendation logic, including the type, strategy, rule, and anchor, for each storefront development approach.

In addition, you also work with your developer to determine key aspects related to the content slot.

• Placement: Where to show the recommendations on the page
  
• Title: The recommendations title. Design the title so that it’s visible to shoppers, relevant to the recommendations, and aligned with the site design and tone.
  
• Dropdown: (Optional) When a dropdown is part of the recommendation layout, include dropdown details that align with the recommendation strategy.
  
• Display attributes: The display attributes for the recommended products. For example, product name, description, price, and rating.
  

A content slot is a specific location on the page as defined in a template. In Business Manager, you create a content slot configuration that identifies what shows within the location, when, and for how long. Within the content slot you can show products, categories, content assets, or static HTML. Content assets are page elements such as images, marketing graphics, product search result sets, product carousels, and–when paired with a product recommender–product recommendations.

Recommenders identify the recommended products that show in the content slot based on Einstein Product Recommendations results.

Use content slots to show product recommendations in your storefront pages. See Managing and Creating Slot Configurations for information about configuring content slots.

When configuring a content slot for product recommendations:

• Select a content slot that has a global context.
  
• Set the Content Type field to Recommendation.
  
• Select a value for the Recommender field.
  
• Select a suitable rendering template from the slots/recommendation folder.
  

The Recommender field contains a named list of business rules, called recommenders, that you can define in the Einstein Configurator tool. These rules control how Commerce Cloud Einstein outputs product recommendations.

Configure a Content Slot

You can configure both global and category content slots to show recommendations. Here’s how content slots map to storefront pages, and which recommender types you can use on a page.

Next, learn how to create a global slot configuration for the product details page. The steps are the same for creating and managing global or category configurations.

Let’s assume that your developer has already created a template.

1. In Business Manager, click App Launcher, and then select Merchant Tools | Site | Online Marketing | Content Slots.
   

2. Select the home-categories-m slot.
   
3. Click New to create a new configuration. 
   

4. Enable the configuration.
   
5. Select it as the default and enter a description.
   
6. Select the content type: Recommendation.
   
7. Select a recommender. (Note: You can only see recommenders on a primary instance group (PIG) instance. A sandbox instance doesn't have Einstein Product Recommendations enabled.)
   
8. Select the template: pdp.isml and click Save.
   

9. Click Add Schedule and select a schedule type. A slot interval can't be shorter than 1 hour (60 minutes). Time conditions are always subject to time zone and daylight saving considerations.
   
10. Assign customer groups: Big spenders.
    
11. Click the Rank column to rank the slot. This setting tells B2C Commerce which slot to show when you’ve scheduled multiple slot configurations. If multiple slot configurations have equal ranks, B2C Commerce uses the last one edited. The lower the rank, the higher the priority.
    
12. Click Apply.
    
13. Click the preview icon to see the slot in the storefront.
    

Wrap It Up

In this unit you learned about working with your developer to create page templates for content slots. You also learned how to create a content slot and activate it in the template and on your storefront.

Resources

• Salesforce Help: About Templates for Web Campaigns
• Salesforce Developers: Templates
• Salesforce Developers: B2C Commerce Einstein API