The word blue can mean a whole assortment of anything remotely blue. Turquoise, Cyan, Light Blue, Dark Blue, even Purple could be considered “blue” in a buyer’s vocabulary. On an online store, these little ambiguities should be avoided in order to prevent client dissatisfaction (because a slight mismatch in colour assumption could mean the difference between a sale, and extra expenses processing that return!). A fairly common way for retailers to show their product colors is through the usage of color or image icons and swatches.
The Icon/Swatches Variant Display Type allows you to display a dropdown list and clickable icon image which changes the Main Product Image of the variant. This allows your customer to click an icon/swatch to view an image of the associated Product Variant option
Examples of swatch options are:
The following steps allow configuration of a Product to use the Icons / Swatches Product Variant Display Type:
- Add/Edit a Product
- Add/Edit a Variant
- Configure Variant Setup
Step 1: Add/Edit a Product
The first step in configuring the Icons / Swatches Display Type is Adding a new Product or Editing an existing Product.
If you haven't done so already, see the Manage Products KB article for instructions on how to Add or Edit a Product to your Store.
Step 2: Add/Edit a Variant
Once you have created your product, then you are now ready to Add or Edit Product Variant.
If you haven't done so already, see the Product Variants KB article
for instructions on how to Add or Edit a Product Variant to your Store.
Step 3: Configure Variant Setup
After a Product and Variant are both created, you are now ready to configure the Product Variant to use the Icons/Swatches Display Type.
- Enter Variant Information
From the Variant Edit Product Variant screen, make sure all required fields are filled in. The Variant Setup required fields are:
- Product Variant Group
- Variant Name
- Select Display Type
Scroll down and expand the Display Options section.
Select the Icons/Swatches Display Type option.
- Select Icon\Swatch Image File
Add a swatch icon by clicking the Choose File button next to the Select Icon To Upload text.
- Select Image File
The Image file chosen will be displayed when a Swatch\Icon is clicked on the Product Details page. Add a swatch Image by clicking the Choose File button next to the Select Image To Upload text.
- (Optional) Configure Pricing and Weight
Configure any Pricing and Weight options that apply to the Swatch Variant option.
For detailed information about this section, see the Pricing and Weight section of the Product Variants KB article.
- Save the Variant
Scroll to the bottom of the Edit Product Variant screen and click Save to complete the setup.
- View your Swatch
Now the Variant Configuration is complete, you can now navigate to the Product Details page to see your swatch in action!