Banners serve as your homepage hero, an instantly engaging video that captures attention the moment someone lands on your site. This guide walks you through building the Banner widget.
Use Cases
Homepage welcome / brand intro video
Imagine a shopper landing on your site for the first time. A Banner lets you greet them with a hero-style video that instantly sets the mood: your brand’s colours, energy, vibe, and personality all come through in the first few seconds. A quick “here’s who we are,” making the store feel more immersive and helping customers connect emotionally before they start exploring.
Sales and promotions
Think of a major sale or seasonal offer you want every shopper to notice. A banner turns that moment into a bold, high-impact visual right at the top of your homepage. The video can show the theme of the campaign, highlight bestsellers, or tease what’s on discount. It creates instant visibility and excitement, guiding customers straight into the promotion the moment they arrive.
Setup
Copy and paste the code below where you want your banner to be rendered:
{% assign min_height = section.settings.min-height %}
<div class="whatmore-base" style="min-height:{{ min_height }}px">
<div id="whatmoreShopId" data-wh="{{ shop.id }}"> </div>
{%- if section.settings.banner-video-tile-size -%}
<div id="whatmoreBannerVideoTileSize" data-wh="{{ section.settings.banner-video-tile-size }}"> </div>
{%- endif -%}
{%- if section.settings.template-type -%}
<div class="whatmore-template-type" data-wh="{{ section.settings.template-type }}"> </div>
{%- endif -%}
{%- if section.settings.ui-theme -%}
<div id="whatmoreUITheme" data-wh="{{ section.settings.ui-theme }}"> </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="banner"></div>
<div class="whatmore-render-root"></div>
</div>
{% schema %}
{
"name": "Whatmore Banners",
"tag": "section",
"class": "section",
"settings": [
{
"type": "select",
"id": "template-type",
"label": "Tile Type",
"options": [
{
"value": "template-banner-a",
"label": "Banner Video - Plain"
}
],
"default": "template-banner-a"
},
{
"label": "UI Theme",
"id": "ui-theme",
"type": "select",
"options": [
{
"value": "round",
"label": "Rounded Corners"
},
{
"value": "square",
"label": "Squared Corners"
}
],
"default": "round"
},
{
"type": "range",
"id": "banner-video-tile-size",
"label": "Banner Video Size ( in percentage ) ",
"default": 80,
"step": 5,
"min": 10,
"max": 100
},
{
"type": "range",
"id": "min-height",
"label": "Minimum Height ( in pixels )",
"default": 450,
"step": 10,
"min": 100,
"max": 1000
}
],
"presets": [
{
"name": "Whatmore Banners"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}