Active Variant Media
A single media slot that always shows the image or video for the currently selected variant.
Last updated
How to use
Connect
⛁ Butter Datato the product's Butter Data CMS fieldIf you're using
CMSas theSourceinstead ofShopify(see below), connect each Image variable to the CMS.Set your Variant Selector
Image TriggertoGalleryThat's it. It automatically shows whichever variant is currently selected — no wiring to the Variant Selector and no separate CMS setting to enable. The variant-to-media mapping comes from the product's own synced data.
It always shows the selected variant's media
This is a single media slot, not a gallery — it reads the customer's current selection and renders that variant's synced image or video, swapping instantly on selection.
If a variant doesn't have its own image assigned in Shopify, picking it won't change what's shown here — the binding has to exist in Shopify for the swap to work.
Hover: style zoom or swap to different media
Hover mode | What happens |
|---|---|
| No hover effect. |
| Scales and/or fades the current media on hover, with an optional cursor-follow so the zoom is anchored to the pointer. |
| Swaps to a different media item on hover, then swaps back on hover-out. |
In Swap Media mode, three controls shape the swap. Media chooses what's eligible: Next item in list takes the next media in the gallery's order, while Next variant match only swaps to media matching the selected variant — with Match Rule deciding whether it must match any or all of the selected options. Type can restrict the swap to images only or videos only. And the swap itself animates as Instant, Cross Fade, or Push (with a push Direction).
Click-to-zoom is separate from hover
Clicking the media has its own zoom, independent of the hover behavior above: set a Scale above 1 under Click, optionally have it Follow the cursor while held, and connect a custom cursor design for the zoomed state.
Media source and click events
Source chooses where the media comes from — Shopify serves it straight from Shopify's CDN via the product's Butter Data, CMS uses images connected directly to this component. Tap, Media Click, and BG Click event handlers let you open a lightbox or other overlay from a tap on the media, a click on the media, or a click on the surrounding empty space.