Product media gallery
The Media block shows the product's images, videos and 3D models. Choose from seven layouts, show only the selected color's media, tint the gallery with the selected swatch, and let customers open images full screen.
How to set it up
Step 1: Choose a layout
- Open Product information and click the Media block.
- Pick a Layout (1): single image with thumbnails, thumbnails beside the image, large image over tiles, collage of three, carousel, two-column grid, or one column.
- With thumbnails, set the Thumbnail size. Long thumbnail rails get arrows and a scrollbar; the Progress line (2) shows how far the rail has scrolled.
Step 2: Show each color's media
- Turn on Show only the selected variant's media.
- Choose how media are grouped: by Option value in alt text (an image whose alt text names a color, for example "Aria in Sand", belongs to it), or by the order of variant images.
- Media with
#allin their alt text always show.
Settings reference
Media
| Layout | Mobile always shows a swipeable slider. Options: Single image with thumbnails, Thumbnails beside the image, Large image over image tiles, Collage of three, Carousel, Two-column grid, One column, scroll through. |
|---|---|
| Thumbnail size | Slider. |
| Progress line | Desktop: the rail of the thumbnails and the Carousel line. Mobile: a line under the swipe. Options: Desktop and mobile, Desktop only, Mobile only, Off. |
| Show only the selected variant's media | Hides the media of the other variants. Media with #all in their alt text always show. |
| Group media by | Alt text: an image whose alt text names a colour (for example "Aria in Sand") belongs to it, in any order. Variant image order: each variant's image and the images after it belong to that variant. Options: Option value in alt text, Variant image order. |
| Option to group by | Used with alt text grouping. Separate several option names with commas. |
| Image ratio | Options: Adapt to first image, Square, Portrait, Landscape. |
| Image fit | Options: Show whole image, Fill the frame. |
| Tint the gallery with the selected color | Uses the color swatch of the selected variant. |
| Open images full screen on click | Turns this on or off. |
| Autoplay videos | Videos play muted when autoplay is on. |
How it works
- Phones always show a swipeable gallery.
- Tint the gallery with the selected color uses the color swatch of the selected variant.
- Videos play muted when autoplay is on.
Troubleshooting
All images still show when a color is selected.
Check the alt texts: each image's alt text must contain the option value, for example "Sand". Edit alt texts in the product's media in Shopify admin.