Group product media by color

When a product comes in several colors, its gallery can hold a lot of photos. Zalify Theme groups them so the product page shows only the media for the color the shopper has selected, and swaps the set instantly when they pick another color. The color option's swatches also render as image thumbnails, pulled from each variant's photo.

This happens automatically — there is no setting to switch on. The theme groups media from two things you already manage in the Shopify admin: each color's variant image and the order of the gallery.

How grouping works

The theme looks at your product options and picks the first one whose variants have distinct images — almost always Color. That becomes the "media group" option. Then:

• Each color's variant image marks the start of that color's block. Every gallery photo from that image up to the next color's variant image belongs to that color.
• Photos placed before the first color's image are shared. They show for every color — good for a size chart, a lifestyle banner, or a fabric close-up that applies across the range.
• Selecting a color shows its block plus the shared photos, and hides the rest.

So grouping is decided entirely by where each photo sits in the gallery, anchored on the variant images you assign. You never type a code anywhere.

Set it up

1. Give every color a variant image

In the Shopify admin, open the product and assign an image to each color variant (in the Variants section, click a color and set its image). This image is what the theme uses as the anchor for that color's block, and what shows as the color's thumbnail in the picker.

A color with no variant image simply won't have a block — the theme falls back to showing all media when that color is selected.

2. Order the gallery in color blocks

In the product's Media area, drag the photos into this order:

1. Shared photos first — anything that should show for every color (size chart, brand banner). Optional; skip if you have none.
2. Then one contiguous run per color, each starting with that color's variant image, followed by the rest of that color's photos.

For example, a shirt in Mocha and Off-white:

Selecting Mocha shows photos 1–4; selecting Off-white shows photos 1, 5, and 6.

Things to know

• Keep each color's photos together. A color's block runs until the next color's variant image, so a Mocha photo dropped in the middle of the Off-white run will be counted as Off-white. Fix grouping by reordering the gallery, not by editing anything else.
• Trailing photos join the last color. Any photo placed after the final color's block is attributed to that last color. Put shared photos at the front, never the end.
• No variant images = no grouping. If none of the option's colors have a variant image, the theme shows the whole gallery for every selection — the normal Shopify behavior.
• Videos and 3D models group too. Grouping is by position, so any media type in a color's run is grouped with it.

Related

• Product section and product page blocks — the rest of the product page's media and layout settings
• Product card settings — how color swatches appear on collection and card grids
• Add product media and assign images to variants (Shopify)