---
title: "Walkthrough: Configuring visual navigation by category"
slug: "walkthrough--configuring-visual-navigation-by-category"
abstract: "How to configure navigation by category in a more visual way."
---
# Walkthrough: Configuring visual navigation by category

If you want to navigate by category in a more visual way that just rendering a regular menu, you can use the SXA Search Results rendering to display categories with images by using a query.

![Example of search by category](https://doc.sitecore.com/api/markdown-image/xp/en/developers/100/sitecore-experience-commerce/images/CategorySearchLive.png)

This procedure assumes you are using the Storefront site template and the Habitat catalog but the same steps apply to custom catalogs and sites.

> [!note]
> You can extend this configuration to list multiple levels of categories by extending the sample Scriban template to use nested sc\_search methods or by nesting a Scriban template for each level in the rendering variant.

This walkthrough shows you how to:

- [Create a search scope and query](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html#UUID-70f0c7c5-7bcd-6525-a38b-2c826145f01a_section-idm231815136307322 "Create a search scope and query")
- [Create a Search Results rendering variant](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html#UUID-70f0c7c5-7bcd-6525-a38b-2c826145f01a_section-idm231815214233666 "Create a Search Results rendering variant")
- [Configure an image field](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html#UUID-70f0c7c5-7bcd-6525-a38b-2c826145f01a_section-idm231815136445469 "Configure an image field")
- [Configure a Search Results rendering](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html#UUID-70f0c7c5-7bcd-6525-a38b-2c826145f01a_section-idm231815193113629 "Configure a Search Results rendering")

<details>
<summary><h2>Create a search scope and query</h2></summary>

To configure a search scope and query:

1. In the Content Editor, go to */sitecore/Content/<tenant>/<site>/Settings*.
2. Right-click **Scopes** and click **Insert, Scope**.
3. In the **Message** dialog box, enter *Categories catalog scope* and click **OK**.
4. On the **Content** tab, in the **Scope** section, click the **Build query** hyperlink.
5. In the **Build Search Query** dialog box, add filters so that the search query matches the following image, and then click **OK**.
    - `Commercesearchitemtype:category` so that the search focuses only on categories.
    - ` _Parent: {B893C063-6238-ED57-700D-72862C56038D}` so that the parent is Departments. If you are using a custom catalog, copy and insert the item ID for the parent item instead.

    Click the search icon to execute the search and validate that the desired list of categories appears. Categories in multiple languages may appear in the results but these will be filtered out later on.

    ![Query elements](https://doc.sitecore.com/api/markdown-image/xp/en/developers/100/sitecore-experience-commerce/images/SearchCategories.png)

6. On the ribbon menu, click **Save**.

</details>

<details>
<summary><h2>Configure an image field</h2></summary>

To associate an image with each top-level category, you need first to modify the Commerce Category template to make an image field available for each catalog category. Alternatively, you can modify the category template in Commerce Engine to include an image field, but for simplicity this option is not used here. For more information, see [Add new fields to a catalog item template](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/add-new-fields-to-a-catalog-item-template.html "Add new fields to a catalog item template").

To configure an image field:

1. In the Content Editor go to */sitecore/Templates/Project/<tenant>/Commerce Category* and, on the **Builder** tab, click in the **Add a new section** field and enter Category Images.
2. Click in the **Add a new field** box and enter Images and, from the associated type list, click **Treelist** and save your changes.
3. Go to the catalog category, for example */sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Cameras* and click the **Content** tab.
4. In the **Category Images** section, in the **Images** field, go to the image you want to associate with the category, and then double-click it to move it to the **Selected** list.

    ![Category image selected](https://doc.sitecore.com/api/markdown-image/xp/en/developers/100/sitecore-experience-commerce/images/CategoryImage.png)

5. Repeat step 3 to associate images with all the categories in the catalog.
6. Save and publish your changes.

</details>

<details>
<summary><h2>Create a Search Results rendering variant</h2></summary>

To create a Search Results rendering variant:

1. In the Content Editor, go to */sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants*, right-click **Search Results**, click **Insert, Variant Definition**.
2. In the **Message** dialog box, enter *Category variant* and click **OK**.
3. In the tree view, right-click Category variant, click **Insert, Scriban** and, in the **Message** dialog box, accept the default name and click **OK**.
4. Right-click Scriban, click **Insert, Responsive Image** and, in the **Message** dialog box accept the default name and click **OK**.
5. In the tree view, click Scriban and, on the **Content** tab, in the **VariantDetails** section, copy and paste the following code into the **Template** field.

    ```csharp
    <div class="product-summary" data-id="{{ i_item.name }}">
    {{displayName = i_item.display_name | html.escape}}
    <div class="product-photo">
        <a title="{{ displayName }}" href="{{ i_item.url }}">
                {{
               productImage = i_item.images.targets | array.first
                 if productImage
                       sc_execute productImage "Responsive Image"
                    end
                }}
            </a>
        </div>
        <div class="product-info">
           <a class="product-title" title="{{ displayName }}" href="{{ i_item.url }}">
                {{ displayName }}
            </a>
        </div>
            </div>
    ```

6. In the tree view, click Responsive Image and, on the **Content** tab, in the **Variant Details** section, enter the following values:
    - In the **Sizes** field, enter (max-width:320px)280px, (max-width:480px) 440px, 800px
    - In the **Widths** field, enter 320,480,800
    - In the **Default** size field, enter 400
7. Save your changes.

</details>

<details>
<summary><h2>Configure a Search Results rendering</h2></summary>

Because stock and price information is not needed when displaying top-level categories, you can use the SXA Search Results rendering instead of the Commerce Search Results rendering.

To configure a Search Results rendering:

1. In the Experience Editor, go to the page where you want to see categories and, in the Toolbox, in the **Search** section, click the **Search Results** rendering, drag it onto the page.
2. In the **Associated Content** dialog box, click Default and then click **OK**.
3. On the **Search Results** toolbar, from the **Variant** list, select Category variant.
4. On the **Search Results** toolbar, click **More, Edit component properties** and, in the **Control Properties** dialog box, in the **SearchCriteria** section, in the **Search scope** field, click Categories catalog scope.
5. In the **Default language filtering** field, click Current language.
6. In the **Default sort order** field, click **Title Desc** and then click **OK**.
7. Save your changes.

You now have category navigation showing images for each category that once clicked redirect to the regular category page, which shows the product cards for each product within the category.

</details>