How to add color swatches with Shopify's built-in swatch feature?

If you're using an older theme that doesn't support Shopify’s native swatches, check out our alternative color swatch guide.

For newer themes that support Shopify’s built-in swatch functionality, follow the steps below to set up color swatches using product categories, category metafields, and theme settings.

Step one: add a product category

A product category is selected from Shopify’s Standard Product Taxonomy. This is a crucial step because it:

• Unlocks product attributes (category metafields) that are mapped to the selected product category.
• Helps you better manage your products inside Shopify.

Suggested example categories with the color metafield:

You can add color swatches for any category metafield that includes the color product attribute.

To add a product category:

1. From your Shopify admin, click Products.
2. Click on the product you'd like to edit.
3. In the Category section, choose the most appropriate category (e.g., Shirts).
4. Click Save.

Step two: add and edit entries for your category metafields

After setting a product category, you'll need to add or customize entries tied to the metafields (like color, size).

To add or edit entries:

1. Go to Products in your Shopify admin.
2. Select the product with the category metafield you want to modify.

To Add an Entry from Default Entries:

• In the Category metafields section, click the desired metafield.
• Select the existing entry to edit.
• Update the fields as needed and click Save.

To Add a Custom Entry:

• In the Category metafields section, click the metafield, then click Add new entry.
• Fill out the necessary fields (e.g., color name, swatch value).
• Click Save.

Step three: connect category metafields to variant options

Now connect the metafields (e.g., color) to your product’s variant options.

To connect category metafields:

1. Go to Products in your admin.
2. Select the product to edit.
3. In the Variants section, click + Add options like size or color.
4. If a category metafield is available (e.g., Color), select it.
   • Variant option values will auto-fill from the metafield entries.
5. (Optional) To add a custom option value:
   • Click Edit > Add new entry.
   • Fill in the entry fields and click Save.
6. Click Save on the product.

Step four: enable swatches

Note: This feature only supports swatches on product pages and collection filters due to platform limitations. For swatches in the product grid on collection and search results pages, use the theme’s built-in swatch feature.

Color swatches can be enabled from your theme customizer. This allows visual selection of color (or other) variants on the storefront.

Product page

1. In the theme editor, open the page selector and go to Products > Default product.
2. In the left sidebar, select the Variant picker block under the Product section.
3. Turn on Enable color swatches.

Collection page or search results page

1. In the theme editor, go to Theme settings.
2. Select Product tiles.
3. Turn on Enable color swatches.

Collection filters

1. In the theme editor, open the page selector and go to Collections > Default collection.
2. In the left sidebar, select the Product grid section.
3. Turn on Enable color swatches.