Swatches

Display the colors, patterns and materials in which a product is 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.

An example of variant image swatches: 

1680783804113-Enterprise+swatches+gif+1.gif

How to set up swatches

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Color option name setting, enter the variant option title (circled below).
    mode-swatch-settings-4.jpg
  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). Refer to the image example below.


    Each color should be on a separate line:

Striped swatches

Follow the same method as above. The only difference being that two or three codes can be used together. Do not include the : in the middle, only include the # to separate between hex codes. Refer to the image example below.

Display swatches on collection/search filters

These instructions apply to Enterprise v1.1.0 and above.

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Product filters settings, set the Style to Swatch color list.

Variant images as swatches

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Within the Product cards settings, set the Style dropdown to Variant images.
  3. Within the Variant pickers settings, set the Style to Variant images.
  4. If using Enterprise version 1.2.1 and above, the Icon shape for both the Product cards and the Variant pickers can also be selected.

Note

To ensure that images are displayed for your product variants, it is important to add Variant images. Without them, no images will be displayed. The theme cannot anticipate which specific images you intend to display.
Variant swatches.gif

Custom images as swatches

If you prefer using your own images instead of hex codes or variant images, custom images can be uploaded, that will be shown as swatches.

Steps

  1. Create a PNG or JPG 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"
  3. 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."
  4. Open the Shopify admin and click on Content > Files.
  5. Select Upload files to upload your images.
  6. Open the Theme Editor, and click on Theme Settings > Swatches.
  7. Within the Color option name setting, enter the variant option title. This is the title you give that your variants fall under.
  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.
    Untitled-min__1_.jpg

FAQs

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 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.

Will variant images show within product cards (e.g. on the collection page)?

Version 1.1.0 onwards provides the option to do this.

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 Color variant title on the Color option name field and be sure to add hex codes for them.

image__24_-min.jpg

Where can I find a list of hex codes?

We've made a list of hex codes for you to quickly copy and paste into the Swatch colors setting. Open the file in a text-based application such as Google Docs to get started.

Please feel free to customize the codes as you'd like. Adding new codes won't harm your store. It will expedite the setup of your hex codes.

Alternatively, there are various websites that provide 'color hex code generators'. If you search for that term on the web, you should find many tools to help.

Please select text to grab.

 
 
 
 
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