Variations swatches shop page

Hello,

I see that in your Home Fashion demo page has a very cool feature that when you click on the swatches it changes product image:
https://demo.xtemos.com/basel/home-fashion/

For example product named “Eong leeve allover”. When you click red swatch, you get red image and when you click green you get green image. But still I don’t see that same green image in the product page here: https://demo.xtemos.com/basel/shop/man/long-eleeve-allover/

How can I do this in my store too? 🙂

Thanks in advance!

Hello,

This option is configured in the Attribute items. You need to add the color and image to each attribute item, enable showing images from the product variations in the Theme Settings > Shop > Swatches.

You can find the detailed step by step instruction here: https://xtemos.com/docs/basel/attribute-swatches/

Best Regards

Thanks!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

Hello,

I have tried doing this but I have a problem:

Let’s say I have black color attribute and I have 10 products that have this attribute. So 10 different products that should have different image for black attribute swatch on Shop page.

If I add image from Products -> Attributes -> Edit color -> “Image preview for this color” it shows up on all of those 10 products.

How can I use different image for those 10 different black product variations?

Hello,

You need to enable “Use images from product variations” in the Theme Settings > Shop > Attribute Swatches. https://prnt.sc/ujcdr6

Then add images to each product variation. More detailed instruction is here: https://xtemos.com/docs/basel/attribute-swatches/

Best Regards

Thanks but I have read that documentation and have that “Use images from product variations” enabled.

From where can I add 10 different images for black attribute swatch?

Hello,

You need to edit a variable product and insert images into each variation. https://gyazo.com/d612bb902d2e73e6918ba85421b2b0b5

Best Regards

Now I got it, Thanks again! 🙂

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts