Link multiple option with the product image
This feature allows the product thumbnail image (or main product image) to change dynamically when customers select certain options (swatch, dropdown, color/image dropdown, radio buttons, etc.).
It supports “multiple option” selections — meaning that the image can change based on the combination of several option values (e.g., Color and Size, and Pattern).
How It Works / Setup Steps
Here are the steps and requirements to enable this functionality:
Enable the “Change product image/thumbnail on option selection” checkbox for the options in which you want image change behavior.
Edit the option set and enable “Image change option combination” for all the relevant options (i.e., those options that should trigger image changes).
Target Selector Setup:
Identify the theme’s product image thumbnail class/selector from your theme’s code (Liquid/CSS). You’ll need to supply that class/selector inside the app (“Product images parent selector”) so the app knows which HTML element to target for image swapping.Image Alt Text Matching:
If the image should change when one option is selected, the image’s alt text should exactly match that option name.
If it’s for a combination of multiple option values, then the alt text should be a string combining the option names, joined by underscores (_), in the prescribed format. For example: OptionName1_OptionName2_OptionName3. Then, when those options are selected together, the image with that alt text is shown.