Color Swatches Custom

The Color Swatches section allows you to define custom color swatch styles for product variants. This section generates CSS styles that override default color swatches with custom colors, gradients, or images.

Each block represents one color swatch definition.

1. How to add Color Swatches?

• From your Shopify admin, go to Online Store -> Themes.

• Find the theme that you want to edit, and then click Customize.

• Find the General group, click Add section and choose "Color Swatches" section.

2. How to define new color for Color Swatch Item?

Each block defines one color swatch style that will be applied to variant options matching the color name.

Example: If you want to customize the white color to another color, please follow these steps:

• Add "Color swatch" block

• Enter the value for the 'Color name' field with the corresponding color name you want to change (in this example, it's 'white')

• Once a color swatch item is defined, it will immediately appear on the Category page as shown in the image below.

3. Color Swatch Item - Settings Guide

Setting	Type	Description
Color Name	text	Name of the color variant (must match product variant option name exactly, case-insensitive)
Color 1	color	Primary color for the swatch. Supports alpha/transparency
Color 2	color	Secondary color for gradient swatch. Supports alpha/transparency
Image	image_picker	Image/pattern for the swatch. If provided, overrides color settings