---
title: "Use the Commerce Search Results rendering"
slug: "use-the-commerce-search-results-rendering"
abstract: "Overview of the Commerce Search Results rendering and how to configure it."
---
# Use the Commerce Search Results rendering

It is important to be able to search your storefront quickly and easily. To help you do this, [two search renderings](https://doc.sitecore.com/xp/en/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings") - the Commerce Search Results rendering and the SXA Search Results rendering - are available in the Toolbox.

The Commerce Search Results rendering is available from the [Commerce Catalog](https://doc.sitecore.com/xp/en/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html "Commerce Catalog renderings") section of the toolbox and is used on several pages of the SXA Storefront site template including the:

- Commerce Catalog Category page
- Commerce Home page
- Commerce Product Detail page
- Commerce Search Results page

To use the Commerce Search Results rendering, you must add the Commerce Search Results rendering to the page and then define and associate a search signature with it.

> [!note]
> The Commerce Search Results rending uses the [site-level setting for catalog image source](https://doc.sitecore.com/xp/en/developers/101/sitecore-experience-commerce/en/configure-the-source-for-catalog-images.html) (*sitecore/<tenant>/<site>/Settings/Commerce/Catalog Configuration*), which determines whether images are retrieved from the Media Library or the Sitecore Digital Asset Management (DAM) system.

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

For users to view the results of their search, you must add either the SXA Search Results or the Commerce Search Results rendering to the page.

To add the Commerce Search Results rendering:

1. Open the page that you are going to add a search rendering to in the Experience Editor.
2. In the **Toolbox**, in the **Commerce Catalog** section, click the **Commerce Search Results** rendering and drag it onto the page.
3. In the **Select the Associated Content** dialog box, click **Default**, and then click **OK**.

    ![Select Associated Content for the Commerce Search Results rendering](https://doc.sitecore.com/api/markdown-image/xp/en/users/101/sitecore-experience-commerce/images/SearchRendering.png)

4. To change the text that appears when the search returns no results, on the **Commerce Search Results** toolbar, click **Edit component configuration item**![A0173FD240754803B4109340ECAC8288.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/101/sitecore-experience-commerce/images/A0173FD240754803B4109340ECAC8288.png) and enter the text that you want to appear and click **OK**.

    ![The Commerce Search Results toolbar](https://doc.sitecore.com/api/markdown-image/xp/en/users/101/sitecore-experience-commerce/images/924384955E9F46C3B9F350F7CC3A93F8.png)

5. On the **Commerce Search Results** toolbar, click **More, Edit Component Properties** and, in the **Control Properties** dialog box, in the **Catalog images** section, specify the image source. To use images stored and managed by the Sitecore Digital Asset Management (DAM) system, select the **Use images in Sitecore Digital Asset Management system** check box. When the check box is cleared, images are retrieved from the Media Library.
6. To specify how to arrange the search results, edit the following fields:
    - **Search results signature** – Enter a unique signature that can be used in combination with other search renderings (such as the Load More rendering). This is useful when you have more than one search rending on the page and you want to filter on specific search results.
    - **Search scope** – Select a [search scope](https://doc.sitecore.com/xp/en/developers/101/sitecore-experience-commerce/en/commerce-search-scopes.html) to limit the search results.
    - **Page size** – Enter the number of results you want to be loaded by the rendering initially as well as when another page is loaded or the **Load More** button is clicked when infinity scrolling is in use.
    - **Default language filtering** – Select the language you want to use for the search. Typically, this is set to *Current language*.
    - **Default sort order** – Select the way the results are sorted on the page. This is only used when the Sort Results rendering is not used.
7. When you have finished, click **OK** and, on the ribbon, click **Save**.

</details>

<details>
<summary><h2>Specify a Search results signature</h2></summary>

The Search results signature aggregates several facet filters so that on the live storefront the customer can filter search results based on multiple selections and the results are dynamically rendered on the page.

The Storefront site template includes a Home page with two sections that use a Commerce Search Results rendering and a Load More rendering. In each section, a unique search signature binds the renderings together. For example, the **On Sale Televisions** section uses the *on-sale-televisions* search results signature on both the Commerce Search Results rendering and the associated **Load More** button. The **Mira Laptops** section uses the *mira-laptops* search results signature for both renderings.

![Search signatures as used on the Storefront site template Home page](https://doc.sitecore.com/api/markdown-image/xp/en/users/101/sitecore-experience-commerce/images/SearchSignature.png)

To specify a search results signature:

1. In the **Toolbox**, in the **Search** section, drag a search rendering (for example, the Load More rendering) onto a partial design.
2. On the toolbar, click **More, Edit component properties**.
3. In the **Control Properties** dialog box, in the **Search Criteria** section, define a **Search results signature** and click **OK**.

</details>