# Custom color swatches

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

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FQOMRTu37UR1DtGpaaS04%2Fcolor-swatches.jpg?alt=media&#x26;token=646803ce-c95a-45bf-b6dc-29d01ec60a28" alt=""><figcaption></figcaption></figure>

{% 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 that activate swatches, use the theme content (edit default theme content) and add or modify the values:

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FRjmW6n4o8N2CbaZveUEJ%2Fcustomize-trigger-words.gif?alt=media&#x26;token=cf18204e-21a3-4d75-aaa5-6737f131ccbb" alt=""><figcaption></figcaption></figure>

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.

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

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FxTPZKyyRUprOvfxKIgT3%2Fassets.jpg?alt=media&#x26;token=d229a7f9-213e-4ca2-882c-0c5815333aa2" alt=""><figcaption></figcaption></figure>

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 in the theme settings under Swatches -> Type.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2F1067VHDhq566GYUd742t%2Fdisabling-swatches.gif?alt=media&#x26;token=ccb95fc4-923b-4e7c-ab58-38a82043209c" alt=""><figcaption></figcaption></figure>
