Swatches

Product variant swatches

Broadcast will display swatches for color variants in collection filtering and the product form on product pages.

Collection filtering
Product form, default product template

Broadcast will detect if your variant label is Color or Colour and automatically display swatches

Product admin - Variant label name

Customize the trigger words

To customize the trigger words which activate swatches, use the Language Editor (Edit languages) and add or modify the values:

Change trigger words by using the Language Editor

Colors

Broadcast can easily detect simple color names and convert them to swatches. There are a total of 140 color names Broadcast can detect, all other more complex names will be represented by a default grey color swatch. You can upload your own custom color names and graphics as described below. Here is a full list of color names that will automatically be converted to swatches: Color names list

Customizing

If your products have color names other than the listed colors in the Color names list, you can add your own color names and values or upload images to the Assets folder:

Add custom color names and values to swatches.json

Use the swatches.json file located in the Assets folder to add your own custom names and HEX color values:

To find additional HEX color codes,visit: https://colorhunt.co

Add custom images to the assets folder

With Broadcast, you can upload your own custom swatch images and display them on product and collection pages:

Collection filter panel
Product page form

How to:

  • Create a small square image (60x60 or 100x100 for best results)

  • Upload to the Assets folder

  • Modify swatches.json to include your color name and image

Video tutorial

Reference from the video:

{
"Stripes": "stripes.jpg"
},

Disabling swatches

Swatches can be toggled on and off in the Theme settings under Product Grid:

Theme settings -> Product Grid