1. OPTIS Color Swatch
2. Variant Display

💊Pill swatch

Available on: Product page only

✨Demo product: Pill swatch (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.

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 or 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.

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 → uses the variant images already set in your Shopify product. No per-value setup needed.

• 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.

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.

Show price, the thumbnail size, and the pill's text, padding, and colors are configured in Styling — not in this editor.

How it looks on your store

• Product page:

Related

• 🧩 Swatch card — a larger card layout with the same two sources
• 🎨 Custom swatch / 🖼️ Auto image swatch — the two sources
• Styling settings reference — show price, thumbnail size, colors

Updated on: 25/09/2026