> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/product-page/product-information/color-swatches-custom.md).

# Color Swatches Custom

The Color Swatches section allows you to define custom color swatch styles for product variants. This section generates CSS styles that override default color swatches with custom colors, gradients, or images. 

Each block represents one color swatch definition.

#### **1. How to add** Color Swatches**?**

* From your Shopify admin, go to **Online Store** **->** **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Find the General group, click **Add section** and choose "**Color Swatches**" section.

<figure><img src="/files/GdMffR36i6Bj7Vm2j6hG" alt=""><figcaption></figcaption></figure>

#### **2. How to define new color for Color Swatch Item?**

Each block defines one color swatch style that will be applied to variant options matching the color name.

Example: If you want to customize the white color to another color, please follow these steps:

* Add "**Color swatch**" block
* Enter the value for the '**Color name**' field with the corresponding color name you want to change (in this example, it's 'white')

<figure><img src="/files/blcbBtPgtrTPO1jB4iFo" alt=""><figcaption></figcaption></figure>

* Once a color swatch item is defined, it will immediately appear on the Category page as shown in the image below.

<figure><img src="/files/XVberVbV8w3AnF6gtaBK" alt=""><figcaption></figcaption></figure>

#### **3. Color Swatch Item - Settings Guide**

| Setting        | Type          | Description                                                                                  |
| -------------- | ------------- | -------------------------------------------------------------------------------------------- |
| **Color Name** | text          | Name of the color variant (must match product variant option name exactly, case-insensitive) |
| **Color 1**    | color         | Primary color for the swatch. Supports alpha/transparency                                    |
| **Color 2**    | color         | Secondary color for gradient swatch. Supports alpha/transparency                             |
| **Image**      | image\_picker | Image/pattern for the swatch. If provided, overrides color settings                          |