The color swatch option type allows you to have a product option that - when selected - changes the main product image.
Note
The Color Swatch option type is only intended for CORE themes. If your store's theme is HTML-5 it will not work.
Also note that the Color Swatch option requires special coding to appear. If you are using a customized listing_x.html template for your products, you might not have the required coding. Please click here for information on updating your templates to the most up to date versions.
The following steps will show you how to set up the Color Swatch Option Type
- Set up or edit an existing product
(If you need instructions on creating or editing products please click here.)
- Go into the Options tab on the product
- Click on the "Add New" button to add a new option set.
- Under the "Option Name" field, add a name for your options.
(i.e. Colors, Styles, etc)
- Using the "Type" drop down menu, select "Color Swatch"
- (optional) Add an option URL or additional information if desired.
Additional Information
If used, the option URL or Additional Information functions will be shown on the option as an Information Icon that can give the shopper more details about the ordering process, or option selection process.
- Under Option Values, enter each variant separated by a comma.
- Once you've completed these initial steps, click the "Add" button to continue.
Fine Tuning your Variations
The previous steps took you through the process of creating the option 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 that 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 Manger 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 that is displayed when your customer selects the option. It is recommended to use images for this 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 of each other 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 Manger 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.
When used, the Thumbnail option selector will look like this:
- 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 on "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 also manually type in a hex value to set specific color values instead of using the color picker.
When used, the Select Color option selector will look like this:
Note
If neither the thumbnail or select color are specified, the display will simply be a radio button with the option's name like this:
Also note that the Thumbnail option selector will take precedence over the Select Color selector. In other words if you have both a thumbnail and Select Color selector specified on the option, only the thumbnail will display.
- 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 option 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.
- Once you've fine-tuned the options, click "Save" at the top right to finish the set up.
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 for use 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.