Having Attribute Images Swap out Main Product Image

Has anyone worked out how to setup Attribute Images so that if an attribute type is is selected in a dropdown or checkbox, the large product image is swapped out? As an example, attributes that are setup for ‘colours’ of a product.

Also, having these images as poplets so you can click through each to view and swap out the main image as well?

I am keen to know how easily these could be implemented.

Hi @SiroccoDigital. Well it wouldn’t exactly be easy, but not overly hard either. It is certainly possible as we have full access to all these layouts.
It would definitely be a job for Javascript though. Watching for an onChange event on the attribute selector, gathering the assigned image URL, and inserting/replacing it with the main product image.

If you’re using a javascript slider plugin for ‘poplet’ images, perhaps the onChange event would simply trigger the slider to the matching slide (depending on the Javascript plugin capabilities you’ve implemented).

In fact, you could dynamically add the attribute images into the main image slider (either with Liquid or Javascript) if they exist, so you don’t have to add the same images manually in 2 places.

@Adam.Wilson is this something you could script?

@SiroccoDigital yes. Is there any urgency to this? perhaps I can make something up for the community.
If there is a specific deadline or particular requirements though, you can PM or email me directly.