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:
Category Path | Type |
|---|---|
Apparel & Accessories > Clothing > Clothing Tops > Shirts | General clothing |
Apparel & Accessories > Shoes > Athletic Shoes | Footwear |
Apparel & Accessories > Clothing > Outerwear > Jackets & Coats | Outerwear |
Apparel & Accessories > Clothing > Underwear & Socks > Socks | Intimate apparel |
💡 You can add color swatches for any category metafield that includes the color product attribute.
To Add a Product Category:
From your Shopify admin, click Products.
Click on the product you'd like to edit.
In the Category section, choose the most appropriate category (e.g., Shirts).
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:
Go to Products in your Shopify admin.
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:
Go to Products in your admin.
Select the product to edit.
In the Variants section, click + Add options like size or color.
If a category metafield is available (e.g., Color), select it.
Variant option values will auto-fill from the metafield entries.
(Optional) To add a custom option value:
Click Edit > Add new entry
Fill in the entry fields and click Save
Click Save on the product.
Step Four: Enable Swatches
Color swatches can be enabled from your theme customizer. This allows visual selection of color (or other) variants on the storefront.
Places to Enable Swatches:
Templates> Product Page > Variant Picker block
Home Page > Featured Product> Variant Picker block section (under Sections)
Theme Settings > Product Tiles
