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.
Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Color swatches.
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
- 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.
- 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.
- For each entry, set a color (hex value) or upload a pattern image. You can edit entries later under Content → Metaobjects.
- 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.