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.
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
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:
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.
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:
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:
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.
At the far end of each option, the action wheel will let you delete the option as needed.
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.
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.
The above column headers can be used with the existing product option import file. Please click here for more information on importing product options.