Loading
Salesforce B2B Commerce
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Enable Product Cards on Search and Category Pages in a B2B Commerce Store

            You are here:

            1. Salesforce Help
            2. Docs
            3. B2B Commerce

            Enable Product Cards on Search and Category Pages in a B2B Commerce Store

            The Results Grid component and the Product Card component enable product cards to display on the product list page. If you’re creating a store after the Summer ‘24 release, the Results Grid component is configured by default. For stores created before Summer ‘24, you must use Experience Builder to add the component and configure it.

            Required Editions

            1. In the navigation sidebar, select a store from the Store dropdown.
            2. Select Website Design, and then click Experience Builder.
            3. In Experience Builder, open the search page.
            4. Replace the Results component with the Results Grid component.
              1. On the main page canvas, select the Results component, and click the delete icon.
              2. Confirm that you want to delete the Results component.
              3. From the Components panel, drag the Results Grid component into the page’s Results section.
                When you drag a component over a content or theme layout region, a label appears to identify the region. Components in a theme layout region have the label “Shared” added to the name because they’re shared everywhere that the theme layout region is used. Components in a content layout region are specific to the page.
            5. Edit the Results Grid component properties.
              1. Go to the component’s Settings tab.
              2. For Data Source, select Nested Expression.
              3. For Expression, select Product Cards.
            6. Add the Product Card component to the Results Grid component, and edit the Product Card component properties.
              The Product Card component enables products to show on the product list page.
              1. From the Components panel, drag the Product Card component into the sfdcRepeaterItem section of the Results Grid component.
              2. Go to the component’s Settings tab.
              3. For Data Binding, make sure that {!Item} is entered.
                You must edit the Results Grid component properties again.
              4. (Optional) Under Product Information Settings, select an image hover action. On product listing pages, such as search results or the cart, this setting controls what happens when a shopper hovers over a product image. If you choose Image Rollover, make sure each product has a defined hover image.
              5. (Optional) For Quick View, select Show quick view button to display product details if a shopper hovers over a product card..
            7. Make the same changes for the Category page.
              1. Edit the Results Grid component properties.
              2. Go to the component’s Settings tab.
              3. For Expression Prefix, ensure that Item is entered.
                If you change the Data Binding in the Product Card component, you must also update the Expression Prefix in the Results Grid component to match.

            See Also

             
            Loading
            Salesforce Help | Article