# Swatches

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

![Collection filtering](https://content.gitbook.com/content/PE3dRxQBXFmV7YrNe4E9/blobs/I6vOWZjSwpLiRsDdEJ7Q/color.jpg)

![Product form, default product template](https://content.gitbook.com/content/PE3dRxQBXFmV7YrNe4E9/blobs/uvUwXMWRRGDMbDZ0q01f/color-swatches.jpg)

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

## 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/PE3dRxQBXFmV7YrNe4E9/blobs/ekJFUiCu8gwe3aU8bUzs/edit-language.jpg)

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

![Language Editor](https://content.gitbook.com/content/PE3dRxQBXFmV7YrNe4E9/blobs/pcY7bPprQftEkaYvBnrf/add-swatches.jpg) ![Product Options](https://content.gitbook.com/content/PE3dRxQBXFmV7YrNe4E9/blobs/30LGqh3Pd4wHOXJhVFa2/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/PE3dRxQBXFmV7YrNe4E9/blobs/b1wySn3KokGxyMSXTMIq/preview.jpg)

## Colors

Palo Alto can easily detect simple color names and convert them to swatches. There are a total of 140 color names Palo Alto 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/PE3dRxQBXFmV7YrNe4E9/blobs/hF0HxYDEPlEQXrkc8pjC/swatches-code.jpg)

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

### Add custom images to the assets folder

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

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 %}

## Disabling swatches

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