Even though your customers can't touch or try on products in your store, you can give them a more realistic idea of what a specific product will look like with color swatches. If you sell products that come in color variants, the color swatch function lets you configure them so that customers can click on a color swatch, as shown below, and preview the product in the specified color.

You can use the Color Swatch option with or without the Inventory Control Grid.

Using it with Inventory Control lets you quickly create child products for the variants of a product. For example, if a shirt with the product code MD01 is available in three different colors, child products with the default codes of MD01-0001, MD01-0002, and MD01-0003 are created. Although this adds more products to your database, it gives you greater control over variants, particularly if you want to include size and other options.

If you prefer to create one product in different colors as opposed to creating child products, you can set it up without using inventory control.

If you aren't familiar with setting up products, inventory control, and product options, please see "Adding Products To Your Store in 3 Simple Steps" and "Customizing Your Product Options" before continuing.

Using the Color Swatch Option With Inventory Control

  1. If you haven't already, start by creating product images and corresponding swatch images. The product images should all be the same size to avoid distortion.
  2. Create the product as normal, uploading the image you want to display as default for this product.
  3. Deselect the Enable Alternate View Photo option in the Image Management  section (If you make any changes in the Advanced Settings to the High Resolution Zoom Image (large) and Displayed on Product Page (medium) settings these will need to be duplicated in the Option Color Swatch table in step eight.)
  4. Create the Product Options for the colors you need (or use existing options if you have already created a set of generic color options). You can use Dropdown, Radio, or Dropdown_Smartmatch for Display Type in the Option Category. (The other options do not produce useable results.)
  5. In the Basic Info section, click Add Options and select the colors you want to assign to the product.
  6. Click Save. Enable Options Inventory Control will be enabled.
  7. Click Save at the bottom of the page.

For more information about setting up options, see "Customizing Your Product Options".

The Inventory Control Grid should now display the color variants with unique product codes. If you've created other products options, such as size, variants for each combination of colors and size will be created. You can edit these codes here, if you have pre-assigned codes for these variants.

You can also change the price of any of the variants here (for example, if you have a sale on a particular color), although if you do so you will need to mention this in the Product Description as the altered price is only displayed in the shopping cart and subsequent screens.

  1. At the bottom of the product page, you'll now see the Option Color Swatch section listing all the color options you've enabled for this product - this is where you load the swatches and corresponding images.
  2. Click Add for each color option to open browse boxes in the Swatch Image and Medium & Large Images columns for each option.
  3. Click Browse beside each field, find the image on your local computer, and click Upload.
  4. Click View Live Page to see the live product page showing the swatches and drop-down list or radio buttons with the color names.

If a product has other product options (for example, size), they will appear in the Option Color Swatch table as well, but have no bearing on creating the color swatch table.

Note that the default image loaded for the product is shown in the shopping cart rather than that for the option selected, but the description will be correct.

Using the Color Swatch Option Without Inventory Control

  1. Before you begin, make sure you have the product images and the corresponding swatch images. The product images should all be the same size to avoid distortion.
  2. Create the product as normal, uploading the image you want to display as default for this product. deselect the Enable Alternate View Photo option in Image Management. If you make any changes in the Advanced Settings to the High Resolution Zoom Image (large) and Displayed on Product Page (medium) settings these will need to be duplicated in the Option Color Swatch table in step six.
  3. Create the product options for the colors you need (or use existing options if you've already created a set of generic color options), making sure you include the product code in their Apply to Product Code(s) box. You can use Dropdown or Radio for Display Type in the Option Category. (The other options do not produce useable results.)
  4. Go back to the Product page and Scroll down to the Product Options section. Add the color options in Options.
  5. Make sure Enable Inventory Control is deselected. Click Save.
  6. Near the bottom of the Product page, you'll see the Option Color Swatch listing all the color options enabled for this product - this is where you load the swatches and corresponding images.
  7. For each color option click Add to open browse boxes in the Swatch Image and Medium & Large Images columns for each option.
  8. Click Browse beside each field, find the image on your local computer, and click Upload.
  9. Click View Live Page to see the live product page showing the swatches and drop-down list or radio buttons with the color names.

Note that the default image loaded for the product is shown in the shopping cart rather than that for the option selected. If, however, the customer clicks on the Options link, a pop-up window appears confirming the option details.

Swatch Images in Your Store's FTP

If you need to reference any of your swatch images externally, they can be found and referenced with http://www.myvolusionstore.com/v/vspfiles/photos/options. 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 Display Location: directly above the product options list under the corresponding option category
Full File Name: [productcode]- / [optionid]- / S.[fileextension]*

Photo Name Extension: -T
Photo Name: Medium
Product Page Display Location: in the main photo location when a visitor clicks the corresponding swatch image
Full File Name: [productcode]- / [optionid]- / T.[fileextension]*

*[productcode] is the product code of the product where you uploaded the images.

[optionid] is the numeric identifier of the product option for the image.

[fileextension] is the file type, which should be jpg for JPEG files.

Did this answer your question?