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

# Color swatches

A guide to customizing **Color swatches** for your store’s products, helping you showcase variants more visually and improve the shopping experience.

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

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Hide sold out variants</strong></td><td>Hide swatches for color variants that are out of stock.</td></tr><tr><td><strong>Show sale in variant swatch</strong></td><td>Show the sale amount inside the variant swatches.</td></tr><tr><td><strong>Swatch type</strong></td><td>Choose how to display product variants.</td></tr><tr><td><strong>Color shape</strong></td><td>Select the shape of the color swatch: Choose either <strong>round</strong> or <strong>square</strong>.</td></tr></tbody></table>

### **Swatch type**

Choose how to display product variants:

* **Variant image** – Displays the image assigned to each variant as the swatch.
* **Color** – Displays a solid color swatch or a custom image based on the selected color option and any custom colors you define.

{% tabs %}
{% tab title="Variant image" %}

<figure><img src="/files/VofrTQ3dcBLj7epbh2FJ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Color" %}

<figure><img src="/files/O5ZI1vdBSGMNLaa9st7c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Color swatch trigger**

Enter the exact option name(s) for the variant type you want to display as color swatches (e.g., “Color,Colour,Cor").

If you have multiple option names, separate each with a comma. The names must match your product variant option names exactly. If left blank, the default option name “Color” will be used.

**When the color swatch trigger has been set:**

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

**When no color swatch trigger is defined, or the defined trigger does not match any of your variant options:**

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

### **Custom colors**

Define a custom value for your color variants by listing them with either a hex color code or an image name. Use the format:

* Hex color code → `Sunlit Bronze:#4b2f27`
* Image name → `Sunlit Bronze:sunlit-bronze.png`

Separate multiple entries with commas, and make sure each color name matches your product variant name exactly. Ensure any referenced images are uploaded to your store’s files beforehand.

{% hint style="info" %}
**For example:** You upload an image named `cosmetic_products_29_7.jpg` and assign it to the **Black Cherry** color. After this, even if the swatch type is set to **Color**, the **Black Cherry** option will still display using the `cosmetic_products_29_7.jpg` image.
{% endhint %}

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

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