Color and option swatches
Swatches help customers select variants (colors/materials) more easily. Customize them using:
Images
Hex color codes
Using Swatch Options
To show swatches on product pages/cards:
Update product's "Category" field
Add new option (Color/Material)
Connect option to a metafield
Customize each swatch:
Change hex code
Upload custom image
Using Swatch Filtering
Customize filters with Shopify Search & Discovery:
Create Swatch Filter from Metafield
Go to Shopify Settings > Custom Data
Create Metaobject Definition:
Name: "Swatch"
Add fields:
Label (required): Single line text
Color (optional): Color field
Image (optional): Image file
Create Product Metafield:
Type: Metaobject (List of values)
Reference your Swatch metaobject
Assign values to products:
Edit product > Product Metafields
Add color/material options
Connect to filter:
Open Search & Discovery app
Add new filter using your metafield
Label it (e.g., "Color") and save
Important Notes
You must manually update metafields for all products
Changes don't happen automatically
Filter by Color Option
In Search & Discovery:
Add new filter
Select "Color" option
Save
For missing swatches:
Upload 64x64 JPG files
Name format: swatch-[color].jpg (lowercase)
Only works with default CSS color names
Last updated
Was this helpful?