> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🎨Custom swatch

1. [OPTIS Color Swatch](/swatch)
2. [Variant Display](/swatch/variant-display)

# 🎨Custom swatch

| **Available on:** Product page, Collection page

✨Demo product: [Custom swatch](https://optis-color-swatch-variant.myshopify.com/products/custom-swatch?pr_prod_strat=collection_fallback\&pr_rec_id=a9de6891c\&pr_rec_pid=8274609307785\&pr_ref_pid=8274596233353\&pr_seq=uniform) (password: 1)

![Custom swatch demo](https://storage.crisp.chat/users/helpdesk/website/-/c/4/1/0/c410617bb3e04000/d3c02614-a200-4824-8850-f1adbc_5k3th0.gif)

### Function

**Custom swatch** lets you manually decide what each variant value looks like, instead of relying on the product images. For every value you can set:

* An **uploaded image** — a pattern, texture, fabric close-up, or any picture you choose, or
* A **solid color** entered as a **hex code**, or
* A **two-color split** — two hex codes shown side by side in the same swatch (great for values like _Black / White_).

Each value is independent, so you can mix images and colors within the same option.

### Use when

* Variants already have images in Shopify **but you don’t want to use those images as swatches**.
* You want swatches to show **patterns, textures, materials, or plain colors** rather than full product photos.
* A value has **no variant image**, so [Auto image swatch](/swatch/variant-display/auto-image-swatch) has nothing to show.
* You need **precise brand colors** that a photo can’t reproduce accurately.

### Custom swatch vs. Auto image swatch

| Custom swatch | Auto image swatch |
| --- | --- |
| You set the image/color for each value by hand | Uses the variant images already in Shopify |
| Supports solid colors, two-color split, and uploaded images | Shows the product photo only |
| Best for colors, patterns, and textures | Best when variant photos already look good as swatches |

---
## How to use Custom swatch

1. **Change the display type to Custom swatch → Click Save**

In **Variants display**, find the option you want to configure and set its **Product page display** (and/or **Collection page display**) to **Custom swatch**.

![Changing the display type to Custom swatch](https://storage.crisp.chat/users/helpdesk/website/-/4/2/b/e/42be10a399f56000/171e9019-7f42-4690-8a23-0690c1_1ev5pn1.png)

2. **Open the swatch editor (pencil icon)**

Once the display type is **Custom swatch**, a **pencil / edit icon** appears next to it. Click it to open the editor — titled **Custom Swatch:** **_{option name}_** — which lists every value of that option.

![The Custom swatch editor](https://storage.crisp.chat/users/helpdesk/website/-/c/2/0/b/c20b44fe791af800/b5f3cfe1-a5d6-4756-aa16-b8e03f_98a3v.png)

3. **Assign an image or color to each value**

For each value row you have three ways to set the swatch:

* **Add color (1st color)** — click the first color box and pick a color or paste a **hex code** (e.g. `#FF0000`).
* **Add a 2nd color** — pick a second color to create a **two-color split** swatch. The direction of the split (diagonal, horizontal, vertical) is controlled globally in [Two-color swatch split](/swatch/global-settings/two-color-swatch-split).
* **Upload image** — upload your own picture (pattern, texture, fabric detail, etc.) to use as the swatch.

The **thumbnail on the left updates live** so you can preview exactly how the swatch will look.

|| A value can be **either a color or an image**, not both. Setting a color clears an uploaded image for that value, and uploading an image clears the colors — the editor switches automatically.

4. **(Optional) Save time with Auto-assign & Bulk update**

At the bottom of the editor you’ll find two helpers:

* **✨ Auto-assign swatch** — fills in a matching color for every value in one click (from the Color taxonomy metafield, the value name, or the variant image). See [Auto-assign swatch](/swatch/variant-display/auto-assign-color-swatch).
* **Bulk update** — **Import** a `.csv` / `.xlsx` file to set many swatches at once, or **Export** your current values to edit them in a spreadsheet.

Use the **Search variant** box at the top to quickly find a value when an option has many of them.

5. **Click Save to apply changes**

||| **A 2nd color needs a 1st color.** If you set only the second color of a value, the editor shows an error and **Save is disabled** until you also set the first color (or clear the second one).

---
## How it looks on your store

* **Product page:**

![Custom swatch on the product page](https://storage.crisp.chat/users/helpdesk/website/-/5/e/4/b/5e4b948ef5a9c400/cd4b7a19-5617-4fc4-9b85-424313_1a6hkvu.png)

* **Collection page:**

![Custom swatch on the collection page](https://storage.crisp.chat/users/helpdesk/website/-/2/0/2/d/202dc12182c79000/b43f0256-6288-482e-873b-ccace4_1csh0sp.png)

|| Want to change the **size, shape, spacing, or border** of the swatches? That’s handled separately in [Styling](https://help.optis.me/en/article/styling-overview-1sgqoyf/), not in the Custom swatch editor.

### Related

* [🖼️ Auto image swatch](/swatch/variant-display/auto-image-swatch) — use variant images automatically
* [🪄 Auto-assign swatch](/swatch/variant-display/auto-assign-color-swatch) — fill colors in one click
* [Two-color swatch split](/swatch/global-settings/two-color-swatch-split) — control the split direction