How to add product swatches
Last updated
Last updated
This guide takes you through adding color swatches on the product template, product cards and filters.
Install app
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 and upload an optional image. Note: You'll also need to make sure your filter has the Include swatch option checked:
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
Optional: Check Theme settings > Appearance > Forms > Swatch style to choose a swatch shape: circle, rectangle or square
In the app, go to Filters > Add filter
Select Source: Color
Hit Save
You should now see the swatches appear on product pages and collection pages.
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
If you use a different word/spelling for "color" you can add it in to the Product variants color list.
Alternatively, use the to add other variant types, e.g. "Metal color".
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
Install app. Once installed:
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 ).
Check that your color variant is spelled as expected: "color" or "colour" in English. If not, you can add your spelling in > Product variants color list.
Consult Shopify's
Check an updated copy of Shopify's 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 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 .
