# Color swatches

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

## How to enable Color swatches

{% hint style="success" %}

* Product page:&#x20;

[#color-swatches](https://docs.foxecom.com/sleek-theme/collections-and-products/product-page/product-information#color-swatches "mention")

* Product cards:

[#color-swatches](https://docs.foxecom.com/sleek-theme/product-cards#color-swatches "mention")
{% 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="https://content.gitbook.com/content/3yE7VVjvl0MgK6awOPKB/blobs/FRw4hRtlJxYP6yZ0N9vX/image.png" alt=""><figcaption></figcaption></figure>

### Color swatches

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FiIjENSfMw4zuWlAoE2Nj%2Fswatches-2.png?alt=media&#x26;token=76b3ce86-e083-44ab-9114-9c4defd0e556" 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="https://content.gitbook.com/content/3yE7VVjvl0MgK6awOPKB/blobs/OmdK5TdcTrqJoallpgAn/image.png" 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="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCUsSjb0C17R7p2e4MiL1%2Flivechat883x471%20(1).png?alt=media&#x26;token=1ad5a821-413a-4e9b-a7f5-850fc173bcd3" 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>