Product Page - Changing Display Photo depending on Colour Selection

[bespoke]

I have a product page which displays a list of colours pulled from the database.

I would like to change the photo of the preview image to display the corresponding colour t-shirt

Eg click red - preview image is red.

Currently the colour selected is a state.

Thanks

[cmarchan]

@bespoke

Explore the contains and is in operators

[bespoke]

I am familiar with both - however how do I assign a ‘red’ value t the red t shirt picture ? That seems problematic

[williamtisdale]

Put conditionals on the image to change the source of the image based on the color state. Or make the image source dynamic based on the color state.

[williamtisdale]

Are the images saved in your database? If so, give them an attribute that is a color and match off of that. If not, then the conditionals will do what you need but it will be more work.

I would probably make an Option Set of all possible color options. Then give each image an attribute that has a type of the color option set and make the custom state on the page off the same option set. That way the source for the image can be a search for the image where the color attribute equals the custom states color option.