Carousels shape how your products are explored. The right sequence can highlight variety, show different angles, and guide shoppers through multiple items in one compact space. This guide shows how to build the Carousel and create engaging displays that help increase interaction and conversions.
Use Cases
Introducing a new seasonal collection
Imagine your homepage featuring a fresh spring or holiday collection. A carousel lets you spotlight multiple hero products from that drop in one clean, scrollable row. Shoppers can quickly browse the highlights without leaving the homepage, giving them an instant sense of what’s new and exciting.
Featuring customer review videos
Customer review videos build instant trust and give shoppers a real sense of how your products look, feel, and perform. A carousel lets you showcase multiple reviews side by side, each one highlighting a different customer, product, or experience. This creates a dynamic, credibility-boosting section on your homepage that visitors can browse quickly, helping them feel more confident and ready to buy.
Setup
Copy and paste the code below where you want your homepage carousel to be rendered:
{% if section.settings.template-type == 'template-stories' %}
{% assign min_height = 140 %}
{% else %}
{% assign min_height = section.settings.min-height %}
{% endif %}
<div class="whatmore-base" style="position: relative; overflow: hidden; min-height:{{ min_height }}px">
<div id="whatmoreShopId" data-wh="{{ shop.id }}"> </div>
{%- if section.settings.heading -%}
<div id="whatmoreHeading" data-wh="{{ section.settings.heading }}"> </div>
{%- endif -%}
{%- 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.title-font-size -%}
<div id="whatmoreTitleFontSize" data-wh="{{ section.settings.title-font-size }}"> </div>
{%- endif -%}
{%- if section.settings.landscape-padding -%}
<div id="whatmoreLandscapePadding" data-wh="{{ section.settings.landscape-padding }}"> </div>
{%- endif -%}
{%- if section.settings.top-bottom-padding -%}
<div id="whatmoreTopBottomPadding" data-wh="{{ section.settings.top-bottom-padding }}"> </div>
{%- endif -%}
{%- if section.settings.scroll-video-tile-size -%}
<div id="whatmoreVideoTileSize" data-wh="{{ section.settings.scroll-video-tile-size }}"> </div>
{%- endif -%}
{%- if section.settings.scroll-video-tile-size-portrait -%}
<div id="whatmoreVideoTileSizePortrait" data-wh="{{ section.settings.scroll-video-tile-size-portrait }}"> </div>
{%- endif -%}
{%- if section.settings.title-font -%}
{% assign title_font = section.settings.title-font %}
<div id="whatmoreTitleFont" data-wh={{title_font}}> </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.show-views -%}
<div id="whatmoreShowViews" data-wh="{{ section.settings.show-views }}"> </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="carousel"></div>
<div class="whatmore-render-root"></div>
</div>
{% schema %}
{
"name": "Whatmore Carousel",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Watch and Buy"
},
{
"type": "select",
"id": "template-type",
"label": "Tile Type",
"options": [
{
"value": "template-a",
"label": "Video-Card"
},
{
"value": "template-feed-a",
"label": "Video-Card feed"
},
{
"value": "template-a-1",
"label": "Video-Card with see-more option."
},
{
"value": "template-b",
"label": "Product-Video-Card"
},
{
"value": "template-c",
"label": "Grid Style - Theme Border"
},
{
"value": "template-d",
"label": "Grid Style - No Border"
},
{
"value": "template-e",
"label": "Single Tile"
},
{
"value": "template-f",
"label": "Video-card with product-info"
},
{
"value": "template-g",
"label": "Video-card with text-overlay"
},
{
"value": "template-h",
"label": "Focussed-video-card with product-info"
},
{
"value": "template-stories",
"label": "Video-stories"
}
],
"default": "template-f"
},
{
"type": "range",
"id": "title-font-size",
"min": 8,
"max": 101,
"step": 1,
"unit": "px",
"label": "Heading font size - Landscape (Desktop)",
"default": 40
},
{
"type": "range",
"id": "title-font-size-portrait",
"min": 8,
"max": 101,
"step": 1,
"unit": "px",
"label": "Heading Font size - Portrait (Mobile)",
"default": 24
},
{
"type": "number",
"id": "landscape-padding",
"label": "Horizontal padding in Desktop/Laptop",
"default": 40
},
{
"type": "number",
"id": "top-bottom-padding",
"label": "Vertical padding",
"default": 20
},
{
"type": "range",
"id": "scroll-video-tile-size",
"label": "Scroll-Video-Tile size ( in percentage ) ",
"default": 80,
"step": 5,
"min": 40,
"max": 200
},
{
"type": "range",
"id": "scroll-video-tile-size-portrait",
"label": "Scroll-Video-Tile size mobile ( in percentage ) ",
"default": 80,
"step": 5,
"min": 40,
"max": 200
},
{
"type": "range",
"id": "min-height",
"label": "Minimum Height ( in pixels )",
"default": 380,
"step": 10,
"min": 0,
"max": 1000
}
],
"presets": [
{
"name": "Whatmore Carousel"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}