Swatches Theme Settings

Swatches let you replace plain text variant names (like “Red” or “Blue”) with visual color circles, images, or shapes.
They are most commonly used for color variants on product pages and product cards.

Swatches help customers:

• Quickly recognize colors and styles
• Compare options visually
• Improve shopping experience and conversions

Color option names

This setting defines which product options should use swatches.

You can add multiple names separated by commas.

Example

color, couleur, farbe

This is useful when your store is translated or uses different naming conventions.
Any option that matches one of these names will automatically display as swatches.

Custom colors

Here you can define custom color values manually.

Format:

color name: #hexvalue

Write each color on a new line.

Example

forest green: #2E6A3D
cream: #F5E9D8
wine: #6A0D37

Use this when:

• Shopify doesn’t recognize a color name
• You want precise brand colors
• You want to standardize color variations across products

You can learn more in the Color Swatches page (link inside docs).

Swatch shape

Controls the visual shape of swatches.

Options:

• Circle
• Square
• Button radius (follows your global button radius)

Choose the one that best fits your store’s design style.

Swatch dimensions

Controls the size and ratio of the swatches.

Options:

• 1:1 — perfect square
• 3:1 — wider than tall (great for fabric or pattern previews)

Use wide swatches when you want more visual space for patterns or textures.

Summary

Swatches give you:

✔ Visual product selection
✔ Cleaner UI
✔ Better UX and higher conversions

And you control:

• Which options become swatches
• Custom color definitions
• Shape style
• Display dimensions