Adding Swatches (Product Variations)

If you are adding Product Variations (as opposed to Simple Product Options) you can add image swatches to each option that can appear in the product detail page using a couple of approaches.

Product Variation Images vs Simple Product Option Swatches

There are two ways to add swatches to a Product Variation.

Each approach yields different results depending on the option display format, and product settings used.

Adding images to the Product Variation - Image Swatch field can be used on Single Display Formats (not multiple dropdowns)

When adding images to the Product Variations Image field, the image is added to a single variant which can have Options/Sizes/Colours specified. 

As such they are only used on single Display Format options rather than Multiple dropdowns etc.

• If you choose a multiple dropdown Display Format the images will not be used.
•  If you choose a multiple dropdown Display Format and you have Simple Product Option Swatches applied  e.g.Manage Colours, then these swatches will show instead.

Adding images to the Product Variation - Image Swatch field are used in the Product layout as thumbnails or slides

If you have set your product page to use the Image Slider format, the images assigned here will be added to the Slider.

If you have set your product page to use the Image with thumbs, the images assigned here will be added as thumbs below the image.

Adding swatch images to the Simple Product Options area when using Product Variations

If you have set up a product to use Product Variations, it is possible to still use the Simple Product Options (e.g. Manage Colours, Manage Sizes etc) area to add swatches.

These can be used when using the MULTIPLE DROPDOWNS display settings.

Colour Swatches added to the  MANAGE COLOURS area, using a product with variations.
Note the MANAGE PRODUCT VARIATIONS link at the top of the screenshot which indicates the product has variations.

- The Swatch Name MUST match the name of the option as set in the Product Variation area, INCLUDING capitalisation

For example if you have a Product Variation with a color of Purple Violet, when added a Simple Product option to the MANAGE COLOURS area, you must call the colour Purple Violet, not purple violet, Purple-Violet etc.

- You can add image swatches to BOTH the Product Variations Image field and the Simple Product Options (E.g. Manage Colours, Sizes etc) area

• You can choose to have the Product Variation Images be applied to the Product Slider, and the Simple Product Options Swatch Images apply to the products swatches area using the Multiple Dropdown Display Options
• You can choose to have the Product Variation Images be applied to the Product Slider, and to the products swatches area using the Single Dropdown display options.
• You can use only simple product options, and not use the Product Variations image fields at all.

Display options examples for the a product with Product Variation image swatches and Simple Product Option image swatches.