How Do I Use The Color Swatch Option Type?

The color swatch option type allows you to have a product option that - when selected - changes the main product image.

The following steps will show you how to set up the Color Swatch Option Type.

1. Set up or edit an existing product (If you need instructions on creating or editing products, please click here).

2. Go into the Options tab on the product.

3. Click on the Add New button to add a new option set.

4. Under the "Option Name" field, add a name for your options (i.e., Colors, Styles, etc.).

5. Using the "Type" drop-down menu, select Color Swatch.

6. (optional) Add an option URL or additional information if desired.

7. Under Option Values, enter each variant separated by a comma.

8. Once you've completed these initial steps, click the Add button to continue.

Fine Tuning your Variations

The previous steps took you through creating the options set and variants. Once added, you can further edit the variations to include a main image and display options for each selection.

While viewing the Options, you will see the following fields on each:

• Description
  The name of the option/variant

• Part #
  If your product line has distinct part numbers for each variant, enter those in this field.

• Value
  This will be the price markup the option will incur on the product. It will then be multiplied by the quantity of the option and used for the final calculation.

• Image
  This will let you specify an image from your File Manager that will appear as the MAIN image for the product when the option is selected. For example, if the option is for the color Red, you would use an image of the product in this color to change the main image.

As mentioned above, the Image setting will let you specify the main product image displayed when your customer selects the option. It is recommended to use images that are the same size as your product's main image(s) to match the product's main image displays.

The next two settings are independent and will let you control how the actual option selections are shown to the customer.

• Thumbnail
  This will let you specify a small thumbnail image from your File Manager that will be shown as the option's selector.

If using a thumbnail, it is recommended to use images that are square on this setting since the option selector itself is a small 46px by 46px square.

• Select Color
  Rather than using a thumbnail, this setting option will let you specify an HTML Color Hex Value for the swatch.

When you click "Select Color," a small display will show a color swatch as default white (#FFFFFF). You can then click on the hex value to open up the color picker and select your desired color. You may manually type in a hex value to set specific color values instead of using the color picker.

• Sorting
  This field will let you sort the display order of the options. The higher the number, the farther on the list it will appear.

• Hide
  Mark this checkbox to hide individual options from the list if necessary

• Default
  This function is used to pre-select the option.

At the far end of each option, the action wheel will let you delete the option as needed.

9. Once you've fine-tuned the options, click Save at the top right to finish the setup.

As your customers view the product, they will see its various options displayed on the listing page and - when an option is selected - the product's main image will change to the image specified for the option.

The Color Swatch option type can be used with Advanced Options, Option Templates, as well as the Option Rules add-on.

Furthermore, you can also use CSV import to create options using the Color Swatch Option type. The Product Option Export file will use the following column headers with the import function.

• featuretype
  Use Swatch as the feature-type

• imagepath
  The file path used here will change the main product image when the option is selected.

• thumbpath
  This column will be used if you're specifying a thumbnail for the product options

• colorcode
  This will be used if you are using the Select Color selector option. Be sure to write the full Hex code, including the # sign.

The above column headers can be used with the existing product option import file. Please click here for more information on importing product options.