---
title: "Walkthrough: Cross-selling and upselling using the Commerce Search Results rendering"
slug: "walkthrough--cross-selling-and-upselling-using-the-commerce-search-results-rendering"
abstract: "How to customize the Commerce Search Results rendering to cross-sell and upsell to customers."
---
# Walkthrough: Cross-selling and upselling using the Commerce Search Results rendering

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.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/RecommendedProductsHomePage.png)

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](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/customize-the-commerce-search-results-rendering-to-identify-product-bundles.html "Customize the Commerce Search Results rendering to identify product bundles") to easily identify a product bundle.

![Upselling product bundles on the live storefront.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/UpsellToBundles.png)

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

<details>
<summary><h2>Create a commerce scope</h2></summary>

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](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/commerce-search-scopes.html "Commerce search scopes"). 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**.

</details>

<details>
<summary><h2>Add the Commerce Search Results rendering to the page</h2></summary>

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](https://doc.sitecore.com/xp/en/users/sxa/103/sitecore-experience-accelerator/add--reusable--rich-text.html)** 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.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/CrossSellUpsellStyling.png)

5. In the Toolbox, in the **Commerce Catalog** section, click **[Commerce Search Results](https://doc.sitecore.com/xp/en/users/103/sitecore-experience-commerce/commerce-catalog-renderings.html)** 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.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/RecommendedBundlesCtrlProperties.png)

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.

</details>

<details>
<summary><h2>Personalize the Product Bundles section</h2></summary>

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**.

    ![UpsellPersonalisation.png](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/UpsellPersonalisation.png)

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**.

</details>