Setting Up Auto Association of Variants and Swatches



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 see how swatches and variants display please read What are Variant Swatches and how are they useful

To use this feature you need to setup auto association of variant images.

To set up auto association for variant images you need to:

  1. Name your variant images in a particular format (explained below)
  2. Upload them to the folder: \Shared\Images\Product (Note: you may have to create this folder if it is not already created)

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

Key Points:

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

Have more questions? Submit a request