How do I assign colour variant to product image for that specific colour on dawn theme 15.0 - code

Shopify Discussion

Topic summary

A Shopify store owner using Dawn theme 15.0 seeks to link color variant selections to specific product images, so clicking a color (e.g., orange) displays only that color’s images.

Two Main Solutions Emerged:

  1. No-Code Method: Assign featured images to variants in product admin and enable “Pick an option” in the theme customizer. Limitation: shows only one image per variant, not multiple images for the same color.

  2. Code-Based Solution: Requires three steps:

    • Add alt text to product images matching variant color names exactly
    • Replace code in product-media-gallery.liquid file
    • Add JavaScript to main-product.js

Key Challenge: Users want all product images visible initially, but filtered to show only relevant color images when a variant is selected. The default behavior shows either all images or only single variant images.

Current Status: Mixed results reported. Some users successfully implemented the code solution, while others (particularly on Trade theme) report it’s not working. The discussion remains active with ongoing troubleshooting, particularly around displaying multiple images per color variant while maintaining proper filtering functionality.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
6

@Skye25 See you cannot add more than one image for a single variant. So for like a tshirt of size small and color red you can add 1 image as is shown in the image below

Shadab_dev_0-1719536172022.png
Shadab_dev_0-1719536172022.png956×363 25.9 KB

But here in the media section inside the product admin you have all the images shown for all the variants.

Shadab_dev_3-1719536586751.png
Shadab_dev_3-1719536586751.png629×256 69.4 KB

So do you want a feature where suppose you select a white shoe so all the available white shoes are shown, if you choose red all shoes of red color to be shown in the products. Let me know if i am getting this right? for example

Shadab_dev_1-1719536421719.png
Shadab_dev_1-1719536421719.png1151×496 231 KB

Shadab_dev_2-1719536448980.png
Shadab_dev_2-1719536448980.png1234×487 68.7 KB