Swatches

Display the colors, patterns and materials in which a product is available to customers.

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. 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 also supported in the product card and product page (after Enterprise version 1.6.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.

pick-variant.gif

pick-variant2.gif

Swatches-on-cards-Enty.png

How to set up swatches

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Color option name setting, enter the variant option title (e.g. Color). 
  3. Set the preferred swatch Style for Variant pickers. The swatch Style for variant pickers can be Shopify, Text, Swatch color list or Variant images.
  4. Choose the Icon shape (circle, natural, portrait or square) and Icon size which will be used for Button style variant pickers. While icons are always used for Variant image style swatches and Shopify style swatches, color list swatches can show in dropdowns. 
  5. Set the preferred swatch Style for Product cards. Choose from Shopify, Text, Swatch color list, Variant images or None.
  6. Choose the Icon shape and Icon size for the swatch in product cards.
  7. 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. 

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

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Color option name setting, enter the variant option title (e.g. Color)
  3. Within the Swatch colors setting, enter the color followed by : (a colon) followed by either a hex color code or an image file name. Each color should be on a separate line:
    Swatch-color-list-canopy.png
  4. For plain swatches - Enter the hex color code which should start with a # (Example Red:#ff0000 Green:#008000 Blue:#0000ff).
  5. For striped swatches - Enter multiple color codes per line. (Example Red & White:#ff0000#fff). 
  6. For custom image file swatches - 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.
  7. 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

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Choose Variant image as the swatch style for Variant pickers or Product cards.
  3. Set the Icon shape and Icon size.

Note

To ensure that images are displayed for your product variants, it is important to add Variant images. Without them, no images will be displayed. The theme cannot anticipate which specific images you intend to display.
Variant swatches.gif

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 

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Color option name setting, enter the variant option title (e.g. Color). 
  3. Choose Text as the swatch style for Variant pickers or Product cards

FAQs

How do I show swatches in filters?

Only Color list swatches can be used as filters in the Enterprise theme on the collection and search page.

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Color option name setting, enter the variant option title (e.g. Color). 
  3. Within the Product filters settings, set the Style to Swatch color list. (Versions 1.1.0 and above)

Version 1.6.0 of the Enterprise theme does not support Shopify category metafield swatches in filters.

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

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. In the Color option name settings, add translations, separating each word with a comma and no spaces in between.
  3. 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 (Version 1.1.0 and above)

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. 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 hex color codes?

A quick Google search will provide you with a list of basic hex color 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.

Sign up for Shopify today for $1

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