For ages I struggled to figure out how to get images on the product page to change according to which variant is selected - Webflow support on the forums I searched left much to be desired, with so many posts with the same issues having no replies…
However, I think I’ve figured it out! For those of you who have struggled endlessly, I hope this helps.
-
In your products CMS, you need to have added different variants each with at least a main image, and more if you want.
-
Create a Collection List Wrapper (CLW). Link the CLW to ‘More Images (Multi-image)’ under the ‘Product Fields’ subheading.
-
Drop a Lightbox Link inside the CLW ‘Collection’ element on the page. You cannot do this by adding it in the navigator, and you only need to add it to ONE of the Collection elements if multiple show up. You also cannot add the lightbox element to the CLW before you link the CLW to a collection.
-
In BOTH the Lightbox Link element and the Image element inside it, tick ‘Get media from products’ and ‘Get image from products’. In the dropdown menu, select ‘More images’ under the Media heading (image below).
-
Test your site on a published website - I’ve never had it work in the preview, but always on the published site.
-
Style accordingly.
Example site with element overview below, also Lightbox element settings. Let me know if you need any clarification!
