---
title: "Modify the Commerce Search Results Scriban template"
slug: "modify-the-commerce-search-results-scriban-template"
abstract: "Example of how to modify the Commerce Search Results Scriban template."
---
# Modify the Commerce Search Results Scriban template

This topic provides an example of how to modify the Commerce Search Results rendering by editing the Scriban template.

Before the modification, commerce search results on the live storefront include a stock status label and a Details button.

![Example of the default Commerce Search Results on the live storefront.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/ScribanTemplateBefore.png)

After modifying the Scriban template, the Details label is replaced with the stock status.

![Example of the Commerce Search Results on the live storefront after modifying the Scriban template.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/ScribanTemplateAfter.png)

> [!note]
> To see how to modify the Commerce Search Results Scriban template, watch the [video](https://youtu.be/HgwnRTYtTXs?t=160) available on the Discover Sitecore channel.

To modify the Commerce Search Results rendering through the Scriban template:

1. In the Content Editor, go to *sitecore\\Content\\<tenant>\\<site>\\Presentation\\Rendering Variants*.
2. Expand the **Commerce Search Results** item, as well as the **Default** item, and click **Scriban**.

    ![Commerce Search Results Scriban template location in the Content Editor.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/CommerceSearchResultsScriban.png)

3. On the **Content** tab, in the **VariantDetails** section, in the **Template** field, modify the following lines:

    ```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
                }}
                <div data-bind="css: { 'promotion': promotion }" class="hidden">
                    <span data-bind="text: promotion" class="savings-percentage"></span>
                    <span class="savings-label">{{ sc_translate 'SAVINGS_LABEL' }}</span>
                </div>
            </a>
        </div>
        <div class="product-info">
            <a class="product-title" title="{{ displayName }}" href="{{ i_item.url }}">
                {{ displayName }}
            </a>
            <div class="product-brand">
                {{ i_item.brand }}
            </div>
            <div class="product-indicator">
                <label class="hidden" data-bind="css: { 'price-difference': hasDifferentPrice }">
                    {{ sc_translate 'STARTING_FROM' }}
                </label>
                1<label class="stock-status" data-bind="text: stockLabel"></label>
            </div>
            <div class="product-detail" data-bind="css: { 'on-sale': promotion }">
                <span data-bind="text: price" class="product-price"></span>
                2<a class="product-link" title="{{ displayName }}" href="{{ i_item.url }}">
                    3{{ sc_translate 'DETAILS' }}
                </a>
            </div>
        </div>
    </div>
    ```

    | [****1** | Copy data-bind="text: stockLabel" from this line to the clipboard and delete the line. |
    | --- | --- |
    | [****2** | Add data-bind="text: stockLabel" to the end of the line. |
    | [****3** | Delete the {{ sc_translate 'DETAILS' }} line. |

    > [!note]
    > For easier editing, you can copy the Scriban code into a code editor, modify it, and copy it back into the Template field.

4. On the ribbon menu, click **Save**.
5. Press F9 and publish your changes using **Smart Publish**.