Color Swatches and Alternative Views: How to Set Color Swatches

If you sell products that come in multiple colors, like t-shirts, the color swatch feature lets customers change both the main product image and the option menu selection by selecting the corresponding color swatch icon when they view a product.

Before setting up color swatches, be sure to watch our videos on product options.

We've set up a simple product that comes in three colors: blue, red, and yellow. We've already created the Color option category, changed it to display as a dropdown menu, created blue, red, and yellow options, and applied them to our product.

We've also used the Inventory Control Grid to create a unique product code for each child product. Note that this step is not necessary to make use of color swatches. Finally, we've created main product images for each child product, as well as a corresponding color swatch, and placed them in a single directory on our computer.

The first image is already uploaded as the main product image. To upload the others and to activate the swatch feature, scroll down to the bottom of the page and expand the Option Color Swatches section. Then click Add Images next to any option combination. Next, click Choose File, and locate the image on your computer. Make sure you upload both files at once. After we've uploaded all six images, we can see how the feature works on the storefront.

Now, when we click the swatch, not only does the image change, but so does the option menu selection. Likewise, changing the selection in the option menu changes the product image and the swatch selected.