Getting started

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.

  1. On the product, open the Color option.
  2. Choose Connect to a metafield (Shopify calls the values “Color”).
  3. 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.