Swatches Documentation
Summary
Swatches are used to make variant selections (e.g., color or material) easier and more intuitive for customers. They appear throughout your theme and can be customized using images or hex code colors.
Using Swatch Options
To display swatches on a product page or within a product card, use metafield-connected variant options. Here’s how to set it up:
Find a Product to Update:
Update the “Category” field to match your product.
Add a new option like “Color” or “Material”.
Ensure the option is connected to a metafield.
Customize Swatches:
Click into each swatch to change the hex code or upload a custom image.
Using Swatch Filtering
Customize collection page filtering using the Shopify Search and Discovery app. This allows you to add new filters and customize their appearance.
Add Swatch Filter from Metafield
Create a Metaobject for Your Swatch:
Navigate to Shopify Settings > Custom Data.
Scroll to Metaobject Definitions and click Add Definition.
Add a name and description (e.g.,
Swatch).Add three fields:
Label: Required, using Single line text (select List of values).
Color: Optional, using Color.
Image: Optional, using File (select Accepts specific file types - Images).
Create a Metafield to Link to the Metaobject:
Navigate to Shopify Settings > Custom Data > Products.
Click Add Definition.
Add a name and description (e.g.,
Swatch).Select Metaobject as the type (ensure List of values is selected).
In the Reference field, enter the metaobject you just created.
Assign Values to Each Product:
Navigate to a product and scroll to Product Metafields.
Add all the colors or materials you’d like to highlight for that product.
Connect to Filter:
Open the Search and Discovery app.
Navigate to Filters and click Add Filter.
Select the new product metafield you created.
Add a label (e.g.,
ColororMaterial) and click Save.
Caveats of Metafield Filtering
You must manually update metafields for all products you want to appear in the filter. This does not happen automatically, even if swatches are displayed via category metafields or variant options.
Add Swatch Filter from ‘Color’ Option
Add Filter Using Search and Discovery:
Open the Search and Discovery app.
Navigate to Filters and click Add Filter.
Select the product option “Color” (or a translation of “color”).
Add a label (e.g.,
Color) and click Save.
Upload Missing Swatch Files:
If swatches are missing, upload custom swatch files:
Files must be 64x64 JPG and named in lowercase, prepended with
swatch-(e.g.,swatch-electric-blue.jpgfor the color “Electric Blue”).
Swatches will only appear automatically if the color name matches a default CSS color.
