Configure a product list and display it on your storefront

Abstract

Configure a list of promoted or related products.

You can configure product lists with promoted or related products. To display a list on a page, you insert the Promoted Products rendering on the page and then assign the list to the rendering. In the SXA Storefront, the Promoted Products rendering on the home page displays promoted products, and the Promoted Products rendering on the Product Details page displays related products.

There are three types of lists that can be displayed in the Promoted Products rendering:

  • Named search – A dynamic list of products that is created by searching the product catalog at runtime.

  • Selected products – A static list of selected products.

  • Related products – A list based on relationship data from your commerce system.

  1. In the Content Editor, navigate to the /sitecore/content/[your tenant]/[your site]/Data/Commerce/Product Lists folder and insert an item based on the Named Search template in /sitecore/templates/Foundation/Experience Accelerator/Commerce.

  2. Assign a name to the search and click OK.

  3. In the Default bucket query field, build a query.

    43EFD6FCC531455C985D1C94DC3E09E1.png
  4. To test the query, click the Search tab.

    CB781677A5384D27A3CA36F8C1E22348.png
  5. Save the item.

Tip

To better organize your content, use nested folders (available with the Product Lists template). You can have any number of folder levels.

  1. In the Content Editor, navigate to the /sitecore/content/[your tenant]/[your site]/Data/Commerce/Product Lists folder and insert an item based on the Selected Products template in /sitecore/templates/Foundation/Experience Accelerator/Commerce.

  2. Assign a name to the list and click OK.

  3. In the Products List field, navigate to an item in the product catalog and double-click on the item to add it to the list. Repeat for all the products that you want to include in the list.

    9ED3C009C74E418B80B03E00B0781B33.png
  4. Save the list.

Tip

To better organize your content, use nested folders (available with the Product Lists template). You can have any number of folder levels.

After you configure a Named Search list or a Selected Products list, you can display it on a page.

To add a product list to a page:

  1. Insert the Promoted Products rendering on a page.

  2. In the Control Properties dialog box, select a product list in the Product List drop-down menu:

    462F9AA415DC4C65A58F02323001F1EE.png
  3. The following Product List fields on the associated content item contain default text that you can change:

    • Save Percent Lead–specify the text that will be displayed when there is a product with a discount. This text appears before the amount of saving for each product.

    • Product Page Link Text–specify the display text for the link to the product details page. The user activates the link by clicking the product name or the link with this text.

    • Category–specify the text that will appear before a category of products.

    • Price Starting From Text–specify the text that will appear at the top of the Price component when there are product variants at different prices. This text indicates that the displayed price is the lowest variant price.

    0E9802ECB30748E296A2F47D9C2FFDBC.png
  4. You can add descriptions to the following fields in the Lazy Loading section:

    • Show More Products Text –define a label for the button used to display more products on the page.

    • Show More Products Tooltip–define the text to display as a tooltip when a customer hovers over the show more products button.

If your commerce system contains data about related products, you can add a list of related products to a product page. You can choose which type of relationship the products in the list have to the product on the page.

To display a list of related products:

  1. Insert the Promoted Products rendering on a page that has a current catalog item, for example, a product details page.

  2. In the Control Properties dialog box for the rendering, select an option from the Relationship Type drop-down menu:

    64AE54C2ABD14FECB56C00B85EB44609.png

The rendering shows placeholder data in the Experience Editor, but on the live storefront it will display products that are related to the current product. The list of products is derived from the corresponding field on the Relationships tab on the catalog item.

CXA_CE_Relationships1.png

On the live storefront, a header appears above the list:

CXA_Live_RelatedProducts_Header.png

From SXA Storefront 9.0.2 onwards, you can configure the header text for each relationship type on the respective relationship type item, in the /sitecore/content/[your tenant]/[your site]/Data/Commerce/Relationships folder:

CX_CE_RelationshipType_Title.png

Note

Each instance of the Promoted Products rendering can only display one list. If you fill in both the Product List field and the Relationship Type field in the Control Properties dialog box for a single component, only the product list is displayed. To include more than one list on a page, you must insert multiple instances of the Promoted Products rendering on the page.