Setting Up Color Swatches

For Plain Jane and Interactive Only

What You’ll Learn

• How to assign a product category

• How to apply color swatches using Shopify's category metafields

• How to connect a color metafield to your theme’s product variants

1. Open the Product Page in the Theme Editor

• In the Shopify admin, go to Online Store > Themes, then click Customize on your live theme.

• Navigate to a product page.

• Click the Product Variants block inside the Product Section.

• Under Variant Style, select Color Swatches.

💡 Tip: Use the preview selector to load a product that has multiple color variants.

2. Assign a Category in the Shopify Admin

• Go to Products in the Shopify Admin.

• Click on the product you want to edit.

• Scroll to the Category section and assign it to a relevant option (e.g. Apparel & Accessories).

3. Add Color Values to the Category Metafields

• After assigning a category, scroll down to Category Metafields.

• You’ll now see options specific to that category (like “Color”).

• Click into the Color field and either select from the list or choose Add new entry to type in a custom color.

4. Link the Color Metafield to the Variant Block

• Return to the Theme Editor and click the Product Variants block again.

• Locate the color variant and click the dynamic source icon (stacked circle icon).

• Select the color metafield you added from the dropdown.

5. Save Your Changes

• Click Done and then Save at the top-right of the theme editor.

---

✅ Your product should now display clickable color swatches based on the metafield values you added.

⚠️ Warning: Color swatches only appear if your product has a variant option named “Color” and it’s matched with the corresponding metafield.

Need Help?

• 💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6

• 📧 Email us at: [email protected]

• 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website