Product Image Change upon Variant Selections

Hello fellow Webflow members

I am designing an e-commerce product page template for artwork. I am looking to have the main image change with the selection of the variant options of my product. I have size and frame options. Therefore I would like the image size to change with respect to its size options selected (A1, A2, A3) and a frame to appear with respect to the frame options selected (None, White, Black, Natural).

I have only seen a few posts within a few years on the same topic and received no responses.

One also provided an example of what they mean by having the product option/variant selections change the product image as seen by this product page: Men's Tree Runners | Sustainable Trainers | Wheat - Dark Beige Sole | Allbirds AU

I also do not like the current lightbox feature as I do not want to have 12 thumbnail photos (frame{4} x size{3} = 12 variants) visible to the viewer and I don’t want it to open that viewport generated by the current lightbox feature, but instead just change the main image on the page.
Again as seen in the above example from another e-commerce website.

Hopefully, someone can help and then I can link this to others who have also asked the same question without any help.


Here is also my Webflow design on the published sites.
[1] = published product page
[1]: Wood Feature LenticulArt - 3D Artwork

1 Like

Thanks for pointing it out. I’m facing the same problem. When using variant colors, it’s pulling images from “More images” instead of the main “variant image.” There should be an option to pull from either of those two. If I find an answer I’ll share here. It would be great if Webflow University could provide a tutorial to fix this.

1 Like

maybe there is a plug-in app that can offer a solution?
I need a solution

anyone :(
please help!

How is this still not resolved. Can someone please tell us how to use variant-specific images to update the product display page image!!