UPDATE: I found my mistake, which might also be a bug on webflow, idk. The thing is: if you have more than one variant (color and size for example), you need to have a value in both drop downs in order for the image to change.
Simply put, any media from the variants doesn’t show up in any of the dropdowns for Dynamic Style Settings, Image Settings, etc. The plain text (Name) shows up, but nothing else. The Dynamic Style Settings source dropdown always shows “No fields to connect to…”
Seems like a bug because the Name from the variant shows up in the same spot.
No. I was told by Webflow Customer Support that that’s how it’s supposed to work.
“This should be the expected behavior. I have reached out to our e-commerce team to confirm. In the meantime, both variants must be changed to match the variant option for the image to change. You can change which image is shown on the product template page by marking the relevant variant as the default variant”
Thanks for the response @J.Gilman! I just stumbled across a solution. In the ‘Options’ element settings, we can allow for the default variant to be pre-selected.
So when the page loads, a size is automatically selected. Hence, when selecting a color, the image changes immediately.
Turns out I had multiple elements in my shop for different mobile devices. I had to go through all the copies of my site for different screen sizes and change this on every instance. Once I did that, the above advice worked.