Swatches

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

What are swatches?

Swatches are visual indicators that display the colors, patterns and materials in which a product is available to customers.

Instead of displaying color options as plain text, swatches provide a more intuitive and engaging way for customers to interact with the available choices. Use variant images, color category metafields, color hex codes or upload your own custom swatch images. Control the size and the shape of swatches using the theme settings. 

Image from Boost demo store showing circular variant pickers with variant image swatches

How to set up swatches

Steps

  1. Open the Theme Editor, and click on Theme settings > Swatches.
  2. Set the swatch method using the Swatches to display to be Theme, Shopify or None.
  3. Set the Swatch size (Listed out style) and Swatch radius. 
  4. Swatches will match the variant picker display style. Set the Variant style to be Drop down or Listed out in Theme settings > Products. 
Image from Boost demo store showing square variant pickers with colors swatches

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 the color metafield. Shopify have a color category metafield guide which explains how to set this up. These swatches can be displayed on the product page, quick buy, featured product section, in filters and product cards.

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Set the Swatches to display to be Shopify.
  3. If using images, set the Swatch image crop alignment.

Theme swatches - variant image method

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

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Set the Swatches to display to be Theme.
  3. Enter the Swatch option name (e.g. Color).
  4. Within the Swatch method setting, select Variant image.
  5. If using images, set the Swatch image crop alignment.

Tip

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.

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Set the Swatches to display to be Theme.
  3. Enter the Swatch option name (e.g. Color)
  4. Within the Swatch method setting, select Color list.
  5. 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. For multicolored striped swatches, enter multiple values per line. (Example Red & Blue:#ff0000#0000ff). The colon separates the color name from the hex codes. 
    Image to explain how to create striped swatches.png

Custom images as swatches

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

Steps

  1. Create a PNG image file for each color. Aim to match the size of the Icon size setting to prevent any stretching or image blurring. Maintaining consistent size and aspect ratio across all image files is recommended to prevent cropping.
  2. 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."
  3. Open the Shopify admin and click on Content > Files.
  4. Select Upload files to upload your images.
  5. Open the Theme Editor, and click on Theme Settings > Swatches.
  6. Enter the Swatch option name (e.g. Color)
  7. Within the Swatch method setting, select Color list.
  8. 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) 
    Color-list-select settings.png
  9. Set the Swatch image crop alignment.

How to display swatches in the product grid

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

Variat image swatches.png

Steps

  1. Open the Theme Editor, and click on Theme settings > Swatches
  2. Within the product grid settings, select Enable swatches.
  3. Set the Swatch size and Swatch radius to suit your product cards.
  4. Use the setting Maximum number of swatches displayed to control how many swatches are shown under the card. This can be useful to create a neat card layout. Additional swatches are displayed on hover or tap.
Swatch-layout-active.jpg

How to display swatches in filters

Shopify color category metafield swatches and theme Color list swatches can be shown in filters. Control the Swatch size and Swatch radius in the Collection filter section of the swatch theme settings. 

In earlier theme versions, theme color list swatches were shown in filters by selecting the Enable swatches in collection/search filters setting. In Boost theme versions after 8.0.0 this setting has been removed and swatches are automatically shown when correctly configured. Filters can be managed in the Shopify Search and Discovery app.  

FAQs

Can I use Shopify visual metafields and Shopify color category metafields ?

Versions of the Boost theme after 8.0.0 support Shopify color category metafields as swatches. Versions of the Boost theme after 6.2.0 support Shopify's visual filters.

Can I change the size and shape of the swatches shown?

Versions of the Boost theme after 8.0.0 include additional settings to control the size and shape of swatches. 

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 Color option name settings, add translations, separating each word with a comma.
    swatch-option-name.png
  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.

Can I have theme 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. Be sure to add image files or codes for the additional colors in the Swatch color list.

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