# 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="/files/6fEJeQkpCWIWMIPPEwRk" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/PHiBbxRkOVG7ADy0uHsj" 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
```


---

# 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://oranthemes.gitbook.io/nimbus-theme/theme-settings/color-swatch.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.