Swatches

Learn how to set up your swatches across your store.

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.

Theme swatches can be used in the variant picker, product cards and filters. They support colored swatches, custom swatch images or variant images. Symmetry also supports Shopify's native swatches. Some examples of color swatches in the Symmetry theme:
swatches.jpg
swatch-variant-image.png
Swatch-image.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.
    Swatch picker.png
  3. Within the Variant picker settings, set the Swatch variant picker style: Buttons, Icon-square, Icon-circle or a Dropdown. Where an icon is used the Icon size can also be set. 

Shopify swatches

Shopify native swatches work using category metafields. When creating or editing a product it is possible to link a variant option to a color metafield. Shopify have a 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. (Shopify swatches are supported in theme versions after 7.3.0)

Theme swatches

The theme can show theme swatches using colors, image files or variant images. These swatches can appear 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 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.

Theme swatch variant image method

Variant image swatches can be displayed on the product page, quick buy, 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
    Variant-image-selected.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, quick buy, featured product section and under the product images in the product cards. 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. Within the Swatch method setting, select Color list.
  3. 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). 
  4. Each color should be on a separate line:
    Color-list-select2.png
  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 or JPG 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.
  3. Select Upload files to upload your images.
  4. Open the Theme Editor, and click on Theme Settings > Swatches.
  5. Within the Swatch option name setting, enter the variant option title. This is the title you give that your variants fall under.
  6. Within the Swatch method setting, select Color list.
  7. 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-select3.png

How to display swatches in filters

The collection and search filters can display swatches using the Theme Swatch colors. 

Steps

  1. Open the Theme Editor, and click on Theme settings > Swatches.
  2. Set Swatches to display to be Theme.
    Swatch picker.png
  3. Enter the relevant colors and hex codes or image file names into the Swatch color list box following the color list method. Note - The Theme variant image method can still be used on the product page and in the product cards.
  4. Within the Collection filter settings, check Enable swatches in collection filter. Choose one of the three Swatch filter layout options: One column, Two column or No label.

Versions of the Symmetry theme after 7.3.0 also support Shopify's visual filters using custom metafields and category metafields.

How to display swatches in product cards

Swatches using the Shopify method or Theme methods can be shown under the product image in the product cards. Clicking on the swatch can change the image shown. In the Symmetry theme, it's also possible to show additional variant options such as size under the product images and indicate sold out options. 

Steps

  1. Open the Theme Editor, and click on Theme settings > Swatches.
  2. Choose Swatches to display to be Shopify or Theme.
    Swatch picker.png
  3. Within the Collection filter settings, check Enable swatches in product cards.
  4. Choose whether to Cross out unavailable options.
  5. Choose whether to show Additional variant options in the product cards. This can be done by entering the option name e.g. Size.

Swimwear-swatches.png

FAQs

Can I use Shopify visual filters?

Versions of the Symmetry theme after 7.3.0 support Shopify's visual filters 

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 settings, add translations, separating each word with a comma and no spaces in between.
    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.

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 show other options in the product cards?

Yes, you can show other options such as Size or Material in the product cards. Enter the relevant option names in Theme settings > Swatches > Product cards > Additional variant options. 

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.

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