# How to add Custom Color Swatches

Palo Alto matches any valid CSS color names with a color swatch automatically. This feature relies on the CSS coding language, which has color keywords built-in but is entirely in English. 

Documentation page coming soon

Below is a reference of CSS colors names:

{% embed url="<https://www.w3schools.com/colors/colors_names.asp>" %}

{% embed url="<https://www.quackit.com/css/css_color_codes.cfm>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords>" %}

### Adding Custom Color Names

Let's take the custom color name “Rose Red” as an example. It isn't an actual CSS Color, so the swatch that's displayed is almost the same as red.

To do so, you will need to generate a png image to display a custom swatch color for Rose Red. You can crop part of an actual product image if you like to show texture or the exact color.&#x20;

In our case here, the png image will be:

<div align="left"><img src="/files/-MlHMrG0CxU06TysKyII" alt="rose-red.png"></div>

The file will be named "rose-red.png". There are two things to watch out for with the file name here:

1\. Please ensure that you add a dash between the words. Shopify needs you to add a dash when you have space or special characters.

2\. Ensure that you use lowercase characters only (the file extension needs to be in lowercase too).

### Uploading the Custom Swatch Images To carry out the upload

1. Navigate to your Online Store > Themes and click on Actions > Edit Code
2. Scroll down to the Assets Folder
3. Click the Add a new asset link and upload the "rose-red.png" image file

![](/files/-MlHOsBR9fFkkotW76z_)

### Enable the color swatches option on your product page settings

The final step is to make sure swatches are enabled in your settings. To do this, you'll need to open your Theme Editor and click on Theme Settings near the bottom.

From here, open the Products tab and scroll down to the "Enable color swatches" checkbox.

![](/files/-MlHQs58Rs7rZ_pFytjF)


---

# 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://palo-alto.presidiocreative.com/palo-alto-4.0/custom/custom-color-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.