Collections are curated, collage-style layouts that showcase multiple shoppable videos in one visual grid. They let you group related content, like a product line, theme, or campaign, so shoppers can explore several videos at once and tap into the ones that catch their eye. It’s an engaging way to present a fuller story, highlight a range of items, and drive discovery through a visually rich, shoppable experience.
Use Cases
Lookbooks & Outfit Inspiration
Use Collections to create a visually rich, shoppable lookbook. By grouping multiple styling or outfit videos into a collage, shoppers can browse full looks, explore different ways to wear key pieces, and tap directly into the items they love.
Creator or Influencer Picks
Showcase curated videos from creators or brand ambassadors in a single, shoppable collage. This lets shoppers explore recommendations from trusted voices, discover new products through authentic perspectives, and shop directly from the creator’s featured content.
Setup
Copy and paste the code below where you want your collection to be rendered:
{% if section.settings.template-type == 'template-collections-stories' %}
{% assign min_height = 130 %}
{% else %}
{% assign min_height = section.settings.min-height %}
{% endif %}
<div class="whatmore-base" style="min-height: {{ min_height }}px;">
<div id="whatmoreShopId" data-wh="{{ shop.id }}"> </div>
<div id="whatmoreCollectionId" data-wh="{{ collection.id }}"> </div>
<div id="whatmorePageId" data-wh="{{ page.id }}"> </div>
{%- if section.settings.collectionHeading -%}
<div id="whatmoreCollectionHeading" data-wh="{{ section.settings.collectionHeading }}"> </div>
{%- endif -%}
{%- if section.settings.color-secondary -%}
<div id="whatmoreSecondaryColor" data-wh="{{ section.settings.color-secondary }}"> </div>
{%- endif -%}
{%- if section.settings.tile-size -%}
<div id="whatmoreCollectionsTileSize" data-wh="{{ section.settings.tile-size }}"> </div>
{%- endif -%}
{%- if section.settings.tile-size -%}
<div id="whatmoreCollectionsTileSizePortrait" data-wh="{{ section.settings.tile-size-portrait }}"> </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.ui-theme -%}
<div id="whatmoreUITheme" data-wh="{{ section.settings.ui-theme }}"> </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="collection"></div>
<div class="whatmore-render-root"></div>
</div>
{% schema %}
{
"name": "Whatmore Collections",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "collectionHeading",
"label": "Heading",
"default": "W"
},
{
"type": "select",
"id": "template-type",
"label": "Tile Type",
"options": [
{
"value": "template-collections-a",
"label": "Grid Style - Theme Border"
},
{
"value": "template-collections-b",
"label": "Grid Style - No Border"
},
{
"value": "template-collections-c",
"label": "Single Tile"
},
{
"value": "template-collections-d",
"label": "Carousel Style - Product-Video-Card"
},
{
"value": "template-collections-e",
"label": "Carousel Style - Video-Card"
},
{
"value": "template-collections-stories",
"label": "Stories Style - Video-tile"
},
{
"value": "template-collections-f",
"label": "Carousel Style - Video-tile-product-info"
}
],
"default": "template-collections-b"
},
{
"type": "range",
"id": "tile-size",
"label": "Tile size ( in percentage ) ",
"default": 60,
"step": 5,
"min": 20,
"max": 100
},
{
"type": "range",
"id": "tile-size-portrait",
"label": "Tile size mobile ( in percentage ) ",
"default": 60,
"step": 5,
"min": 20,
"max": 100
},
{
"type": "range",
"id": "min-height",
"label": "Minimum Height ( in pixels )",
"default": 250,
"step": 10,
"min": 60,
"max": 1000
}
],
"presets": [
{
"name": "Whatmore Collections"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}