Swatches

Visual indicators that display colors, patterns, and materials in which a product is available.

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.

Swatches help your customers make quicker choices which, in turn, can lead to faster conversions. They also allow the customer to make comparisons between various product options at a glance. 

In the Expression theme swatches can be shown in product cards, collection and search page filters and in variant pickers. Swatches can be drawn from Shopify native color category metafields, variant images or a list of color files and html color codes. 

Swatch-5.png

Expression-swatch-dropdown2.gif

Swatch-on-card2.png

How to set up swatches

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Choose Swatches to display to be None, Shopify or Theme.
  3. Within the Variant picker settings, set the Swatch variant picker style: Dropdown, Square, Circle. Where an icon is used the Picker icon size can also be set. 
  4. Within the Product cards settings, set the Card icon size.

Shopify swatches

Shopify native swatches work using a color category metafield. When creating or editing a product it is possible to link a variant option to a color category metafield. Shopify have a color category metafield guide which explains how to set this up. (Shopify swatches are supported in Expression theme versions after 10.0.0)

Set Swatches to display to be Shopify to choose this swatch method. These swatches can be shown in variant pickers, product cards and filters on the collection and search pages. 

Theme swatches

The theme can show theme swatches using colors, image files or variant images. These swatches can be shown in product cards, variant pickers and filters on the collection and search pages. 

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Choose Swatches to display to be Theme.
  3. Within the Option name setting, enter the variant option title (e.g. Color).
  4. Choose the Swatch method to be either Color list or Variant image.
     

Theme swatch variant image method

Variant image swatches can be displayed on the product page, featured product section and under the product images in the product cards. 

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Swatch method setting, select Variant image.

Swatches-2.png

Note

To ensure that images are displayed for your product variants, it is important to add an image to each product variant. Without them, no images will be displayed. The theme cannot anticipate which specific images you intend to display. Add an image to each variant in Shopify admin > Products.

Theme swatch color list method

Color list method swatches can be displayed on the product page, featured product section and on product cards. They can also be shown in filters on the collection page or search page.

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Option name setting, enter the variant option title, for example, Color. 
  3. Within the Swatch method setting, select Color list.
  4. 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). Each color should be on a separate line. 
  5. For multi-colored striped swatches, enter multiple values per line. (Example Red & Blue:#ff0000#0000ff). The colon separates the color name from the hex codes. 
    stripedswatches.png

Color list method using custom images

If custom swatch images are required, these can be uploaded and used with the Color list method. It's possible to use a mixture of hex codes and custom images.

Steps

  1. Create a PNG image file for each color. Maintaining consistent size and aspect ratio across all image files is recommended to prevent cropping.
  2. Open the Shopify admin and click on Content > Files and select Upload files to upload your images.
  3. Open the Theme Editor, and click on Theme Settings > Swatches.
  4. Within the Option name setting, enter the variant option title, for example, Color. 
  5. Within the Swatch method setting, select Color list.
  6. 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. (Example Red:red.png). 

FAQs

Can I use Shopify visual metafield filters?

Versions of the Expression theme after 8.2.0 support Shopify's visual filters using custom metafields and category metafields. Expression theme versions after 10.0.0 support Shopify color category metafield swatches in filters.

Can I use Shopify's color category metafield swatches?

Versions of the Expression theme after version 10.0.0 support Shopify's color category metafield swatches. 

How to set up swatches in theme versions prior to 10.0.0?

Version 10.0.0 of the Expression theme removed the automatic html color or file matching swatch methods, but added support for 3 new methods: color list, variant image and Shopify color category metafields. 

How to set up html color swatches in Expression theme versions prior to 10.0.0

Swatches can be shown automatically when the variant color names match standard html color names. 

Tip

  1. Open the Theme Editor, and click on Theme Settings > Products.
     
  2. Select Enable swatches.
  3. Within the Option name setting, enter the variant option title (e.g. Color)
  4. Swatches will be shown when the variant color names match standard html color names. If the swatches are blank, it usually means that your variant colors are not standard html color names. (e.g. Red, Green) To solve this, follow the custom swatches guide to create and upload custom swatch image files.

How to set up custom swatches in Expression theme versions prior to 10.0.0

Custom images can be uploaded and used as swatches. This is the best solution to handle complex color names and patterns. 

Steps

  1. Open the Theme Editor, and click on Theme Settings > Products.
  2. Select Enable swatches.
  3. Within the Option name setting, enter the variant option title. (e.g. Color)
  4. Select Use uploaded images instead of HTML colors.
  5. Create a PNG image file for each color. A file of approximately 40px by 40px is appropriate. Maintaining a consistent size and aspect ratio across the image files is recommended.
  6. 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"
  7. 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."
  8. Open the Shopify admin area and click on Content > Files.
  9. Select Upload files to upload your images.
Bring your business ideas to life with Shopify

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