Color is a system attribute which allows users to conveniently select products when shopping.
Example of a product with color variants
Let's take a look at how to manage product colors and what additional settings are available for them.
Displaying colors on the website
On the website, the colors of the products may be displayed:
On the product page;
In the mini-card;
In the filters.
Color is the color or shade specified directly in the product — for example, Light Pink, Green, Raspberry. It will be displayed on the product page and in the mini-card.
But there can be quite a few similar shades, so for each Color we assign a Color for filter — a color that will unite a group of shades in the filter. For example, for the Light Pink, Bright Pink, and Raspberry colors, the Pink might be chosen as the filter color.
Displaying color on product pages
Colors on the product page and in the mini-card can be displayed as a product preview or a regular color icon. You can switch the display options in the Website → Design → Design editor section, Product page → Page layout → Product variants → Color options item, Variant buttons style menu.
Examples of color options display: as preview and as icons
How to specify the product color
The system Color attribute is available by default, you just need to fill it in the products. You can do this in two ways:
Manually in the admin panel;
By importing the file.
Specifying the color manually in the admin panel
You can select the exact color of the product manually in the variant properties. You can manage existing colors and create new ones in Products → Attribute values list → Colors.
How to create the exact color for a product
In the admin, go to the Products → Attribute values list → Colors section and click Add.
Specify the Title of the color in all available languages.
In the Color for filter field, select under which color this shade will appear in the filter.
Upload Color icon if you want to display a texture or print. You can upload images in JPG or PNG format, recommended size is 84x84 pixels.
Instead of an icon you can use a regular Color, you can choose a suitable shade from the palette or specify it as a HEX code.
Save the changes.
Specifying the colors using import
To fill color values using import, you need to prepare a table of two columns — SKU and Color, then import it to your website using the standard procedure.
In case of import, new colors will be created automatically. After that you can finish their configuration in Products → Attribute values list → Colors: specify the color name in all languages, set the Color for filter, upload your icon or select its actual color from the palette.
Filter by color
Color is the only parameter whose filter is displayed as icons.
A full list of colors that can be displayed in the filter can be found in the Products → Attribute values list → Colors for filter section of the admin panel.
How to create a new color for filter
Go to Products → Attribute values list → Colors for filter and click Add.
Specify the Title of the color in all available languages.
Select Color from the palette or enter it in HEX format. If you want to display a texture or print instead of a regular color, upload a JPG or PNG image in the Icon field.
Now you can use the created color for the filter to combine shades in Products → Attribute values list → Colors. This is necessary so that the products that have a designated color will be visible to customers when filtering.