Salesforce Docs Portal

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

  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