Variant media groups

When a product has many colors, showing every image at once makes the gallery long. Turn on Show only selected variant media in the Media block and the gallery shows the images shared by all variants plus the group of the variant the shopper selected. It works on the product page, Featured product and Quick view.

How to set it up

Step 1: Turn it on

1. In the theme editor, open a product and click the Media block of the Product section.
2. Turn on Show only selected variant media (1).
3. Choose Group variant media by: Variant image order or Color value in alt text.

Step 2: Option A: group by image order

1. In Shopify Admin, open the product and assign the first image of each group to its variants.
2. Place each group's other images, videos or 3D models right after that image. A group ends where the next variant image starts.
3. Images before the first variant image are shared by every variant.

Step 3: Option B: group by color in alt text

1. Add the color name to each image's alt text, for example Side view - Sand or Sand lifestyle.
2. The color names come from the option set in Theme settings > Variants & swatches > Color options name.
3. Images whose alt text names no color are shared by every color.

How it works

• The first page load already shows only the selected variant's media, including links with ?variant=, so there is no flash of other images.
• Variants that share the same featured image share a group. A variant with no images keeps the current images.
• When one color name contains another (Blue and Light Blue), the longer name is matched first. Matching ignores capitals.
• Products without a color option, or whose alt text names no color, fall back to image order.

Related

• Product page
• Variants and swatches
• Quick view