How to add color swatches using Shopify category metafields in Webflow

What are category metafields?

Category metafields map to specific product categories in Shopify's Standard Product Taxonomy. They help you add structured product attributes like color, size, neckline, and fabric to your products — making them more discoverable on your site, marketplaces, and search engines.

For example, if you add the product category Apparel & Accessories > Clothing > Clothing Tops > Shirts, you can unlock category metafields for clothing size, neckline, sleeve length type, and more — including color with built-in swatch support.

Category metafields have default entries that you can use as-is or customise. For example, you can rename black to graphite to match your branding, and the change applies everywhere that color is used.

① Add a product category in Shopify

1. From your Shopify admin, go to Products.
2. Click a product.
3. In the Category section, select a category that includes the color attribute (e.g., Apparel & Accessories > Clothing > Clothing Tops > Shirts).
4. Click Save.

② Add and edit color entries

After adding a product category, you can add the color entries you need for your product's variant option values.

1. From your Shopify admin, go to Products.
2. Click the product with the category metafields you want to edit.
3. In the Category metafields section, click the color metafield.
4. To use a default entry, click it and edit the fields as needed.
5. To add a custom entry, click Add new entry and fill out the fields.
6. Click Save.

③ Connect color metafield to variant options

1. From your Shopify admin, go to Products.
2. Click the product you want to edit.
3. In the Variants section, click + Add options like size or color.
4. Select the color category metafield. The option values are automatically filled with the entries you added.
5. Optional: Click Edit > Add new entry to add custom values.
6. Click Save.

If you already have variant options, you can migrate them to category metafields by clicking the dynamic source icon on an existing option and connecting it to the category metafield.

④ Display color swatches in Webflow with Shopyflow

Once your color category metafield is connected to variant options in Shopify, Shopyflow detects the color entries and auto-syncs them to the Product Options collection in Webflow CMS during the next sync run. You can also re-import all your products in the Shopyflow Webflow App to speed up the syncing process.

From there, you can connect the hex code values to your swatch elements directly in the Webflow Designer.

Tips

• Category metafield entries are shared across products. Editing a color entry updates it everywhere that color is used.
• You can add custom color entries with hex values and images in Shopify to match your brand.
• Shopyflow syncs category metafield data from the Shopify Storefront API — no manual configuration needed in Webflow beyond connecting the hex codes to your swatch elements.