Display product variant images as color swatches

[Tobbin]

Hello.

i’m trying to modify my theme (Impulse) to display product variant image as color swatches (instead of a color png).

I modified the liquid file that contains the swatch code, but I’m stuck with an issue. A product with different color variants will display only the first product variant image on all swatches. See picture attached photo.

The variant count is correct, but it chooses the first variant image for all color swatches.

Product swatch liquid code (original): https://www.codepile.net/pile/ORjr0QRy

Product swatch liquid code (modified - with the issue): https://www.codepile.net/pile/zJGkKeJY

Any gurus out there who happens to have a quick fix for this?

[KetanKumar]

@Tobbin

https://community.shopify.com/c/Shopify-Design/Product-pages-Add-color-swatches-to-products/td-p/616427

[Tobbin]

Swatches are already integrated in the theme and works 100%.

What i’m trying to do is to use variant images as color swatches instead of plain colors.

[KetanKumar]

@Tobbin

ok great

you can just upload your swatch image in the asset folder, for example, your have the color red so please upload the image red.png or white so white.png make sure the same name image upload if long name color swatch so fine name is your-color.png

[Tobbin]

I have this feature in my other theme. Please see attached photo.

I’m trying to implement this in my new theme, but the first variant will display for all swatches within the product.

[KetanKumar]

@Tobbin

can you please give me store url?

[Tobbin]

The theme is not published yet. Any other way?

the modified and original code is attached though.

[KetanKumar]

@Tobbin

no rush give this theme preview url

[Tobbin]

Alright! Please check PM. @KetanKumar

[KetanKumar]

@Tobbin

did you upload swatch image on product admin with variant?

[lalawonz]

Where is the code? I also want to change