> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/products/palo-alto-product-pages/custom-color-swatches.md).

# Custom color swatches

{% hint style="info" %}
Our companion app for Broadcast, [Presidio+](https://presidiodev.com/install-presidio-plus), simplifies setting up swatches.

We created Presidio+ help setup advanced features such as swatches. It creates metafields automatically and guides you through setup.

The app is free during Early Access and swatch integrations will always remain free. Presidio+ users also benefit from access to a premium support inbox.

[<img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FfRFemChP0E6kuJpVPsAb%2Fbadge-shopify-app-store-light.svg?alt=media&amp;token=172cd3aa-135d-49d6-93b0-17845ab51fa7" alt="" data-size="original">](https://presidiodev.com/install-presidio-plus)
{% endhint %}

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&amp;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&amp;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&amp;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&amp;token=ccb95fc4-923b-4e7c-ab58-38a82043209c" alt=""><figcaption></figcaption></figure>
