Color swatches

The shape of color swatches across the store. Swatches show a product option as a dot of color or a small pattern image instead of its name. They appear on product cards, on the product page, in the quick-add panel and in collection filters.

Good for

• Letting shoppers see a product's colors at a glance on the grid
• Showing patterns or materials (like denim washes) as small images

Give your options swatch colors

1. In Shopify admin, open the product and set its Category (for example Apparel & Accessories › Clothing › Shirts). This makes the category's options, such as Color, available.
2. Under Variants, add or edit the Color option and connect it to the Color category metafield. Pick values from the list, or create your own entries.
3. For each entry, set a color (hex value) or upload a pattern image. You can edit entries later under Content → Metaobjects.
4. Save. The theme reads the swatch color or image directly, and any option whose values have swatch data shows as swatches, whatever the option is called.

Settings

Tips

• Swatches come from Shopify, not from option names. Typing Red as an option value isn't enough: the value needs a swatch color or image in Shopify admin.
• Use images for patterns and multi-color values. A small photo of the fabric shows a stripe or print far better than a single color.
• Filters use the same swatches. Once your values have swatch data, collection filters for that option show swatches too.

Troubleshooting

My swatches show as empty or blank

The option value has no swatch color or image in Shopify admin. Open the value's entry under Content → Metaobjects and set a color or image.

Some swatches have a line through them

A crossed-out swatch means that option value is sold out.

Square swatches don't follow my border radius

Swatches are either fully round (Circle) or have sharp corners (Square). The Border radius sliders don't affect them.