> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/swatch-and-button/swatch.md).

# Swatch

A **Swatch** shows each value as a color block or a small image instead of a list, so customers can visually pick a color, style, or material.

✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/swatch?variant=51025989075222)

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F7BRB03P4BGUQV9pCp4nH%2FScreenshot%20-%202026-01-13T140048.698.png?alt=media&amp;token=9d86e87a-7b38-4521-ab1d-53d2e5f3b20c" alt=""><figcaption></figcaption></figure>

## When to use a Swatch

* **Color selection** for apparel or accessories.
* **Material or texture choice** for furniture and home decor.
* **Visual personalization** - monogram styles, finishes, and more.

## How to add a Swatch option

### Step 1: Add the option

Open **1. Add options**, click **Add option**, tick **Swatch** under **Swatch** on the **New options** tab, then click **Add options**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FoIXTMFhfDLgTfqfnHEVI%2F31.png?alt=media&amp;token=3101db53-36ed-4b23-8ea9-d1a361ed22da" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdu41GpoydhSlZCrwNUtUiH_GKsbXVqVsab8DvNA48jjahqfXw2Njkg4YoWPAbZfgHbIKSQYU0ucEVSSGJnIWK_sEcakgwzIPDXD-_8bewi6JoiTL7xk9XrOx1cEXa_JLZQzUvarg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

### Step 2: Name it, add values and set each swatch

Enter the **Label on product** (e.g., "Choose Color") and add the **Option values** (e.g., Red, Blue, Black). Tick **Required field** if customers must choose before checking out, or **Hide option label** to hide the label.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fiu0Qfpl9Z3TZqvn9TGBQ%2F32.png?alt=media&amp;token=97485db2-9734-46ef-a031-e0581ba0f0dd" alt=""><figcaption></figcaption></figure>

For each value, choose:

* A **color swatch** (solid color)

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FLUsaa7t6uEz9oHacU5r8%2F33.png?alt=media&amp;token=b0a31800-9b33-4213-9885-97184ca12688" alt=""><figcaption></figcaption></figure>

* Or an **image swatch** (upload your own image)

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FnZ1WV5zGRxHkyWeSUtFY%2F34.png?alt=media&amp;token=d6f5b19e-8846-498c-a095-33fa600b0372" alt=""><figcaption></figcaption></figure>

Tick **Show option value label** if you also want the value's name shown below or next to the swatch.

### Step 3: Save and test

Click **Save**, then open the product page on your store to check that the Swatch works correctly.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FFzxMNV9rzyA07GgUFdvX%2F37.png?alt=media&amp;token=85d50f9c-5b7b-4c3a-9194-547ce8b70059" alt=""><figcaption></figcaption></figure>

## Option settings

Set only what you need - all of the settings below are optional. In the **Option values** table, click **Columns** to show **Add-on**, **Help text**, **SKU** or **Quantity** for each value:

* **Add-on** - charge extra for a value (**Extra fee**, Advanced plan and above) or link it to a Shopify variant (**Upsell product**, Platinum and above). See [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option.md).
* **SKU** - a SKU for that value. Advanced plan and above.

### Default value

Toggle **Default** for the value that should be pre-selected when the customer opens the product page (e.g., "Black" selected automatically).

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F25xfk9TniaMuaNTbOcT9%2F35.png?alt=media&amp;token=71accb5e-780b-4346-b62b-103e3b851ca1" alt=""><figcaption></figcaption></figure>

How it looks on your storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FwLW2Tnirjy6i0Un6Ra2p%2F36.png?alt=media&amp;token=b2e4c19c-3e32-4f70-9c31-8dd89cf43810" alt=""><figcaption></figcaption></figure>

### Quantity

Turn on the **Quantity** column so customers can pick several values and set how many of each, using **Min quantity** and **Max quantity**. Available on the **Platinum** plan and above. See [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md).

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FdU4vmT697Hzw2PJUTw0g%2F12.png?alt=media&amp;token=7c1647cc-be91-4bc0-997b-62a9062960a7" alt=""><figcaption></figcaption></figure>

### Limit how many values can be selected

Set **Min** and **Max** to control how many values a customer can pick. Available on the **Advanced** plan and above. See [Limit Min/Max Selectors](/product-options/faq/limit-min-max-selectors-in-checkbox-button-options-swatch.md).

### Help text

Add a short note explaining what to choose. Choose how it's shown: **Tooltip**, **Below the option title**, **Beside the option title**, or **Below the option**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FTTd0Z02tyJJgBCQqIle2%2F9.png?alt=media&amp;token=3f4c410a-1b59-48ea-b53a-d606ebed96fd" alt=""><figcaption></figcaption></figure>

### Preview the choice on the product (live mockup)

Show customers what their selected swatch looks like on the product image, updated in real time. Available on the **Platinum** plan and above. See [Product Personalizer - Live Mockup Settings](/product-options/advanced-setup/product-personalizer-live-mockup-settings.md).

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FYqgYKLOJ417HCsS9E8pY%2F12.png?alt=media&amp;token=847e906d-cce5-4858-b0a4-95ee70380035" alt=""><figcaption></figcaption></figure>

### Show or hide with Visibility (conditional logic)

Show or hide the Swatch based on another option. Available on the **Advanced** plan and above. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics.md).

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FRVVJTu68ClESmHxinAXz%2F4.png?alt=media&amp;token=4ef5830f-56a4-4cbd-94ba-e94e8db2bdda" alt=""><figcaption></figcaption></figure>

With many values, you can arrange them in a single line or let them wrap, using **Option width** in the **Display** tab.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfaumUqLADSmK0Dz5vBSECq1h2pylBaPpzn9k-QoYV4q6UQOJVxZEVuQXKIK4_JDF7AbJpb8xzqxOMlGy_v0xGXi2m7WoX1Iu30tn_aJjjIFSD5iKr6t3t9wdc-y60jq-W5KhpMNQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

## Related guides

* [Button](/product-options/20-option-types/swatch-and-button/button.md)
* [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option.md)
* [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md)
* [Limit Min/Max Selectors](/product-options/faq/limit-min-max-selectors-in-checkbox-button-options-swatch.md)
* [Product Personalizer - Live Mockup Settings](/product-options/advanced-setup/product-personalizer-live-mockup-settings.md)
* [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics.md)