Video Stories help your brand stand out. They showcase products in motion, highlight new drops, and deliver fast, high-impact visuals customers already love. This guide explains how to build the Stories widget, and use short-form storytelling to boost engagement and conversions.
Use Cases
Showcasing a new skincare routine
Imagine you’re promoting a three-step skincare routine. Stories let you break the process into clear, swipeable clips: cleanser, serum, moisturiser. Each step feels natural and digestible, showing texture, application, and results in sequence. This helps customers understand the routine visually and makes the product set feel easy and enjoyable to use.
Styling a complete outfit
If you're selling fashion pieces that work well together, Stories can show the outfit being built one item at a time. Start with the base look, then add a jacket, accessories, or shoes in each consecutive story. This step-by-step reveal helps customers see how everything pairs together and encourages them to discover multiple items in one viewing path.
Setup
Copy and paste the code below where you want your Video Stories to be rendered:
<div class="whatmore-base" style="position: relative; min-height: 120px;">
<div id="whatmoreShopId" data-wh="{{ shop.id }}"> </div>
{%- if section.settings.color-primary -%}
<div id="whatmorePrimaryColor" data-wh="{{ section.settings.color-primary }}"> </div>
{%- endif -%}
{%- if section.settings.color-secondary -%}
<div id="whatmoreSecondaryColor" data-wh="{{ section.settings.color-secondary }}"> </div>
{%- endif -%}
{%- if section.settings.stories-top-bottom-padding -%}
<div id="whatmoreStoriesTopBottomPadding" data-wh="{{ section.settings.stories-top-bottom-padding }}"> </div>
{%- endif -%}
{%- if section.settings.story-tile-size -%}
<div id="whatmoreStoryTileSize" data-wh="{{ section.settings.story-tile-size }}"> </div>
{%- endif -%}
{%- if section.settings.story-tile-size-desktop -%}
<div id="whatmoreStoryTileSizeDesktop" data-wh="{{ section.settings.story-tile-size-desktop }}"> </div>
{%- endif -%}
{%- if section.settings.primary-font -%}
{% assign primary_font = section.settings.primary-font %}
<div id="whatmorePrimaryFont" data-wh={{primary_font}}> </div>
{%- endif -%}
{%- if section.settings.template-type -%}
<div class="whatmore-template-type" data-wh="{{ section.settings.template-type }}"> </div>
{%- endif -%}
{% if request.design_mode %}
<div id="whatmoreIsInDesignMode" data-wh='true'> </div>
{% else %}
<div id="whatmoreIsInDesignMode" data-wh='false'> </div>
{% endif %}
<div class="whatmore-widget" data-wh="stories"></div>
<div class="whatmore-render-root"></div>
</div>
{% schema %}
{
"name": "Whatmore Stories",
"tag": "section",
"class": "section",
"settings": [
{
"type": "select",
"id": "template-type",
"label": "Tile Type",
"options": [
{
"value": "template-stories-a",
"label": "Stories-Circle"
},
{
"value": "template-stories-b",
"label": "Stories-Square"
}
],
"default": "template-stories-a"
},
{
"type": "number",
"id": "stories-top-bottom-padding",
"label": "Stories vertical padding",
"default": 0
},
{
"type": "range",
"id": "story-tile-size",
"label": "Mobile - story tile size ( in percentage ) ",
"default": 45,
"step": 5,
"min": 20,
"max": 100
},
{
"type": "range",
"id": "story-tile-size-desktop",
"label": "Desktop - story tile size ( in percentage ) ",
"default": 45,
"step": 5,
"min": 20,
"max": 100
}
],
"presets": [
{
"name": "Whatmore Stories"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}