Swatches

Swatches on the product page let customers pick a variant visually. These settings control how they look.

Swatches setting panel

These settings apply to swatches on the product page. Swatches on product cards in collection grids are configured separately under Product Cards → Swatches.

---

Swatch Style

Choose how variants are shown — Color, Variant image, Button, or Dropdown.

Color

Color swatch style

Filled color tiles.

Variant image

Variant image swatch style

Each variant's first product image as a thumbnail.

Button

Button swatch style

Each variant as a text button.

Dropdown

Dropdown swatch style

Variants in a collapsed select menu.

---

Appearance

Sets the swatch width, shape, and selected state.

• Desktop width / Mobile width — Swatch width on each screen size.

• Height ratio — Swatch shape, from square to a wide strip. Only available for Color swatches.

• Selected style — Mark the selected swatch with a Border (an outer ring) or an Underline (a line beneath).

---

Need help?

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

Chat with us Submit a ticket