# Color swatch

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

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

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fd49hW9sMLXUO3Sw27Bsi%2Fsw-1.jpg?alt=media&#x26;token=b6a31f05-2123-4610-b766-7d7cceef5f65" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FkwLsq8kAu1zdzXllzExW%2Fcl.jpg?alt=media&#x26;token=68a21a4b-7a1b-4aa9-8882-02ef75792479" 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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FmLaPEgtCBJzs0iIV2ph2%2Fvr.jpg?alt=media&#x26;token=dfd019c7-7d8b-403b-b4cb-57c90ee43449" 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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FpRGdmbb4EzhA5HJX86Wu%2Ffile.jpg?alt=media&#x26;token=151f47d3-a9d6-47e8-900b-f94ab62ef943" alt="" width="563"><figcaption></figcaption></figure>

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