For the complete documentation index, see llms.txt. This page is also available as Markdown.

💊Pill swatch

✨Demo product: Pill swatch (password: 1)

Pill swatch shown on a product

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

1

Change the display type to Pill swatch > Click Save

2

Choose the swatch source:

Pill swatch using the Auto Image Swatch source
  • Custom Swatch → Upload your own images or use solid colors (hex codes) for each variant

Pill swatch using the Custom Swatch source
3

Click Save to apply changes

How it looks on your store:

  • Product page:

Pill swatch on the product page

Last updated