Seeing is believing…and buying! Think of your store like an online catalog, where you can showcase all of the different product options you offer; various color choices, styles, etc. 👗 📺 ☂️

Product & Swatch Images

If you offer products in various colors, styles or finishes, you will need to create a product image and corresponding small swatch image. The product and swatch images should all be the same size to avoid distortion. Here’s how to do it:

1.    Go to the product for which you want to add option images (using the Inventory Control Grid)

2. Scroll to the bottom of the product page to the section marked Option Color Swatches

3.    For each option, click Add to open the Browse boxes for that option's Swatch Image and Medium & Large Images

4.    Browse for the Swatch Image and Medium & Large Images for each option and click Upload Photos

If you view the product on your storefront, you will now see the options drop down with images next to them. When you click an option swatch, the main product photo will change to show a medium image of that option, and if you zoom, you can view the large image.

⚠️  Good To Know

When a customer uses the swatch image to select an option for a product, and then adds that product to their cart, 🛒 the thumbnail image in the customer's shopping cart will depict the main product image thumbnail, NOT the swatch image of the option they selected. Rest assured that the correct product will be in the shopping cart and the description will match it.

Swatch Images and FTP

If you need to reference any of your swatch images externally, the images can be found and referenced with the following file path: If you go into the /vspfiles/photos/options folder in your FTP, you will find all of your Swatch and Medium images with the naming conventions in the table below ...

Photo Name Extension: -S

Photo Name: Swatch

Product Page Location: Directly above the list or drop-down of product options, under the corresponding option category on the product detail page

Full File Name: [productcode]-[optionid]-S.[fileextension]

Photo Name Extension: -T

Photo Name: Medium

Product Page Location: Where the main product photo appears on the product detail page, when the corresponding product option is selected or the corresponding swatch image is clicked

Full File Name: [productcode]-[optionid]-T.[fileextension]

⚠️ Good To Know

In the above case, [productcode] refers to the product code of the product for which you uploaded additional images. [optionid] is the numeric identifier of the product option for the image. And [fileextension] is the file type, which should be either .jpg for JPEG files or .gif for GIF files.


As a business owner, you want to present your products in the most informative and engaging way to encourage sales. By giving your customers a clear picture of the what your products look like and the options you have available, they will be able to make smart shopping decisions that include buying from YOU! 🛍️

Did this answer your question?