> ## 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).

# 💊Pill swatch

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

# 💊Pill swatch

**Available on:** Product page only

✨Demo product: [Pill swatch](https://optis-color-swatch-variant.myshopify.com/products/pill-swatch?variant=45492608925833) (password: 1)

### Function

Displays each variant as a **rounded pill** with a **small preview (image or color)**, the **option value**, and the **price (optional)** in a single horizontal layout — a clean selector that's still slightly visual.

![](https://storage.crisp.chat/users/helpdesk/website/-/1/1/0/2/1102434c689d7300/debfcdae-63be-4d89-a043-9c590d_x2z63r.png)

### How it works

* Each value appears as a **rounded pill button**.
* A **small thumbnail** (image or color swatch) sits on the left.
* The **option value** (e.g. Black, Blue, Brown) is shown next to it, with the selected pill highlighted.
* The thumbnail comes from one of two **sources** you choose: [Auto image swatch](/swatch/variant-display/auto-image-swatch) or [Custom swatch](/swatch/variant-display/custom-swatch).

### Use when

* You want a **clean but still slightly visual** variant selector.
* Variants have **simple differences** but still benefit from a small preview.
* You'd like to show the **value name (and price)** next to the swatch, but more compact than a [Swatch card](/swatch/variant-display/swatch-card).

---
## How to use Pill swatch

1. Choose the display type to Pill swatch → Click Save

2. Open the editor (pencil icon) and choose the swatch source

Click the **pencil / edit icon** next to the display type. At the top of the editor, use the **source** dropdown:

* [Auto image swatch](/swatch/variant-display/auto-image-swatch) → uses the variant images already set in your Shopify product. No per-value setup needed.

![Pill swatch using the Auto image swatch source](https://storage.crisp.chat/users/helpdesk/website/-/8/0/4/d/804d6586b1d9f000/992bbae1-4c69-46ff-8a4a-c577d3_1bj8q6y.png)

* [Custom swatch](/swatch/variant-display/custom-swatch) → set each value by hand: upload your own images, or use solid colors / two-color splits (hex codes), with a live preview per value.

![Pill swatch using the Custom swatch source](https://storage.crisp.chat/users/helpdesk/website/-/a/b/1/4/ab1469fd04340000/6ccc35c6-9f77-4be4-89e3-6d3f65_172bgai.png)

3. Click Save to apply changes

On the **Custom swatch** source you can also use **✨ Auto-assign swatch** and **Bulk update** inside the editor — exactly as in [Custom swatch](/swatch/variant-display/custom-swatch).

**Show price**, the **thumbnail size**, and the pill's **text, padding, and colors** are configured in [Styling](/swatch/styling/styling-overview) — not in this editor.

---
## How it looks on your store

* **Product page:**

![Pill swatch on the product page](https://storage.crisp.chat/users/helpdesk/website/-/b/2/3/c/b23c2d7eff21e000/583fd4c7-8ce4-4c89-9f1a-11c11d_1neoinq.png)

### Related

* [🧩 Swatch card](/swatch/variant-display/swatch-card) — a larger card layout with the same two sources
* [🎨 Custom swatch](/swatch/variant-display/custom-swatch) / [🖼️ Auto image swatch](/swatch/variant-display/auto-image-swatch) — the two sources
* [Styling settings reference](/swatch/styling/styling-settings-reference) — show price, thumbnail size, colors