Color swatches will only appear with color if the variant name matches a CSS color value. For example, if you have a color named “Beach blue” it will appear as a transparent circle. In this situation, you would want to upload a custom image for this swatch.

Summary

Color swatches are used to make variant selections easier and more intuitive for customers when they are selecting a color option. Color swatches appear on collection and product pages and can be used when filtering product results.

How to

Using visual filters

• Paper 7.3.0 has been updated to support Shopify visual filters. Visit the Shopify help center to understand how to set this up.

• Visual filters appear on collection and search filterings

Using color swatches

• Ensure the products you want to display swatches for have an option labeled "Color". If you're using a non-english Shopify account you would want to enter the translated text for "Color" as your option label.

1. Open the theme editor by clicking Customize next to the relevant theme.

2. Click into Theme settings from the left-hand icons then select Products.

3. Ensure Swatches is selected for the Color selector setting.

4. Back in Theme settings select Product Cards.

5. Ensure Show color swatches is checked.

Uploading custom swatch images

1. Navigate to Home > Content > Files.

2. Upload a 64x64 jpg file for each swatch you want to replace.

   • Swatches must be named all lowercase and prepended with “swatch-”. For example, if your color variant is “Green” you would name your file “swatch-green.jpg”