---
title: "Walkthrough: Creating a new Scriban template"
slug: "walkthrough--creating-a-new-scriban-template"
abstract: "Example of how to create a new Product Information Scriban template."
---
# Walkthrough: Creating a new Scriban template

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.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/101/sitecore-experience-commerce/images/ProductinformationBefore.png)

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.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/101/sitecore-experience-commerce/images/ProductInformationFinal.png)

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](https://www.youtube.com/watch?v=HgwnRTYtTXs) channel.

<details>
<summary><h2>Create a new Scriban template</h2></summary>

To create a new Scriban template:

1. In the Content Editor, go to *sitecore\\Content\\<tenant>\\<site>\\Presentation\\Rendering Variants*.
2. Right-click **Page Content**, click **Insert, Variant Definition** and, in the **Message** dialog box, enter *Product Information Scriban* and click **OK**.
3. 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).
4. On the **Content** tab, in the **VariantDetails** section, in the **Template** field, enter the following code.

    ```coffee
    <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>
    ```

5. On the ribbon menu, click **Save** and then press *F9* to publish your changes.
6. 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**.

</details>

<details>
<summary><h2>Add the new rendering variant to the partial design</h2></summary>

To add the new rendering variant to the partial design:

1. In the Content Editor, go to */sitecore/Content/Sitecore/Storefront/Presentation/Partial Designs*, right-click **Default Main Product Page Content** and click **Experience Editor**.
2. In the Experience Editor, click the Product Information rendering and, on the toolbar click Delete (X).

    ![Product Information rendering variant selected and Page Content dialog box displayed.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/101/sitecore-experience-commerce/images/ProductInformationDelete.png)

3. 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**.
4. Click the Page Content rendering you just added and, from the **Variant** list, click **Product Information Scriban**. You now see the new fields.

    ![Product Information section in the Experience Editor with changes.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/101/sitecore-experience-commerce/images/ProductInformationNewFields.png)

5. On the ribbon, click **Save** and publish your changes.

    ![Product Information section on the live storefront with changes.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/101/sitecore-experience-commerce/images/ProductInformationDetails.png)

</details>

<details>
<summary><h2>Add logic to the Scriban template code</h2></summary>

To add logic to the Scriban template code:

1. 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.

    ```coffee
    {{ 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 }}
    ```

2. 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.

</details>