Shoppable Media Slider & Product Hotspots

Interactive, clickable image and video sections — a shoppable slider, or hotspots on a photo.

Turn a single image or a slider into something shoppers can click into — a scrollable carousel where each slide sells a product directly, or pinned hotspots on a photo.

• Shoppable Media Slider — a carousel where each slide links to a product or tells part of a story.
• Product Hotspots — one image with clickable pins layered on top, each linking to a product.

---

Shoppable Media Slider

A carousel where each slide is either a Product block (product + optional custom media override) or a Text block (media + numeric badge + title + rich text).

How to add

1. In Theme Editor, click Add section.
2. Select Shoppable Media Slider.
3. Add Product and/or Text blocks to build the slides.

Good to know

• This is the one video section in the theme where pause and mute controls default to on — everywhere else (Video Banner, Product with Text, Featured Collection with Media) they default off.
• The default 9:16 ratio is built for portrait/mobile-style video content, not wide banner footage.

Customization ideas

• Mix Product and Text blocks in one slider to tell a short story — a Text block setting up a use case, followed by the Product blocks that solve it.

Settings

Settings

Setting	What it does
Product blocks	Product + optional custom image/video override
Text blocks	Media + numeric badge + title + rich text — for a non-product slide (a step, a stat, a callout)
Media ratio	Defaults to 9:16 — portrait, mobile-first
Enable pause / Enable mute	Both default to on — the opposite of most other video sections in the theme, which default these off

---

Product Hotspots

One image (with separate desktop/mobile versions) with clickable pins layered on top, each linking to a product.

How to add

1. In Theme Editor, click Add section.
2. Select Product Hotspots.
3. Upload desktop and mobile images, then add up to 8 hotspot blocks.

Good to know

• Hotspot position is set independently for desktop and mobile per block — a pin placed well on desktop can land somewhere odd on mobile if you don't check both.
• Maximum 8 hotspot blocks per section.

Customization ideas

• Use a lifestyle or outfit photo with 3–5 hotspots as a "shop the look" section instead of a plain product grid.

Settings

Settings

Setting	What it does
Desktop image / Mobile image	Separate images per device
Product Hotspot blocks	Up to 8 — each with independent desktop and mobile position (5–95% horizontal/vertical)
Hotspot color	Per-block, plus a color scheme per hotspot
Transition effect	Slide, fade, flip, coverflow, cards, or creative (Swiper-based)
Transition duration	Speed of the transition effect
Top on mobile	Controls whether the slider or the hotspots render first on mobile

---

Best practices

• Use Product Hotspots for a single strong lifestyle photo; use Shoppable Media Slider when you have several products or a short story to tell across multiple slides.

Related

• Featured products & collections
• Sticky collection grid