The Color Swatches module helps to visualize different colors and fabrics having them displayed as clickable swatches on the product page.

W/o color swatchescus-without-color-swatches.png
With color swatchescus-color-swatches.png

Instaling and Configuring Color Swatches

To install the module follow the guides from Installing addons from the Marketplace.

When installed proceed to the module settings page to configure it:

installed.png

The Color Swatches module settings are rather straightforward:

settings.png

Here you can define the sizes (hight and width) of a swatch image in the customer storefront and whether to use the color swatch name as an attribute option name or not.

Don’t forget to submit the new configuration settings to make them active.

The module adds a special Color swatches section (Catalog -> Color swatches) to the store admin area where a store admin can configure the swatches themselves:

swatches-list.png

Initially the swatches list is empty and the store admin should create all swatches from scratch.

To create a swatch:

  1. Click Create. You’ll see a new blank line with the fields to be defined.
  2. Add a swatch name in the line create-swatch.png
  3. Choose the swatch color: add-color.png
    • Click in the Color field for the color panel to be displayed
    • Choose the color you need
    • Click a multicolor round botton in the bottom right corner to add the chosen color
    • The color code and the color itself will be added to the swatch
  4. Click Save changes

If necessary you can add an image to the color swatch.

For this purpose:

  1. Click + in the image field of a swatch add-image.png
  2. Upload an image either from computer or via URL
  3. Save changes

Adding Color Swatches to Product-Specific Attributes

When all required color swatches are created you can add them to product descriptions. For this purpose find a product you need to modify in the product list (Catalog -> Products), proceed to the product details page and open the Attributes tab:

attributes-add-swatches.png

In case there are no product attributes for a product you’ll need to create them first.

Check in the Color swatches check-box, add color swatches to the product attributes from the drop-down and save the changes.

attributes-save-swatches.png

That’s it, the color swatches option is added for a product and will be displayed in the storefront instead of the default layout:

cus-color-swatches.png

Adding Color Swatches for Product Variants

If the Use color swatch name as an attribute option name option is enabled product variants (if any) will be renamed to swatches automatically when the color swatches are added to the product attributes:

Before color swatchesvariants-before-swatches.png
After color swatchesvariants-after-swarches.png

If you add images to the product variants the product image displayed to a customer will change depending on the chosen lolor swatch:

Variants with imagessvariants-with-swatches.png
Color 1cus-var-1.png
Color 2cus-var-2.png
Color 3cus-var-3.png

If no images are added to the product variants the product image will stay the same regardless of the product color chosen.

Adding Color Swatches to Global Attributes

If you want to apply color swatches to all products in your store and you have global attributes set-up for them you can add color swatches to global attributes and they will be applied to all products with global attributes automatically.

To add color swatches to global atributes:

  1. Locate the attribute you need to add a color swatch to (Catalog -> Classes & attributes) and click Edit or create a new global attribute
  2. Toggle on the Use color swatches option in the pop-up
    global-new.png
    global-edit.png
  3. Specify the values choosing the appropriate color swatch from a drop-down global-add-swatch.png
  4. Save the changes
  5. Assign global attributes to products

Importing Color Swatches

It’s possible to create color swatchers using the built-in Import tool.

For this purpose you should create a .csv file of the following format:

import-1.png

You’ll need to specify a swatch name, position, color and image for each color swatch you want to add and upload the .csv file via the Catalog -> Import section in the cart admin area. The color swatches will be added to the list in the Catalog -> Color swatches section in the admin area.

If you want to assign color swatches to existing product attributes the file format should be as follows:

import-2.png

Also when importing product attributes you can specify several swatch values at a time similar to the way the options values are specified, e.g. if options are specified as

options = Red&&Green&&Blue

color swatches can be specified as

swatches = red_swatch&&green_swatch&&blue_swatch

For more info on importing product attributes please refer to CSV import: Classes & Attributes.