Differentiating Scriban logic for Sitecore Experience Editor from what is rendered in the actual page

There is an excellent walkthrough regarding creating a Scriban template for SXA rendering variants in the Sitecore documentation here

As part of adding new logic through Scriban template that removes blank items in case the value is blank, here is the code given in the documentation:

As per the documentation, You are supposed to add this logic to the template field in the Product Information Scriban:

Now, if you check the product content item after setting the Product Information Scriban Variant, you should see this in the experience editor:

As you can see there is the dummy lorem  data as well as the actual data, this is because of logic that doesn't differentiate one for EE and the actual site. So, change this logic to include an else condition in the Scriban template and publish to check that EE shows just the lorem dummy data:

{{ 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>

{{ else }}

<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 }}

{{ end }}

After template changes:

EE:

Web Page (picks the actual data):