How to add product swatches

A step-by-step guide to adding native swatches in Primavera.

This guide takes you through adding color swatches on the product template, product cards and filters.

• Configure products:

  • Ensure you have selected a Category

  • Once selected, you should now have access to category-specific metafields further down the page, including Color:

  • In the Color metafield, select a color from the default entries.

    • Alternatively, if the color you're looking for doesn't exist or you'd like to create a more precise color swatch, click on Add new entry and either select a color (hex code) or upload an image that conveys the correct color/texture/pattern. Choose a base color which determines which color group this entry should appear under in filters, when enabled.

  • With all your color entries created, go to Variants > Add options like size or color

  • Select Color from the recommended options

  • Your color variants should now be automatically created and connected based on your category metafield entries

  • Hit Save

• Enable swatches on product cards (these should be enabled by default):

  • Go to Theme settings > Product cards

  • Ensure Variants > Display style is set to either Always visible or On hover/focus

  • Ensure Variants > Color display style is set to List

Check your Product card settings in Theme settings

The theme checks for spellings "color" or "colour".

• If you use a different word/spelling for "color" you can add it in Default theme content to the Product variants color list.

• Alternatively, use the Other display style to add other variant types, e.g. "Metal color".

• Enable filtering in your collection template(s) to ensure color filters appear

• On your product template(s), ensure the Variant picker block has been added and that the Swatch setting is set to Default

• Optional: Check Theme settings > Appearance > Forms > Swatch style to choose a swatch shape: circle, rectangle or square

• Install the Shopify Search & Discovery app. Once installed:

  • In the app, go to Filters > Add filter

  • Select Source: Color

  • If you want to display the swatch image instead of the color in filters, click on Manage values and check the Use images when available option:

  • Hit Save

Optional: Review your values, e.g. group them together, or opt to create the values manually instead of automatically, or edit the values (by editing the values you can also select an image for your swatch, like we did for eyeshadow palettes on the Gloss demo store).

You should now see the swatches appear on product pages and collection pages.

Troubleshooting

• Ensure the product has a category selected

• Ensure the color variant is connected to the color metafield

• If the swatches aren't displaying, try disconnecting and reconnecting the variant to the color category metafield

• Check that your color variant is spelled as expected: "color" or "colour" in English. If not, you can add your spelling in Default theme content > Product variants color list.

• Consult Shopify's documentation

• Check an updated copy of Shopify's Dawn theme to see if the swatches are appearing there.

  • If they are appearing on Dawn, this may be a Primavera configuration issue so kindly check the above steps or get in touch with us so we can guide you.

  • If they're not appearing on Dawn, this is likely a Shopify configuration issue, unrelated to Primavera, and we recommend reaching out to Shopify support.