> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/edge-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oranthemes.gitbook.io/edge-theme/theme-settings/color-swatch.md).

# 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="/files/9aHqNK5Nj8UsIMwYMY8W" 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="/files/Slwwhfex3leF6rhN8pXa" 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="/files/OAOoO01SAKnyOoozMC4q" alt="" width="563"><figcaption></figcaption></figure>

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