# 💊 Pill swatch

{% hint style="success" %}
**Available on:** Product page only
{% endhint %}

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

<figure><img src="/files/3e3jPWjlCC3HJElWg72v" alt=""><figcaption></figcaption></figure>

### **Function**

Displays each variant as a rounded pill with a small preview (image or color), option value and price (optional) in a single horizontal layout.

### **How it works**

* Each variant appears as a **rounded pill button**
* A **small thumbnail (image or color swatch)** is shown on the left
* The **option value (e.g., Black, Blue, Brown)** is displayed next to it

### **Use when**

* You want a **clean but still slightly visual** variant selector
* Variants have **simple differences** but still benefit from a small preview

### **How to use Pill swatch**

{% stepper %}
{% step %}

#### **Change the display type to Pill swatch > Click Save**

{% endstep %}

{% step %}

#### Choose the swatch source:

* **Auto Image Swatch**\
  → Uses the variant images already set in your Shopify product

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

* **Custom Swatch**\
  → Upload your own images or use solid colors (hex codes) for each variant

<figure><img src="/files/yeWWGhPOyDX2G26L8ykl" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Click Save to apply changes

{% endstep %}
{% endstepper %}

### **How it looks on your store:**

* Product page:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optis.me/swatch/variant-display/pill-swatch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.