Static Variant Media

A fixed media item from the product gallery for gallery thumbnails or dynamic image grid.

Last updated

August 14, 2026

How to use

Connect ⛁ Butter Data to the product's Butter Data CMS field.
Set Display to Single and choose the media ↳ Slot number, or set it to All to render every media item automatically using the built-in ↳ Layout controls.
Set an Action under Interactions to decide what a click does, and whether it fires on click or on hover.
If using as a thumbnail, style the active and inactive looks so the current thumbnail is visually distinct.

A single fixed thumbnail, or a full auto-generated grid

`Display`	`Behavior`
`Single`	Shows one fixed media item, chosen by its position (`↳ Slot`) in the product's media.
`All`	Renders every media item in the gallery as a thumbnail strip or grid, laid out with the component's own `↳ Layout` controls (list or grid, columns, gap, padding).

Because it's index-based, reordering the product's media in Shopify changes what appears in a given Single slot — worth keeping in mind if you've hand-picked a specific thumbnail by number.

Turning a thumbnail into a click (or hover) trigger

`Action`	What it does
`Update Gallery`	Selecting this thumbnail changes the active variant/image shown elsewhere in the gallery (e.g. the Media Slideshow or Active Variant Media).
`Scroll to Image`	Scrolls the gallery to this item without changing the active selection.
`Zoom`	Zooms this thumbnail's own media in place, with its own `Scale`, cursor-follow, and custom cursor controls.
`None`	The thumbnail is purely visual — clicking it does nothing.

When Action is set to Update Gallery, you can also choose whether it fires On Click or On Hover — useful for a thumbnail strip that updates the hero image as the customer's cursor moves across it.

Active, inactive, and hover styling

Thumbnails carry three independently styled looks: an Inactive base look (overlay color, border, background, opacity, scale) for every thumbnail that isn't current, an Active look for the one matching the current gallery selection, and a Hover look layered on top while the pointer is over a thumbnail — so the current item, a hovered item, and everything else can all read differently at a glance.