Swatches

Display your colors, patterns and materials 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. You can either use Shopify color category swatches, color hex codes, the variant images or upload your own custom swatch images to display on your product variants. 

Some examples of color swatches in the Mode theme:

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, Box with label, Icon -square or Icon - circle.

Shopify swatches 

Shopify native swatches work using the 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. 

Set Swatches to display to be Shopify to choose this swatch method. These swatches can appear in variant pickers and can also be shown in product cards and filters. (Shopify swatches are supported in Mode theme versions after 5.1.0)

Theme swatches - variant images

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

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Swatch option name setting, enter the variant option title (e.g. Color).
  3. Within the Swatch method setting, select Variant image. 
  4. Set the Swatch image crop alignment and choose whether to Enable swatch outline.

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 swatches - Color list method

Color list method swatches can be displayed on the product page, quick buy, featured product section and under the product images in the product grid. In addition, unlike the variant image swatches, they can also be used for filtering on the collection page or search page.

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. It's possible to use a mixture of hex codes and custom images with the color list method. 

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 method setting, select Color list.
  4. Within the Swatch color list 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.
  5. For plain swatches - Enter the hex color code which should start with a # (Example Red:#ff0000 Green:#008000 Blue:#0000ff).
  6. For striped swatches - Enter multiple color codes per line. (Example Red & White:#ff0000#fff). 
  7. 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.
  8. Set the Swatch image crop alignment and choose whether to Enable swatch outline.

How to display swatches in filters

The collection and search filters can display Shopify color category metafield swatches or swatches using the theme color list method. 

Steps

  1. Open the Theme Editor, and click on Theme settings > Swatches.
  2. Within the Collection filter settings, check Enable swatches in collection filter. Choose one the three Swatch filter layout options.

Tip

To show theme swatches in filters use the color list method, enter the relevant colors and hex codes or image file names into the Swatch color list box. 

How to display swatches in the product grid

In the Mode theme, Swatches can be shown on the product card under the product image.

Steps

  1. Open the Theme Editor, and click on Theme settings > Swatches.
  2. Within the Product cards settings, the Swatch position on product cards can be selected.
  3. Choose whether to Cross out unavailable options.

FAQs

Can I use Shopify swatches? 

Versions of the Mode theme after 5.1.0 support Shopify swatches in product cards, filters and on the product page. More information can be found in the Shopify color category metafield guide.

Versions of the Mode theme after 4.1.0 support Shopify's visual filters using custom metafields and category metafields.

Will theme swatches work when the store language is changed?

Yes. Under swatch settings, you will want to 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 Swatch option name setting, add translations, separating each word with a comma and no spaces in between.
  3. Check your translation app. Please note, it is crucial to consistently check and auto-translate whenever modifications are made to ensure that swatches are displayed.
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