Display product variant images as color swatches

Tobbin
Tourist
5 0 1

B2D696E1-A38D-49EF-ADD3-80E1C4259240.jpeg

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
Shopify Partner
17242 1868 6450

@Tobbin 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Tobbin
Tourist
5 0 1

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. 

0 Likes
KetanKumar
Shopify Partner
17242 1868 6450

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Tobbin
Tourist
5 0 1

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. 

4031AEC0-A484-442F-8625-9208FA0F96EE.jpeg

0 Likes
KetanKumar
Shopify Partner
17242 1868 6450

@Tobbin 

can you please give me store url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Tobbin
Tourist
5 0 1

The theme is not published yet. Any other way? 

the modified and original code is attached though.

0 Likes
KetanKumar
Shopify Partner
17242 1868 6450

@Tobbin 

no rush give this theme preview url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Tobbin
Tourist
5 0 1

Alright! Please check PM. @KetanKumar 

0 Likes
KetanKumar
Shopify Partner
17242 1868 6450

@Tobbin 

did you upload swatch image on product admin with variant?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes