Walkthrough: Cross-selling and upselling using the Commerce Search Results rendering

Current version: 10.3

The Commerce Search Results rendering is a versatile rendering that you can easily customize to offer cross-sells and upsells to customers. You can see an example of how the Commerce Search Results rendering can be used to cross-sell similar products on the Storefront site template Home page.

Cross-selling recommended products on the live storefront.

The Commerce Search Results rendering can also be used to upsell products, for example, to offer a packaged product bundle deal to customers purchasing a product. The following image illustrates this example and suggests a product bundle that the customer may be interested in. You can add a custom label to easily identify a product bundle.

Upselling product bundles on the live storefront.

This walkthrough describes how to modify the Commerce Search Results rendering so that it displays recommended product bundles.

Create a commerce scope

This search scope query retrieves product bundles that are associated with products in the search results by examining the relationships. The search scope query you create in this procedure is similar to the query used with the default Related Products on PDP scope. You re-use the generic search token ProductRelationship and supply the name of the relationship field that you want, for example, the Sellable Item To Bundle field.

To create a commerce scope:

  1. In the Content Editor, go to /sitecore/Content/<tenant>/<site>/Settings, right-click Scopes and click Insert, Scope.

  2. In the Message dialog box, enter Related Bundles on PDP and click OK.

  3. On the Content tab, in the Scope section, in the Scope Query field, enter the following scope query: +sxa:ProductRelationship|SellableItemToBundle;+custom:excludefromwebsitesearchresults|false;+commercesearchitemtype:sellableitem.

  4. On the ribbon menu, click Save.

Add the Commerce Search Results rendering to the page

To add a Commerce Search Results rendering to the page:

  1. In the Content Editor, go to /sitecore/Content/<tenant>/<site>/Presentation/Partial Designs, right-click Default Main Product Page Content and click Experience Editor.

  2. In the Experience Editor, in the Toolbox, in the Page Structure section, click Container, and drag it onto the page.

  3. In the Toolbox, in the Page Content section, click Rich Text and drag it into the container. and then enter Bundles you might find interesting.

  4. To style the text, on the toolbar, click Edit the text and, in the Rich Text Editor, click the HTML tab, and add the following markup and then click Accept.

    Rich Text Editor showing text markup.

  5. In the Toolbox, in the Commerce Catalog section, click Commerce Search Results and drag the rendering into the container. In the Select the Associated Content dialog box, click Default and then click OK.

  6. On the Commerce Search Results toolbar, click More, Edit component properties.

  7. In the SearchCriteria section, in the Search results signature field, enter related-bundles.

  8. In the Search scope field, click Related Bundles on PDP, define the values shown in the following image, and click OK.

    Control Properties dialog box.

  9. In the Toolbox, in the Search section, click the Load More rendering and drag it onto the page beneath the Commerce Search Results rendering. In the Select the Associated Content dialog box, click Default, and then click OK.

  10. On the Load More toolbar, click More, Edit component properties and, in the SearchCriteria section, in the Search results signature field, enter Related-bundles and click OK.

  11. Save your changes.

Personalize the Product Bundles section

To ensure the section recommending product bundles does not render and the Commerce Search Results rendering does not execute a query when there are no product bundles related to the current products, you must add a personalization rule.

To personalize the section:

  1. Click the Container rendering you added in the previous procedure.

  2. On the toolbar, click Create or edit personalization for this component, and in the Personalize the component dialog box, click Add (+) and enter the name Related bundles.

  3. Click Edit rule and, in the Choose conditions field, enter field and click the rule where the specific field compares to specific value.

  4. In the Edit rule box, click specific, enter SellableItemToBundle , and click OK. Click compares and change to is equal to and click OK. In the Warning dialog box, click OK.

  5. In the Default section, click Hide.

  6. Click OK to close the Personalize component dialog box.

  7. On the ribbon menu, on the Home tab, click Save and then click Publish.

Do you have some feedback for us?

If you have suggestions for improving this article,