# Swatches

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

![Collection filtering](/files/-MhUN3E97QRr1uypOeag)

![Product form, default product template](/files/-MhUNE-VckN9ie0o54b8)

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

![Product admin - Variant label name](/files/-MhUOxqViCNKfSgk-vc_)

### 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](/files/-MhV5ZXFCPQLX32kQRJJ)

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

![Language Editor](/files/pDTzOqGKwsLEV1GHZlHq) ![Product Options](/files/4LtTL70f23odzly0GcZR)

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

![Product Page View](/files/D0GR6DkNtHmWKdEEagzb)

### 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:

![](/files/-MhUXZYqF3CS2JShI57M)

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](/files/-MhUkpz93nwNf2f9UCth)

![Product page form](/files/-MhUkspCpzceg2NyOnoX)

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](/files/-MhW8pQK42U6RmtzOKyW)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://broadcast.presidiocreative.com/broadcast-v4/products/swatches.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.