---
schema_version: "1"
id: 18b491d5cb0d5435259ecf5c6ef84e3f503635d94644624167dd2b4e08498138
title: Enable Product Cards on Search and Category Pages in a B2B Commerce Store
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/commerce/264-0-0/comm_configure_product_cards_to_display.md
canonical_url: https://help.salesforce.com/s/articleView?id=commerce.comm_configure_product_cards_to_display.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 63fdcc08d214c8598dc5f1fa26c1514053f5d91fa33cb92f9a87cfddef4f208a
description: 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.
products:
  - Commerce
  - B2B Commerce
release: "264"
---
# 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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=commerce.comm_editions.htm&amp;language=en_US" target="_blank">View supported editions</a>.</td></tr></tbody></table>

[Which Salesforce Commerce Product Do I Have?](https://help.salesforce.com/s/articleView?id=commerce.comm_what_product.htm&language=en_US)

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**.
        
        ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-comm-264-0-0-production-enus/d863e308-482a-4dfa-8d20-2a94737d394a/images/icon_note.png)
        
        Note Custom expressions aren't supported inside Nested Expressions.
    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

- [Website Design for B2B Stores](https://help.salesforce.com/s/articleView?id=commerce.comm_customize_template.htm&release=264.0.0&type=5 "Use the Website Design workspace to add basic design elements to your store without leaving the Commerce app. For example, add your logo and set fonts, colors, and button styles. For more advanced design changes, such as configuring store components, pages, or navigation, you can move out of the Commerce app to Experience Builder.")
- [LWR Store Components](https://help.salesforce.com/s/articleView?id=commerce.comm_components.htm&release=264.0.0&type=5 "B2B stores created with the unified Commerce Store template share the same Commerce components in Experience Builder.")
- [Format the Display of Product Cards on Search Pages in a B2B Commerce Store](https://help.salesforce.com/s/articleView?id=commerce.comm_configure_how_product_cards_are_displayed.htm&release=264.0.0&type=5 "In Experience Builder, you can change the number of product card columns and the spacing between cards on the product list page. You can also configure your search results or product listing page to show products spanning multiple pages by either page numbers or the Load More button.")