How can I change the main product image on click?

So I’m building out a product page, and I have the main display image which is being pulled form the ‘Main image’ field in the CMS, then below it I have thumbails of alternate images, which is a collection list being pulled from the “Alternate images” field in the CMS.

My question is, how can I change the main image to one of the alternate images once clicked? Just like any other product page.


Here is my public share link: https://preview.webflow.com/preview/da-jewelry?utm_medium=preview_link&utm_source=designer&utm_content=da-jewelry&preview=60d2a9943f7b712501405b2f6d7d635a&pageId=5e1ceed3bdf5189384dc5252&itemId=5e1cfd4f6a38e277ca92259f&mode=preview

I’m thinking a slider would be easiest for this task.image
Set the mask to 600x600px image
I (me) would set to auto-play with a nice slowish cross fade.

1 Like