Color Swatch Setup

Color Swatch Setup

Color swatches allow you to display variant options (such as colors) as visual elements instead of plain text. This improves the user experience by making product selection faster and more intuitive.

Swatches can be configured using metafields and metaobjects, allowing full control over colors, images, and fallback behavior.

How it works

The theme uses a swatch mapping system to match variant option values (e.g. “Red”, “Black”) with visual representations.

Each variant option is linked to a swatch entry that defines how it should be displayed.

Setup Steps

1. Create a Metaobject (Swatch Mapping)

Create a metaobject (e.g. variant-swatch-mapping ) with fields such as:

• Name (e.g. Red, Black)
• Color value (hex code, e.g. #FF0000 )
• Image (optional swatch image)

2. Add Entries

For each color, create an entry:

3. Connect to Theme

In the Variant Picker block, set:

• Default Variant Swatch Map Metaobject → variant-swatch-mapping

4. (Optional) Product-level Override

You can override the default mapping per product using a metafield.

This allows different swatch sets for different products.

Display Logic

Swatches are rendered based on available data:

1. Custom image → shown if provided
2. Hex color → used if no image is available
3. Fallback → defaults to variant label or image

Notes

• Swatches work best with the Pills style in the Variant Picker.
• Ensure variant option names match the swatch entries exactly.
• Keep color naming consistent (e.g. “Light Blue” vs “Blue”).
• Use images for complex patterns (e.g. prints, textures).
• Swatch size is controlled from the Variant Picker settings.