Variant swatches

Global definitions

You can select swatches under the Variant Picker block in Product sections. If your variant names match HTML color names (like white, black, red, etc.), they will automatically be used as the color fill for the swatch. A full list of recognized color names can be found there.

For custom color names, you can define swatches under Theme Settings > Swatches. Enter each definition on a separate line using this format: option name: color. Instead of a name, you can also use a HEX value with a hashtag or an RGB value in the format rgb(255,255,255).

Individual definitions

You can also set unique color definitions for each individual product. For example, if you want a different shade of gray for each product, simply create a product metafield to specify the custom color. This gives you flexibility to tailor swatch colors for each item in your store.

Creating product metafiled

Definitions in metafield

Preview of rendered swatches

Image swatch definition

You can also use images as swatches, which is ideal for textures or patterns. This option works in both Global and Individual definitions.

1. Upload your image to Files.

2. Copy the file name, including the extension (e.g., swatch-coralsea.jpg )

3. Add a definition line, using the file name as the color (e.g., Coral Sea: swatch-coralsea.jpg)

Uploaded file

Definition

Custom size of swatch

To customize the size of swatches, you can use Custom CSS. Simply add the code below to the Theme Settings > Custom CSS field or directly in the Product Section > Custom CSS field:

.swatch-color,.swatch-image {
  --swatch-size: 80px !important;
}