Product Variant Swatches

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:

  • Color
  • Material
  • Style

The following steps allow configuration of a Product to use the Icons / Swatches Product Variant Display Type:

  1. Add/Edit a Product
  2. Add/Edit a Variant
  3. 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.

  1. 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

  2. Select Display Type

    Scroll down and expand the Display Options section.

    Select the Icons/Swatches Display Type option.

  3. Select Icon\Swatch Image File

    Add a swatch icon by clicking the Choose File button next to the Select Icon To Upload text.

  4. 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.

  5. (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.

  6. Save the Variant

    Scroll to the bottom of the Edit Product Variant screen and click Save to complete the setup.

  7. View your Swatch

    Now the Variant Configuration is complete, you can now navigate to the Product Details page to see your swatch in action!

Add Feedback