Swatch style gallery

Not sure which look to pick? Browse every style below. Your customers will see these on your product pages when they choose a color, size, or other option.

For colors

Rounded Swatch

Works well for: Color

Simple color circles customers tap to choose

Square Swatch

Works well for: Color

Square color tiles—clean and modern

Image Swatch

Works well for: Color (with product images)

A small photo for each color or style

Pill with Rounded Swatch

Works well for: Color

Rounded label with a color dot and name (e.g. Red)

Rectangle with Rounded Swatch

Works well for: Color

Box label with a color dot and option name

For size & style

Rectangle Button Swatch

Works well for: Size, Style

Tap-to-select buttons—great for S, M, L

Pill Button Swatch

Works well for: Size, Style

Soft rounded buttons for size or style

Button with Image Swatch

Works well for: Color, Style

Button with a small image plus label

Dropdown

Dropdown Swatch

Works well for: Size, long lists

Classic dropdown—good for long lists

Which style should I use?

For colors (Red, Blue, Navy, etc.)

• Rounded or Square — Simple color dots or squares. Great for most stores.
• Image — Shows a small product photo for each color. Best when each color has its own image.
• Pill or Rectangle with color — Color plus the option name (e.g. “Red”). Easier to read for some shoppers.

For sizes (S, M, L, etc.)

• Rectangle button or Pill button — Clear buttons customers tap to pick a size.
• Dropdown — A classic menu. Good when you have many sizes or a long list.

For style, material, or other options

• Buttons or Button with image — Works well when the option isn’t a simple color.
• Dropdown — Use when you have lots of choices.

tip

You choose the style for each option in the app under Product options. You can use different styles on the same product—for example, circles for Color and buttons for Size.