# Swatches

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

![Collection filtering](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/W219SnoLQLgHiz9LgdNO/Screen%20Shot%202021-08-19%20at%2010.00.09%20AM.png)

![Product form, default product template](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/k1sGZLRjWAFdRUFdD7or/Screen%20Shot%202021-08-19%20at%2010.02.17%20AM.png)

{% hint style="success" %}
Broadcast will detect if your variant label is `Color` or `Colour` and automatically display swatches
{% endhint %}

![Product admin - Variant label name](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/uHV26cW6bwrMZPwjFcYC/variant-label.gif)

### 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](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/LRM2n0zIOUBvh0jGlira/Screen%20Shot%202021-08-19%20at%201.25.29%20PM.png)

You can add more trigger words that will help use swatches for other options.

![Language Editor](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/r7g0ADbSxFYT8TkL7YqB/swatches-nuance.jpg) ![Product Options](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/ZixrDDzum0Hk8klkdSzp/options-nuance.jpg)

The result is the same and you can use different custom swatches as well.

![Product Page View](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/UKLnUp9ThS98jl0tNxA5/swatches-preview.jpg)

### 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](https://groupthought.com/pages/swatch-color-names)

## Customizing

If your products have color names other than the listed colors in the [Color names list](https://groupthought.com/pages/swatch-color-names), 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:

![](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/hAggmqOb8TS1cvyE5D5l/json-1.png)

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](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/6KSnjkXDTFRDM2BbdJ7k/Screen%20Shot%202021-08-19%20at%2011.51.09%20AM.png)

![Product page form](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/sQ2LHXJ5PYZQjvw6lxLs/Screen%20Shot%202021-08-19%20at%2011.51.54%20AM.png)

How to:

{% hint style="success" %}

* 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
  {% endhint %}

### Video tutorial

{% embed url="<https://www.loom.com/share/198a4cc8f532425ead917042fe2a452f>" %}

Reference from the video:

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

### Avoid spaces in the filename

{% hint style="info" %}
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**"
{% endhint %}

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.&#x20;

### Video tutorial - More tips for custom images

In this short video, we'll look at filenames and an example of creating a custom image for a swatch:

{% embed url="<https://www.loom.com/share/7481c11353324bc38018bc95017fbe6b>" %}
More tips on adding custom images
{% endembed %}

### Disabling swatches

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

![Theme settings -> Product Grid](https://content.gitbook.com/content/gPVWISoa427RKoZWt1y6/blobs/GEf7DcaBN09RB7lxCdyt/swatches-off.gif)