How to add product swatches

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

Color swatches on the Primavera Gloss demo store

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

• Configure products:

  • Ensure you have selected a Category

  • Variants > Add options like size or color

  • Select Color from the recommended options (if it's not suggested, click on the Connect metafield icon and select Color)

  • Click into the Add color field and select the colors you'd like to display, then click on Done and Save

  • Optional: To edit the swatch, for example to add an image like the metallic pink in the screenshot below, click on the color and select Edit. In the next screen, you'll be able to choose the base color (if you want it grouped under a parent color in filters) and upload an optional image.

• 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 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 (or whichever category metafield you're using)

• 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.