Switch the image According to Selected Color in PDP page
Scenario
Some Website has matrix option with colors. Image is added in the gallery under the main image, based on that.
When we click on each color the image need to switched and image with that color should be displayed.
Solution
checked All the website Setup As Shown below
To set the image domain and image folder:
Go to Commerce > Websites > Website List.
Click Edit next to your website name.
Click the Images subtab.
In the Image Domain field, select the domain you want to use.
In the Image Folder field, select the path to the images folder (Web Site Hosting Files : Live Hosting Files : images).
Click Save.
To define the file name format:
Go to Commerce > Websites > Website List.
Click Edit next to your website name.
Click the Images subtab.
Select an option on the Item Identifier dropdown list.
Enter a character in the Item ID Delimiter field.
Enter a character in the Structure Delimiter field.
Click Save.
To add field to field sets:
Go to Commerce > Websites > Website List.
Click Edit next to your website name.
Go to the Field Sets subtab.
Click on the details field set and edit the Fields Included in Field Set column.
In the Field Set popup window, add a new row. Select Item Images (Detail) from the dropdown list.
Click Add.
Click Submit.
Click OK.
Repeat Steps 4 through 8 for the search field set.
Click Save.
To configure multi-image options:
Go to Commerce > Websites > Configuration.
Select the website and domain you want to configure.
Go to the Shopping Catalog subtab and Multi-Image Option sublist.
In the Multi-Image Option field, enter the ID of the custom transaction item option to trigger the multi-image option. You can add one or more options to make them available on your website.
Click Add after entering each ID.
Click Save.
If the Image name is Not in a Format as Shown in File name Format
Open Item Record
Click on web store
Click on Associate Image Edit any image
Change the file name According to Format
Example:- NKSK_Red-011.jpg
NKSK_Blue-012.jpg
NKSK_Dark Green-0123.jpg
Save the file
Do cache invalidation
Refresh webpage and Check Now image will change According to selected Color