page last edited on 14 September 2018
The Color Swatches module helps to visualize different colors and fabrics having them displayed as clickable swatches on the product page.
- Instaling and Configuring Color Swatches
- Adding Color Swatches to Product-Specific Attributes
- Adding Color Swatches for Product Variants
- Adding Color Swatches to Global Attributes
- Importing Color Swatches
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:
The Color Swatches module settings are rather straightforward:
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:
Initially the swatches list is empty and the store admin should create all swatches from scratch.
To create a swatch:
- Click Create. You’ll see a new blank line with the fields to be defined.
- Add a swatch name in the line
- Choose the swatch color:
- 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
- Click Save changes
If necessary you can add an image to the color swatch.
For this purpose:
- Click + in the image field of a swatch
- Upload an image either from computer or via URL
- 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:
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.
That’s it, the color swatches option is added for a product and will be displayed in the storefront instead of the default layout:
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:
If you add images to the product variants the product image displayed to a customer will change depending on the chosen lolor swatch:
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:
- Locate the attribute you need to add a color swatch to (Catalog -> Classes & attributes) and click Edit or create a new global attribute
- Toggle on the Use color swatches option in the pop-up
- Specify the values choosing the appropriate color swatch from a drop-down
- Save the changes
- 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:
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:
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.
Help make this document better
This guide, as well as the rest of our docs, are open-source and available on GitHub.