For SCS products that have a level 1 option based on colour, there is functionality to allow customers to switch the image of the product based on the SCS option selected.
Product Setup
When setting up the product in Khaos Control you will need to add an image for each of the SCS level 1 options, following the normal requirements for images on KCW.
For each image you will need to enter a "Name" as "scs-" followed by the SCS level 1 option the image is for.
For example:
This example has an image for black, blue, pink and apricot dresses.
Front-end
Once the images are setup with the correct "Name" entries, the front-end of the website will pick up these images as being for SCS Colour Swatches and will display a new option above the product image on the category / search pages.
Clicking on this option shows a drop-down where the user can select between the colour options.
Selecting an option will change the product image to the one that matches based the "Name" of the image, and will also change the URL of the product to include a query parameter that will pre-select the SCS level 1 entry that matches the selected option.
For example
Additionally, on the product page, when selecting different options for the SCS level 1, the product image will switch to the relevant one for the selected option.