What are swatches?
Swatches are small, but very useful visual indicators that display the colors, patterns and materials in which a product is available to customers.
Instead of displaying the options as plain text, swatches provide a more intuitive and engaging way for customers to interact with the available choices. Swatches can be used to help customers make variant choices on the product page, featured product section or quick buy, show the available colors in the product card and filter on the collection or search page.
To create swatches, you can either use color hex codes, the variant images or upload your own custom swatch images to display on your product variants. Shopify's native swatches are supported (after version 6.3.0).
Different swatch styles can be used in different places in the store, for example variant images on the product page and plain colors on the product card.
How to set up swatches
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
-
Within the Color option name setting, enter the variant option title (e.g. Color).
- Set the preferred swatch Style for Variant pickers. The swatch Style for variant pickers can be Shopify, Text, Swatch color list or Variant images.
- Choose the Icon shape (circle, natural, portrait or square) and Icon size which will be used for Button style variant pickers. Icons are always used for Variant image style swatches and Shopify style swatches. Color list swatches can show in dropdowns.
- Set the preferred swatch Style for Product cards. Choose from Shopify, Text, Swatch color list, Variant images or None.
- Choose the Icon shape and Icon size for the swatch in product cards.
- Choose whether to show swatches in the Product filters used on the collection and search pages. Choose Swatch color list or None.
Swatch style - Shopify
Shopify native swatches work using category metafields. When creating or editing a product it is possible to link a variant option to a color metafield. Shopify have a category metafield guide which explains how to set this up. Set the swatch Style to be Shopify to choose this swatch method. These swatches can appear in variant pickers and can also be shown in product cards. This type of swatch isn't currently used in filtering on the collection and search pages.
Swatch style - Color list
The Swatch color list swatch style can be used in collection and search page filters as well as in product cards and the product page. It is flexible and can support single or multiple colors and image files. When using swatch colors, it's necessary to tell the theme what to show for each color by filling in the Swatch color list box.
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Within the Color option name setting, enter the variant option title (e.g. Color)
- Within the Swatch colors setting, enter the color followed by : (a colon) followed by either a hex color code or an image file name.
COLOR CODE - Enter the hex color code which should start with a # (Example Red:#ff0000 Green:#008000 Blue:#0000ff).
STRIPED SWATCHES - Enter multiple color codes per line. (Example Red & White:#ff0000#fff).
IMAGE FILES - Enter the color then the name of the file (Example Blue:blue.png) The image files should be uploaded in the Shopify admin in Content > Files. For best results use png image files of a consistent shape and size.
Each color should be on a separate line: - Choose Swatch color list as the swatch style for Variant picker, Product cards or Product filters.
Swatch style - Variant image
Variant image swatches can be used in variant pickers and in product cards. When product variants are already linked to different variant images it is very quick to set up. This type of swatch isn't used in filtering on the collection and search pages.
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Choose Variant image as the swatch style for Variant pickers or Product cards.
- Set the Icon shape and Icon size.
Note
Swatch style - Text
The text option can be used in variant pickers to show the name of the color or on product cards to indicate how many colors are available.
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Within the Color option name setting, enter the variant option title (e.g. Color).
- Choose Text as the swatch style for Variant pickers or Product cards
FAQs
How do I show swatches in filters?
Color list swatches can be used as filters in the Canopy theme on the collection and search page.
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Within the Color option name setting, enter the variant option title (e.g. Color).
- Within the Product filters settings, set the Style to Swatch color list.
Will swatches still work when the store language is changed?
Yes. Under swatch settings, add the translations of your variant title in other languages.
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- In the Color option name settings, add translations, separating each word with a comma and no spaces in between.
- Check your translation app. Please note, Shopify's built-in translation app lacks an auto-translation feature, it is crucial to consistently confirm and auto-translate whenever modifications are made to ensure swatches display correctly.
Can variant images show within product cards on the collection page?
Yes. The swatch style on the product card is controlled by the Swatches theme settings.
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Within the Product cards settings, select the the Variant images Style and set the Icon shape and Icon Size
Can I have swatches on more than one option on the product page?
Yes, for theme swatches, add that Color variant title to the Color option name field.
Where can I find a list of color hex codes?
A quick Google search will provide you with a list of basic color hex codes, which can be adjusted for specific store requirements. Alternatively, there are various websites that provide 'color hex code generators'. If you search for that term on the web, you should find many tools to help.
I am using an older version of Canopy before v6.0.0. How do I set up swatch colors?
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Select Enable Swatches
- Within the Swatch option name setting, enter the variant option title (circled below).
- Under the Swatch method select Color list.
- Within the Swatch color list setting, enter the color followed by :
then followed by the hex code (which should start with a #).
(Example Red:#ff0000, Green:#008000, Blue:#0000ff). Refer to the image example below. - Each color should be on a separate line.
Custom images as swatches
If you prefer using your own images, you can upload custom image files that will be shown as swatches. You can also use a mix of html color codes and image files.
Steps
- Create a PNG or JPG image file for each color. A file of approximately 40px by 40px is appropriate. Maintaining consistent size and aspect ratio across all image files is recommended.
- Name each file to match the handle of the variant color title, replacing spaces with a dash (-) and keeping the file name lowercase. For example, if the variant is named "Fire Engine Red" name the file "fire-engine-red.png". Remove any special characters, use only the Latin/Roman alphabet and standard characters (a-z) only. For instance, "waldgrün.png" should be renamed to "waldgrun.png."
- Open the Shopify admin and click on Content > Files and upload images.
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Within the Swatch option name setting, enter the variant option title. This is the title you give that your variants fall under (e.g. Color)
- Within the Swatch color list setting, enter the name of the followed by : followed by the file name. Each color should be on a separate line.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us