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 with both the published and read-only sites.
[1] = published product page
[2] = Read-Only site
[1]: LenticulArt
[2]: Webflow - LenticulArt