Swatch style

Open Variant swatches, then Swatch style. What you set here applies to every product. The live preview on the right updates as you go.

Product page and product card

The two tabs style swatches in two places: Product page, and Product card on collection and search pages. Card swatches are usually smaller, so each has its own settings.

Quick looks

Start from a look: Classic circles, Soft squares, Big photos or Minimal. Each sets shape, size and borders. Then fine-tune below.

The settings

• Shape and size — circle, rounded or square, and the width. Leave Height blank to match the width, or set it for tall photo swatches.
• Borders — the ring around each swatch, and a stronger one around the chosen swatch.
• Photos and colors — Swatch content can switch photo swatches to their colors everywhere. Image fit fills the swatch or shows the whole photo. Two-color split sets which way two-tone swatches divide.
• Labels — Replace option buttons swaps your theme’s buttons for swatches; turned off, the swatch sits inside your theme’s button. Option heading controls the words above the swatches. You can also show names below swatches or on hover.
• Spacing — room between swatches and around the row, and alignment. On product cards, Maximum visible shows a “+” count after that many.
• Sold out — crossed out, faded or hidden.
• Button style — shown when swatches sit inside your theme’s buttons, to style those buttons.
• Advanced — Extra CSS for anything not covered above. Most stores leave it empty.

Press Save at the top to publish. Restore defaults puts the tab back to how it started.