Color swatches manager

A Color swatch is a solid color, gradient color, or thumbnail image used to represent a product’s color, pattern, or shade.

This section helps you manage solid color, gradient color, and the thumbnail image for each product color. This section also works for the Color filter block on collection pages.

First, you need to enable this feature and enter the name of the variant option that you have used for colors in Theme settings  > Color swatches.

Color item settings

Setting	Description
Color name	Enter the name of the product variant color. Ex: blue, pink, green,... Note: The input field is spelling and case-insensitive, please ensure content entered into this field has to be an exact match with the product variant, otherwise the swatch will not display.
Background color	Pick a solid color to display it as the background color of a color swatch.
Gradient background	Pick a gradient color to display as the background color of a color swatch. If empty, display the Solid color instead.
Background image	Pick or upload an image to display it as the background image. If empty, display the gradient background instead.
Color checkmark icon	Set a color for the check mark icon to make sure the contrast of the icon and background is the easiest to view.