Media Slideshow
A swipeable product media slideshow (images and video) that follows the product's selected variant.
Last updated
How to use
Place it on the product page and connect
⛁ Butter Datato the product's Butter Data CMS fieldIf your products have variants, make sure the Variant Selector's
Image Triggersare set toGalleryso the slideshow's media updates when the customer picks a variant.Use
Visibility(and, if needed,Match Rule) to limit the slideshow to the selected variant's own media, if you don't want the full gallery shown at all times.
Where media comes from
The slideshow shows the product's synced media — every image and video from Shopify, in the same order as your Shopify product gallery, with video poster frames included automatically.
Source controls where the files themselves load from: Shopify uses your Shopify-hosted images directly (no re-uploading), while CMS uses images connected to this component's own image controls instead.
Following the selected variant
|
|
|---|---|
| Shows every synced media item, regardless of the selected variant. |
| Hides any media whose alt text doesn't match the selected options, using |
Turn on Retain Media # to keep the customer's gallery position when they change variants — slide 3 stays slide 3 — instead of resetting to the first item; if the new variant has fewer slides than the position they were on, it falls back to the last available one.
Drag, scroll, swipe, and click-to-zoom
Independently control how customers move through the slideshow with Draggable (mouse/trackpad drag), Scrollable (mouse/trackpad scroll), and Swipeable (touch swipe) — turn any of them off to restrict navigation to the arrows and dots.
Clicking the active media can also zoom it in place: set a Scale above 1 under Click, and optionally have the zoom Follow the cursor while held.
Turn on a custom ⦿ Cursor under Style to replace the pointer while hovering the slideshow, and a separate custom cursor for the zoomed state.
Tap, Media Click, and BG Click event handlers let you wire lightboxes or other overlays to a tap on the media, a click on the media, or a click on the empty space around it.
Video playback
Videos play inline with a poster frame, and follow Auto-play and Loop controls under Video — both default on.
Built-in dot indicators
The slideshow can render its own position dots without a separate Media Dots component — toggle Dots → Show, then style the Active and Inactive dot size, radius, and color, plus the inset, gap, padding, and backdrop for the strip itself.