How to Add Color Swatches Using Category Metafields in the Empire Theme

Color swatches allow customers to view product color options visually instead of selecting from text-only variant names. In the Empire theme, swatches can be used with color-based product variants when the product is set up correctly in Shopify and the theme’s color swatch settings are enabled.

Shopify’s category metafields are based on Shopify’s Standard Product Taxonomy. When you assign a product category, Shopify can unlock category-specific attributes, such as color, size, material, or pattern. These values can then be connected to product variant options and displayed as swatches in supported themes.

Note: Category metafields help manage product data and color values in Shopify, but Empire’s color swatch settings may still need to be enabled for swatches to display on your storefront.

Before you begin

Before setting up color swatches, confirm the following:

• Your product has a product category assigned in Shopify.
• Your product has color-based variants, such as Color, Colour, or another color option name.
• Your product category supports a color category metafield.
• You are using a version of Empire that supports color swatches.
• Your color option name matches the option name entered in Empire’s color swatch settings.

For example, if your product option is named Colour, make sure Colour is included in the theme’s swatch trigger setting.

Step 1: Assign a product category in Shopify

Shopify category metafields depend on the product category assigned to the product. If a product category is not assigned, Shopify may not show the available category metafields.

To assign a product category:

1. From your Shopify admin, go to Products.
2. Open the product you want to update.
3. Locate the Category field.
4. Select the most accurate product category.
5. Click Save.

After the product category is assigned, Shopify may display available category metafields for that product type.

Step 2: Add or edit color entries

Color entries are the values that Shopify uses for the swatches. These can include standard color names, custom colors, or patterns, depending on the category metafield.

To add or edit color entries:

1. From your Shopify admin, go to Content.
2. Select Metaobjects.
3. Open the relevant category metafield entry, such as Color.
4. Add a new color entry or edit an existing one.
5. Add the color name and swatch value.
6. Click Save.

You can also add or edit color entries directly while editing the product’s variant options, if Shopify displays that option in the product editor. 

Step 3: Connect the category metafield to your product variants

After the product category and color entries are set up, connect the category metafield to the product’s variant option.

To connect the category metafield:

1. From your Shopify admin, go to Products.
2. Open the product you want to update.
3. Go to the Variants section.
4. Click + Add options like size or color.
5. Select the available category metafield, such as Color.
6. Choose the color values that apply to the product.
7. Add the remaining variant details, such as price, inventory, images, and SKUs.
8. Click Save.

Once connected, Shopify will use the category metafield values for the product’s color variant option.

Step 4: Enable color swatches in the Empire theme

After setting up the color values in Shopify, enable color swatches in the Empire theme.

To enable color swatches:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Empire theme.
3. Click Edit theme.
4. Open Theme settings.
5. Go to Products.
6. Find the Color swatches settings.
7. Click enable color swatches and save.

Step 5: Add color swatches as collection filters

If you want customers to filter products by color on collection pages, use Shopify’s Search & Discovery app.

To add color as a storefront filter:

1. From your Shopify admin, go to Apps.
2. Open Shopify Search & Discovery.
3. Go to Filters.
4. Click Add filter.
5. Select the color category metafield or product option you want to use as a filter.
6. Click Save.

After the filter is added, preview your collection page to confirm that the color filter appears.

Note: Collection filters are managed through Shopify’s Search & Discovery app. The Empire theme controls how the storefront displays supported filters, but the filter source itself is managed in Shopify.

Step 6: Preview and test your swatches

After completing the setup:

1. Open a product with color variants.
2. Confirm that the color options display as swatches.
3. Select each swatch to make sure the correct variant is selected.
4. Check that the correct product image appears for each variant, if variant images are assigned.
5. Open a collection page and check whether product card swatches display correctly.
6. Test the color filter, if you added one through Shopify Search & Discovery.
7. Review both desktop and mobile views.

FAQ

Can I use Shopify category metafields for color swatches in Empire?

• Yes. Shopify category metafields can be used to manage color values for product variants. Once the product values are connected in Shopify, Empire can display them as swatches when the theme’s color swatch settings are enabled.

Do category metafields automatically enable swatches in Empire?

• No. Category metafields manage the product data in Shopify, but Empire’s swatch settings still need to be configured in the theme editor.

Where do I enable color swatches in Empire?

• In the Empire theme editor, go to Theme settings > Products, then look for the Color swatches settings. Add the product option names that should display as swatches, such as Color or Colour.

Can I use category metafields for collection filters?

• Yes. To use color values as collection filters, add the color option or category metafield as a filter in Shopify’s Search & Discovery app.

Why do my swatches show on some products but not others?

• This usually happens when products use different option names or are missing category metafield values. For example, one product may use Color, while another uses Colour or Shade.
• To fix this, make sure your product option names are consistent and included in Empire’s swatch trigger settings.

Can I use custom color names?

• Yes. You can add custom color entries in Shopify’s category metafield or metaobject settings. After creating the custom color entry, assign it to the product variant option.