Color swatches change all images

Store Design
, , , , , ,

Topic summary

A Shopify store owner using Dawn theme 15.3.0 successfully implemented color swatch functionality to change the main product image, but needs all product images to update when selecting a color variant—currently, images from all color variants remain visible simultaneously.

Proposed Solutions:

  • Assign variant-specific images in Shopify admin and use alt text tags (e.g., “Green”, “Black”) to differentiate images by color
  • Modify theme files (main-product.liquid, product-gallery.liquid) to filter media based on selected variant
  • Implement JavaScript to listen for variant changes and show/hide images matching the selected color using data attributes

Current Status:

The original poster has updated image alt text as recommended but remains uncertain about which specific code changes to make and in which files. Multiple respondents offered direct assistance, and a YouTube tutorial link was shared that reportedly demonstrates this exact functionality. The discussion remains open with the store owner seeking hands-on guidance to complete the implementation.

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

On my webpage: https://onmyweights.com/collections/all-items/products/crewneck-t-shirt?variant=49906396266840

When I use the color switch, it only switches the main image. I need it to switch all images. So if I select the green color swatch I only want to see the green product. Currently all the other colors are also visible. I’ve managed to change only the main picture but I need all pictures to change.

I’m using Dawn 15.3.0

I’ve used this tutorial to get the main image to switch: https://www.youtube.com/watch?v=MfGv5uLy02A&t=1s&ab_channel=WebSensePro

Can anyone help me out?

2 Likes
2

Hey @ivankunne

If you’d like to display only the selected variant images then a lot of code changes will be required in your theme files, most likely in main-product.liquid and product-gallery.liquid.

If you’re not familiar with coding then I would highly recommend you to hire a Shopify developer in this case who can help out with this one. If you’d like to me to help then feel free to connect with me and I would be more than happy to give you a helping hand.

Best Regards,

Moeed

3

Hey @ivankunne ,

Great job getting the main product image to switch based on the selected color variant — that’s a solid first step! The issue you’re describing, where you’d like all the product images to update to show only the images related to the selected color (e.g., show only green product images when the green swatch is clicked), requires a bit more customization beyond what’s shown in the YouTube tutorial.

Here’s a clear solution you can implement:

  1. Assign images to each variant
  • In Shopify admin, for each variant (color), upload specific images related to that color. Shopify allows you to assign variant images directly in the product setup.
  1. Update the main-product.liquid (or main-product.liquid section) In your Dawn theme (15.3.0), open:
Online Store > Themes > Edit Code > Sections > main-product.liquid
  1. Enable Media Filtering by Variant Shopify has built-in functionality for this, but it’s disabled by default. Look for this block in your main-product.liquid or product.liquid file:
media_group_by = 'variant'

If it doesn’t exist, you’ll want to modify the media-gallery component to filter by variant. You can pass a data-group or data-media-id attribute and add a filter in JavaScript.

  1. Add JavaScript to Filter Media:
  • You’ll need to write JavaScript that listens to the variant change and shows only media items where data-color matches the selected color. Here’s a basic example:
document.addEventListener('variant:change', function(event) {
  const selectedColor = event.detail.variant.option1.toLowerCase(); // assuming color is Option1
  document.querySelectorAll('[data-color]').forEach(el => {
    if (el.dataset.color === selectedColor) {
      el.style.display = 'block';
    } else {
      el.style.display = 'none';
    }
  });
});

If you’d prefer hands-on help or a fully tailored implementation, I’d be happy to jump in and handle this for you. Let me know — I specialize in custom Shopify theme development and image filtering like this is a common enhancement.

Best,

Rajat

4

Hello Rajweb, thank you for your quick and clear reply.

I can’t seem to solve the problem even with your explanations. I can’t seem to be able to upload multiple images for the variant. After that I am alsom

unable to find the code you send.

Would you be able to help further?

5

The channel you set this up with also has a video for this to show only images of selected colour variant

6

Would you please be able to link that video? I’ve searched the account multiple times but can’t seem to find it

7

Hi @ivankunne ,

This is a complex request and it is difficult for someone to guide you in detail.

You will include the following steps:

  • 1: Add alt to images to differentiate images of each color.

  • 2: Add Liquid condition to show only images of each color.

  • 3: Change the JS code so it can get the images back when someone changes the variant.

I hope it helps!

8

@ivankunne ,

Thanks for getting back to me — no problem at all, this can be a bit tricky to set up at first.

Here’s how we can move forward:

  1. Variant Images:

Shopify only allows one image per variant by default, but we can work around that. Upload all images for each color (e.g., green front, back, close-up), then update the Alt Text of each image to include the color name like “Green” or “Black”. This will help with filtering them later using code.

  1. Theme Code Setup: If the code is hard to find or edit, feel free to reach out

I can guide you through the steps or request collaborator access if you’d prefer the setup to be done for you.

Best Regards,

Rajat

Shopify Developer | Custom themes & Apps

9

Thank you Rajat,

I’ve changed all the alt text of the images, i’ve found the theme code files but i am unsure what code to change and in which file, could you please assist me with this?

10

Please Feel Free to reach out me thanks!–happy to help!

11

Here you go

https://youtu.be/uDjviY12SiU?si=dDBuPJBn096iNvtI