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.

팁

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.