Walkthrough: Creating a new Scriban template

Current version: 10.3

You can modify Scriban template code to change how the content is rendered on the live storefront. This walkthrough uses the Storefront site template and the Master_Habitat catalog to illustrate a simple example - modifying the product information section on the PDP, which by default looks like this:

Product Detail Page on the live storefront showing product information section before change.

After you create and publish the new Scriban template, the production information section looks like this:

Product Detail Page on the live storefront showing product information section after change.

This walkthrough describes how to:

Create a new Scriban template
Add the new rendering variant to the partial design
Add logic to the Scriban template code

Note

You can find a video explaining how to use Scriban on the Discover Sitecore channel.

Create a new Scriban template

To create a new Scriban template:

In the Content Editor, go to sitecore\Content\<tenant>\<site>\Presentation\Rendering Variants.
Right-click Page Content, click Insert, Variant Definition and, in the Message dialog box, enter Product Information Scriban and click OK.
In the content tree, right-click the newly created Product Information Scriban item and click Insert > Scriban and, in the Message dialog box, click OK to accept the default name (Scriban).

On the Content tab, in the VariantDetails section, in the Template field, enter the following code.

RequestResponse

<div class="product-name">
	<h1>{{i_item.DisplayName}}</ha>
 </div>
 
 <div class="product-number">
	<label class="h5">{{sc_translate 'Item Number'}}:</label>
	<span>{{i_item.ItemNumber}}</span>
	</div>
	
<div class="product-description">
	<label class="h5">{{sc_translate 'Description'}}:</label>
	<span>{{i_item.Description}}</span>
	</div>
	
<div class="product-features">
	<label class="h5">{{sc_translate 'Features'}}:</label>
	<span>{{i_item.Features}}</span>
	</div>
	
<div class="product-brand">
	<label class="h5">{{sc_translate 'Brand'}}:</label>
	<span>{{i_item.Brand}}</span>
	</div>
	
<div class="product-Color">
	<label class="h5">{{sc_translate 'Color'}}:</label>
	<span>{{i_item.Color}}</span>
	</div>

On the ribbon menu, click Save and then press F9 to publish your changes.
In the Publish Site dialog box, in the Publishing section, click the Smart publish option, specify the publishing language and targets and then click Publish.

Add the new rendering variant to the partial design

To add the new rendering variant to the partial design:

In the Content Editor, go to /sitecore/Content/Sitecore/Storefront/Presentation/Partial Designs, right-click Default Main Product Page Content and click Experience Editor.
In the Experience Editor, click the Product Information rendering and, on the toolbar click Delete (X).
In the Toolbox, in the Page Content section, select the Page Content rendering and drag it onto the page above the stock status and, on the ribbon menu, click Save.
Click the Page Content rendering you just added and, from the Variant list, click Product Information Scriban. You now see the new fields.
On the ribbon, click Save and publish your changes.

Add logic to the Scriban template code

To add logic to the Scriban template code:

To add logic to the Scriban template so that fields that are empty (such as Item Number, Features, and Color) do not display, go to /sitecore/Content/Sitecore/Storefront/Presentation/Rendering Variants/Page Content/Product Information Scriban/Scriban and copy the following code into the Scriban template, replacing the previous code.

RequestResponse

{{ if o_pagemode.is_experience_editor }}
    <div class="product-name">
        <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="product-number">
        <label class="h5">{{ sc_translate 'Item Number' }}:</label>
        <span>Lorem ipsum dolor sit amet</span>
    </div>
    <div class="product-description">
        <label class="h5">{{ sc_translate 'Description' }}:</label>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
    </div>
    <div class="product-features">
        <label class="h5">{{ sc_translate 'Features' }}:</label>
        <span>Lorem ipsum dolor sit amet</span>
    </div>
    <div class="product-brand">
        <label class="h5">{{ sc_translate 'Brand' }}:</label>
        <span>Lorem ipsum dolor sit amet</span>
    </div>
    <div class="product-Color">
        <label class="h5">{{ sc_translate 'Colour' }}:</label>
        <span>Lorem ipsum dolor sit amet</span>
    </div>
{{ end }}

<div class="product-name">
    <h1>{{ i_item.DisplayName }}</h1>
</div>
{{ if i_item.ItemNumber | string.size > 0 }}
    <div class="product-number">
        <label class="h5">{{ sc_translate 'Item Number' }}:</label>
        <span>{{ i_item.ItemNumber }}</span>
    </div>
{{ end }}

{{ if i_item.Description | string.size > 0 }}
    <div class="product-description">
        <label class="h5">{{ sc_translate 'Description' }}:</label>
        <span>{{ i_item.Description }}</span>
    </div>
{{ end }}

{{ if i_item.Features | string.size > 0 }}
    <div class="product-features">
        <label class="h5">{{ sc_translate 'Features' }}:</label>
        <span>{{ i_item.Features }}</span>
    </div>
{{ end }}

{{ if i_item.Brand | string.size > 0 }}
    <div class="product-brand">
        <label class="h5">{{ sc_translate 'Brand' }}:</label>
        <span>{{ i_item.Brand }}</span>
    </div>
{{ end }}

{{ if i_item.Color | string.size > 0 }}
    <div class="product-Color">
        <label class="h5">{{ sc_translate 'Colour' }}:</label>
        <span>{{ i_item.Color }}</span>
    </div>
{{ end }}

On the ribbon menu, click Save, and then press F9 to publish your changes.

Now, on the live storefront site, the labels for which there is no content do not display.

Do you have some feedback for us?

If you have suggestions for improving this article,