---
schema_version: "1"
id: cc41f56e35bbfd12c3c605db90ea087a376f566d7762de0bb31218ed72514ffc
title: Format the Display of Product Cards on Search 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_how_product_cards_are_displayed.md
canonical_url: https://help.salesforce.com/s/articleView?id=commerce.comm_configure_how_product_cards_are_displayed.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e7665b4591cc6919f3d9729fcae7e535bf60299b372cf7efa9fd9c9d004a7760
description: 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.
products:
  - Commerce
  - B2B Commerce
release: "264"
---
# Format the Display of Product Cards on Search Pages in a B2B Commerce Store

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.

### 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. On the main page canvas, select the Results Grid component.
5. On the Settings tab in the Grid Layout section, enter the column and spacing settings.
    
    The number of product cards on the product list page varies depending on the browser width. The columns dynamically adjust for smaller and larger devices, such as a tablet or a wide desktop screen. If you select **Fewer**, product cards are larger. If you select **More**, product cards are smaller.
6. Expand the Results Data section, and from Result Navigation, select **Pagination**, **Pagination Only**, or **Load More**.
7. To change the label, enter another Load More button label.
8. Preview and publish your store.

#### 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.")
- [Enable Product Cards on Search and Category Pages in a B2B Commerce Store](https://help.salesforce.com/s/articleView?id=commerce.comm_configure_product_cards_to_display.htm&release=264.0.0&type=5 "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.")