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 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. Select Enable swatches.
  3. Within the Swatch option name setting, enter the variant option title (e.g. Color).
  4. Choose the Swatch method to be either Color list or Variant image.
  5. Within the Variant picker settings, set the Swatch variant picker style.

Variant images as swatches

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 Color option name setting, enter the variant option title (e.g. Color).
  3. Within the Swatch method setting, select Variant image

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.

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.

How to display swatches in filters

The collection and search filters can display swatches using the color list method. 

Steps

  1. Open the Theme Editor, and click on Theme settings > Swatches.
  2. Enter the relevant colors and hex codes or image file names into the Swatch color list box following the color list method. 
  3. Within the Collection filter settings, check Enable swatches in collection filter. Choose one the three Swatch filter layout options.

How to display swatches in the product grid

Swatches using the color list method or the variant image method can be shown under the product image in the product grid. 

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 visual metafield filters?

Versions of the Mode theme after 4.1.0 support Shopify's visual filters using custom metafields and category metafields (when the grouped filter values are managed manually in the Search and Discovery app).

Will swatches still 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, Shopify's built-in translation app lacks an auto-translation feature, it is crucial to consistently confirm and auto-translate whenever modifications are made otherwise the swatches won't display.

Why are my custom images not showing as swatches?

If the custom image is not displayed, it may mean a step was missed in the instructions above. Or you may have a 3rd party app installed that affects the product page. Disable any such apps to confirm and if you identify the offending app, you can contact the app's support team for assistance.

Can I have swatches on more than one option on the product page?

Yes, you need to add that option title in the Swatch option name field separated by a comma.

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