Customizing the Commerce Search Results rendering
The Commerce Search Results rendering variant includes an additional renderer in the form of a Scriban template. Scriban templates are available as renderers similar to, for example, field renderers, sections, or tags and can coexist with other renderers. Scriban templates can contain sophisticated logic that cannot be expressed using other renderers and can greatly reduce the complexity of rendering variants by including numerous renderers in one template. You can also use them to replace existing rendering variants.
General documentation about the underlying templating language and the built-in functions is available on the Scriban GitHub repository.

The Scriban template is responsible for rendering the markup for the individual product cards. It is executed within a loop in the corresponding MVC View that iterates over the product items. To change the markup generated for the product cards, you can modify the Scriban template. It is best to create a new custom rendering variant in this case so that the customization does not get overridden during software upgrades.
For a demo of how to modify a Scriban template, see the Sitecore Experience Commerce video on the Discover Sitecore channel.
The following code shows the Commerce Search Results rendering Scriban template defined within the default rendering variant.
<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>
<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>
<a class="product-link" title="{{ displayName }}" href="{{ i_item.url }}">
{{ sc_translate 'DETAILS' }}
</a>
</div>
</div>
</div>
You can customize the following Commerce Search Results rendering Items. The Commerce Search Results rendering is a clone of the SXA Search Results rendering specific to Commerce. It has its own default rendering variant root and default rendering variant (/sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Commerce Search Results
), which uses a Scriban template for generating the markup, JavaScript for retrieving the stock and price information (as an AJAX request), and the SXA Dictionary for label translation.
You can change the labels used with the Commerce Search Results rendering.
The following table details the key properties of the Commerce Search Results Scriban template.
Property |
Type |
Description |
Code |
---|---|---|---|
i_item |
Item |
The current item in the context of the rendering variant. Often, an equivalent to the |
RequestResponseshell
|
displayName |
Variable |
Used in various contexts. For example, it is initialized to i_item.display_name, which stores the Display Name of the product. The variable is passed into the built-in function It is also assigned to the |
RequestResponseshell
|
title |
Attribute |
The |
RequestResponseshell
|
productImage |
Variable |
Initialized to Note An if block checks if the productImage is not null. If it is not null, then the custom function |
RequestResponseshell
|
Responsive Image |
Responsive Image |
A subitem of type Responsive Image that must be created under the Scriban item in the Content Editor ( ![]() This renderer runs when Note On the Content tab, in the VariantDetails section, you can set the width field in pixels to change the dimensions to which the image is scaled. |
RequestResponseshell
|
sc_translate |
Embedded Function |
Used to display items defined in the Dictionary Domain of the site ( ![]() |
RequestResponseshell
|
i_item.brand |
Property |
Stores the brand name of the product and is displayed in the |
RequestResponseshell
|