Skip to main content

Swatch Styles Reference

Here’s a quick guide to all swatch styles you can use.

Color Swatches

StyleBest forWhat customers see
Rounded SwatchColorCircular color dots
Square SwatchColorSquare color squares
Image SwatchColor (with product images)Product photos as swatches
Pill with Rounded SwatchColorPill with color circle and option name
Rectangle with Rounded SwatchColorRectangle with color circle inside

Button Styles

StyleBest forWhat customers see
Rectangle Button SwatchSize, StyleRectangular buttons (S, M, L)
Pill Button SwatchSize, StyleRounded pill buttons
Button with Image SwatchColor, StyleButton with optional image
StyleBest forWhat customers see
Dropdown SwatchSize, long listsStandard dropdown menu

Choosing a Style

  • Color options → Rounded, Square, or Image Swatch (Image when you have variant photos)
  • Size options → Pill Button, Rectangle Button, or Dropdown
  • Style / Material → Button styles or Dropdown
  • Long lists → Dropdown often works best