Available: 12th June 2017
You can now display additional product images based on the options that are selected, including if you have more than one option group set up.
A further benefit of this change is that when buyers click on a product listing ad (PLA) it will automatically select the matching image, because options are fed into Google Merchant Centre.
Enabling The Change
This may require a small change to your design templates to allow it to work (see the full post on Freshdesk for template details), so there is a switch in site settings to enable this latest feature once you have had the templates changed, if necessary, by your design agency who may charge to implement the change.
The setting is in the Ecommerce tab > “Enable product images to be selected on options."
Using The New Feature
To use this new feature once the setting hs been changed, in Product Manager > select a product > Images & Video tab > Add new image
There is now the facility to associate the additional image to option(s) set up on that product.
Which Templates Need Changing
1. html/store/product_info.html.twig
This must be changed.
Old version
<a data-image-switch=".product-info-image" href="/thumbnail/500x500{{ image.src }}">
New Version
<a data-image-switch=".product-info-image" href="/thumbnail/500x500{{ image.src }}" data-matching-options="{{ image.option_requirements }}">
2. js/modules/product-info.js
Change lines 51 -> 129 (which will be in the responsive-base folder) and copy these in to the custom version.