Comment on page
Product variant swatches
Broadcast will display swatches for color variants in collection filtering and the product form on product pages.
Product form, default product template
Broadcast will detect if your variant label is
Colourand automatically display swatches
Product admin - Variant label name
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
You can add more trigger words that will help use swatches for other options.
The result is the same and you can use different custom swatches as well.
Product Page View
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.
If you've downloaded Broadcast 5.1 or newer, please follow these instructions for customizing swatches
Swatches are now easier to manage and control. All the settings for color swatches around are found under the Theme settings -> Swatches
Video walk-through on all Swatch changes in Broadcast 5.1:
The following instructions are for Broadcast 5.0 and earlier.
If you are using Broadcast 5.0 or earlier, please follow these insturctions below to customize swatches
swatches.jsonfile located in the Assets folder to add your own custom names and HEX color values:
With Broadcast, you can upload your own custom swatch images and display them on product and collection pages:
Collection filter panel
Product page form
- Create a small square image (60x60 or 100x100 for best results)
- Upload to the Assets folder
swatches.jsonto include your color name and image
Reference from the video:
We recommend if your image has spaces, replace them with an underscore or dash: Instead of "Light Navy.png" use "light_navy.png" or "light-navy.png"
For the JSON file, your multiword variant can look like this:
"Light Navy": "light_navy.png"
The variant name can have spaces. However, we recommend for the filename of the image, use an underscore or dash instead of a space.
In this short video, we'll look at filenames and an example of creating a custom image for a swatch:
More tips on adding custom images
Swatches can be toggled on and off in the Theme settings under Product Grid:
Theme settings -> Product Grid