Assign a preview image to each Shopify variant first. If you want the whole gallery to change with the selected color, check your theme’s settings, then use gallery grouping when you need more control.
Start with the product, not the gallery
Imagine a jacket sold in olive, navy and cream. Each color needs a front view, a back view and a close-up. The shopper who picks navy should be able to inspect navy without working through six photos of the other colors.
Before changing your theme or adding an app, sort the photos into those groups. Use the same sequence for each color. A consistent front, back and detail order makes the result easier to check and easier to maintain when new colors arrive.
What Shopify handles by default
Shopify lets you assign one image to each variant. Selecting the variant can bring that preview into view; the remaining images can still be part of the product’s shared media gallery. That is different from automatically filtering the entire gallery to one color.
For a product with only a few photos, the default behavior may be enough. Check the product on your own theme before adding another tool. Theme settings and custom code can also affect what customers see.
When a filtered gallery helps
Grouping is useful when each option has its own set of photos, or when customers have to scroll past unrelated colors to find the detail they need. Instant Variant Images groups media around the selected variant while using the theme’s gallery.
Keep useful shared content in mind. A size chart, care diagram or fit video might apply to every color. Decide whether it should stay visible in every group, then check the behavior in your chosen setup.
Separate products need a different decision
If olive and navy already have separate product pages, do not merge them just to create a color picker. First decide whether they should share a product record. Your inventory workflow, descriptions and merchandising may be good reasons to keep them separate.
Linked product swatches let a customer move between those pages. Gallery filtering changes the images on one product. These solve different problems, even though both can start with a color swatch.
Check the complete shopping path
Use a product with several colors and sizes for your first test. Check the initial page load as well as changes made after the shopper starts choosing. A good desktop result does not replace a phone check.
- Open a direct link to a non-default variant and confirm the correct photos appear.
- Change color, then size. Confirm the selected variant and visible gallery still agree.
- Open zoom, use the thumbnails, and play any product video.
- Check unavailable combinations and the image shown in the cart.
- Repeat on a phone, including back navigation to the product.