How Can I Change Featured Image When I Click On Swatches in collection product list?

Shopify Discussion
1

Hello Members

Anyone can help me How Can I Change Featured Image When I Click On Swatches in collection product list??

I have used this article show below but jQuery is missing in this article
https://medium.com/geekculture/how-to-display-product-swatches-in-your-in-shopify-2-0-dawn-theme-600dc99153d3#:~:text=Firstly%20we%20need%20to%20display,of%20a%20FOR%20loop%20function

Preview link: https://www.ready-made.co/?_ab=0&_fd=0&_sc=1&preview_theme_id=135716471033
Collection product list: https://www.ready-made.co/collections/test-test
S****creenshot: Screenshot by Lightshot

Thanks

1 Like
2

That gist sample code is only a starting point you have a lot more work to do.

You need to at least make the urls to those related variant images available somewhere.

And the swatches themselves clickable as currently clicking them just directs to the product page.

Then you’d use javascript to swap images as swatches are clicked.

Again referencing your last post of yours I’ve seen , your seeking specific advanced solutions and implementations to very broad questions when you to need to be much narrower and step by step to respect other contributors time.

3

@Amit-RCT

oh sorry for that issue can you please add that code and send link again

1 Like
4

Thank you @KetanKumar

Now I have added this article code now for Down theme.
https://medium.com/geekculture/how-to-display-product-swatches-in-your-in-shopify-2-0-dawn-theme-600dc99153d3#:~:text=Firstly%20we%20need%20to%20display,of%20a%20FOR%20loop%20function

Preview link: https://www.ready-made.co/?_ab=0&_fd=0&_sc=1&preview_theme_id=135716471033
Collection product list: https://www.ready-made.co/collections/test-test
S****creenshot: https://prnt.sc/3Yo1sHFwAR72