PRODUCT SWATCHES/ PRODUCT VARIANT IMAGES
Product swatches are used in conjunction with the variant capability. This will enable your site visitors to view the image of the swatch/variant selected on the product details page. Example: If you sell chairs and your primary image is a black chair and your variants are camel and orange - When a customer selects an orange chair from the variant drop down, the related variant image can load automatically on selection.
To use this feature you need to set up the auto association of variant images at Settings > Catalog.
To set up an auto association for variant images you need to:
- Name your variant images in a particular format (explained below)
- Upload them to the folder: \Shared\Images\Product (Note: you may have to create this folder if it is not already created)
The format for naming variant images (Step 1, naming variant images):
The variant image name format is based on the:
1. Stripped Item Number of the product. A stripped item number is an item number from which all characters are removed except numbers, a through z, underscores and dashes.
2. Variant Group Name
3. Variant Name
Note: The stripped item number with variant swatches is optional. If you have a set of swatches that are used across multiple products you can define a set of swatches without the stripped item number by using the Variant Group and Variant Name.
Below is the swatch image naming convention:
1) [Stripped Item Number] + _var_ + [Variant Group] + _ + [Variant Name] + _th.jpg Example: Item123_var_color_blue_th.jpg
2) [Stripped Item Number] + _var_ + [Variant Group] + _ + [Variant Name] + .jpg Example: Item123_var_color_blue.jpg
If you would like to use a set of swatches across multiple products you can define the set of swatches without the stripped item number:
3) [Variant Group] + _ + [Variant Name] + _th.jpg Example: color_blue_th.jpg
4) [Variant Group] + _ + [Variant Name] + .jpg Example: color_blue.jpg
1. This is in order of precedence for displaying the thumb image. Large image replacement is the same order but does not use the thumb image (ending in “th”).
2. You can prevent the large image from being replaced by only including thumbnail images.
3. You are not required to use a thumbnail image and in that case, the same image will be used for both. The thumb image would be resized as needed.
4. You can have more than one word for the Variant Name in the Admin Console (display name), but when renaming the image, the spaces have to be left out between the words for the system to match it.
Upload the Images (Step 2, after naming the images):
After naming the images in the above format, please upload them to: \Shared\Images\Product.
Once uploaded, follow the steps below to display the variants with their associated images.
Please see How to Display Variant Swatches