Swatches – User Guides

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.

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

How to set up swatches

Steps

Open the Theme Editor, and click on Theme Settings > Swatches.
Select Enable swatches.
In the Swatch option name setting, enter the variant option title (e.g. Color).
Choose the Swatch method to be Color list or Variant image.

Variant image method

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

Steps

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

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.

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

Open the Theme Editor, and click on Theme Settings > Swatches.
Within the Swatch method setting, select Color list.
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.

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

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.
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."
Open the Shopify admin and click on Content > Files.
Select Upload files to upload your images.
Open the Theme Editor, and click on Theme Settings > Swatches.
Within the Swatch option name setting, enter the variant option title. This is the title you give that your variants fall under.
Within the Swatch method setting, select Color list.
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).

How to display swatches in filters

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

Steps

Open the Theme Editor, and click on Theme settings > Swatches.
Enter the relevant colors and hex codes or image file names into the Swatch color list box following the color list method. Note - there is no requirement to change the Swatch method. The variant image method can still be used on the product page and in the product grid.
Select Enable swatches in collection/search filters.

Note

Be sure to fill in the Swatch color list values if you wish to show swatches in the collection and search page filters. Variant images swatches are not used in the filters.

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.

Steps

Open the Theme Editor, and click on Theme settings > Swatches.
Select Enable swatches in product grid.

FAQs

Can I use Shopify visual metafield filters?

Versions of the Boost theme after 6.2.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

Open the Theme Editor, and click on Theme Settings > Swatches.
In the Color option name settings, add translations, separating each word with a comma.
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 needed, 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. 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!