# Color swatches

{% embed url="<https://youtu.be/NBTK3I06Rtk>" %}

## How to enable Color swatches

{% hint style="success" %}

* Product page:&#x20;

[Product information](/sleek-theme/collections-and-products/product-page/product-information.md#color-swatches)

* Product cards:

[Product cards](/sleek-theme/theme-settings/product-cards.md#color-swatches)
{% endhint %}

## How to set up Color swatches

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Color swatches**
3. Make necessary changes
4. **Save**
   {% endhint %}

### Color swatch trigger

Define which is the color option and separate them by a comma.

<figure><img src="/files/9xGeV3VLdkPmGYSGCq4E" alt=""><figcaption></figcaption></figure>

### Color swatches

Choose the suitable **HEX color** codes and add them to the provided box.

<figure><img src="/files/svBF9wUcuQkQRzELMIRS" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Good practice :star:

* List the colors by separate lines.
* Write the color name from the product option and separate options with the color HEX value.
  {% endhint %}

#### You can also add color swatches to your product and collection pages using images:

1. Go to **Shopify admin** > **Content** > **Files.**
2. Click **Upload files.**

<figure><img src="/files/3LTYG4hgBGbp8Uq1dwKj" alt=""><figcaption></figcaption></figure>

#### 3. Naming your swatch files:

* **Orange** swatches would need to be named **orange.png** (capitals become lowercase).
* **Light blue** swatches would need to be named **light-blue.png** (capitals become lowercase, spaces and other special characters become hyphens).

Here are some sample images for color swatches: [light blue](https://cdn.shopify.com/s/files/1/0594/4190/5837/files/light-blue.png?v=1657771752),[ ](https://cdn.shopify.com/s/files/1/0594/4190/5837/files/orange.png?v=1657766980)[cyan](https://cdn.shopify.com/s/files/1/0594/4190/5837/files/cyan.png?v=1657766980).

{% hint style="danger" %}
.jpg files will not be shown, you must use .png
{% endhint %}

***

<figure><img src="/files/YXBHClmuIdzmicYniTsL" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_sleek&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>


---

# 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://docs.foxecom.com/sleek-theme/theme-settings/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.