# Color swatch

{% hint style="success" %}
**Steps:** 

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

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FkQAOuqvkZOcjMpnK4eXh%2F2025-04-03_23-10-12.jpg?alt=media&#x26;token=91cec2b2-8b07-4d8c-b285-d2e5c7c45ae9" alt=""><figcaption></figcaption></figure>

* **Style** - Square / Rectangle / Round
* **Matching option names** - Define option names to which the color swatch variant picker will be applied.

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/78NIbv1DfDzjk1RVxzJi/vr.jpg" alt="" width="320"><figcaption></figcaption></figure>

* **Configuration -** Each rule must be in its own line.

## Configuration Format

Here's a breakdown of how to format color swatch configurations for each type:

### Solid color

```
Pink:#E25563
Dark Stone:#516E8D
Light Stone:#A2B2BC
```

{% hint style="info" %}
For HEX values, consider using an [online color picker.](https://google.com/search?q=color+picker)
{% endhint %}

### Two tone or Gradiant color

```
Charcoal Melange:linear-gradient(-45deg, #908C94 50%, #39363E 50%)
Chestnut Stripe:linear-gradient(-45deg, #3F3333 50%, #817876 50%)
Bleach: linear-gradient(90deg, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
```

### Image

First, upload the desired swatch images to your Shopify store. To do that, navigate to Content > Files in your Shopify admin and click Upload files. We suggest 64x64 px .jpg\
\
Once uploaded, click on the image and copy name of image In the screen below, it is Syrah.jpg

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/JL1pdyL6XC0N0v71uxiL/file.jpg" alt="" width="563"><figcaption></figcaption></figure>

```
Syrah:Syrah.jpg
Antique White:Antique.jpg
Blue:blue.jpg
Melange:Grey_Melange.jpg
```