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:

1. Update product's "Category" field
2. Add new option (Color/Material)
3. Connect option to a metafield
4. Customize each swatch:
   • Change hex code
   • Upload custom image

Using Swatch Filtering

Customize filters with Shopify Search & Discovery:

Create Swatch Filter from Metafield

1. Go to Shopify Settings > Custom Data
2. Create Metaobject Definition:
   • Name: "Swatch"
   • Add fields:
     1. Label (required): Single line text
     2. Color (optional): Color field
     3. Image (optional): Image file
3. Create Product Metafield:
   • Type: Metaobject (List of values)
   • Reference your Swatch metaobject
4. Assign values to products:
   • Edit product > Product Metafields
   • Add color/material options
5. 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

1. In Search & Discovery:
   • Add new filter
   • Select "Color" option
   • Save
2. For missing swatches:
   • Upload 64x64 JPG files
   • Name format: swatch-[color].jpg (lowercase)
   • Only works with default CSS color names