Display product recommendations

Commerce includes a Product Recommendations widget you can use to provide automated, personalized product recommendations to each shopper. The widget can be placed in any layout, and the same widget instance can be shared over as many pages as necessary to provide recommendations to your shoppers.

This section applies to Storefront Classic only. This section applies to Storefront Classic only.

Commerce lets you create complex recommendation strategies and global exclusions in the administration interface. Product recommendations are generated by an AI-powered learning engine. Strategies and global exclusions work in harmony with this engine to provide granular control over the merchandising experience. To learn how to create strategies that you can use with the Product Recommendations widget, see Configure AI Recommendations Rules.

Note: For information on including recommendations in emails your store sends, see Customize Email Templates.

To display product recommendations:

  1. Click the Design icon.
  2. From the Layout menu, select the layout in which you want to provide product recommendations.
  3. Clone the layout to preserve the original layout for future use as a template. For more information, see Design Your Store Layout.
  4. Open the layout in grid view. Create any new rows as needed to accommodate the widget.
  5. From Components, drag and drop the Product Recommendations widget into the layout in the location you want the recommendations to appear. You can create a new widget instance or use an existing instance.
  6. Making changes to widget settings is optional. Either accept the widget default settings or click the Settings icon located on the widget instance to edit the widget settings.
    • Setting changes to Recommendations Title affects font styles and display text for the widget. For information on changing the font, see Customize Your Store’s Design Theme.
    • The Recommendations carousel is where the recommendations are displayed, affected by the number of recommendations to show, the strategy, and the restriction. Additional conditions may affect the appearance of the carousel. For example, a smart phone screen may display fewer recommended products by virtue of its available screen size.
  7. On the widget settings dialog, click Settings to make changes to maximum number of product recommendations, strategies, restrictions, and collection(s). Changes to widget settings are optional.
    • Enter the maximum number of recommendations to appear in the widget instance. The default is 12.

    While the default is 12, the number of recommendations displayed to your shoppers is based on strategies and restrictions as well as your catalog configuration. Screen width also influences the number of recommendations displayed in the widget instance at one time.

    As a best practice, choose a number of recommendations so that all recommendations can be viewed in the carousel with one or two clicks of the Next button.

    • Select the strategy, restriction, or collection(s) associated with the displayed recommendations. For details about built-in and custom strategies, see Configure AI Recommendations Rules
    • Click Save.

The following table describes the restrictions you can apply to displayed recommendations:

Manage personal data in product recommendations

The Product Recommendations widget collects personal data as defined by the EU General Data Protection Regulation (GDPR). However, if you have configured your site to request cookie consent, and the shopper has declined to provide that consent, the widget does not capture or use personal data for the visit. Specifically, the Product Recommendations widget checks for the existence of the GDPRCookieP13nConsentGranted cookie. If the cookie is not present on the shopper’s browser, personal data is not collected. Cross-session recommendations are not available for the shopper, and the Most Recently Viewed strategy is not maintained for him or her. The shopper is thus treated as a new, unknown shopper for each session.

For detailed information on how to configure your site to request consent, refer to Manage the Use of Personal Data.