Color swatches
Show each color as a real swatch, with its own color or pattern image.
1. Give the product a category
Open the product and choose a Category that has a Color attribute, for example a clothing or accessory category. Shopify needs it to offer color values.
2. Connect the color option
- On the product, open the Color option.
- Choose Connect to a metafield (Shopify calls the values “Color”).
- Pick an existing color for each value, or create one with its own hex color or pattern image.
How it looks
Swatches show on the product page, in quick view and on product cards. Their shape and size are set in the Options picker block and in Product cards.
Without connected colors
An option named Color that isn’t connected still works: it shows the color names as buttons.
Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.
