Swatches

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

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Select Enable swatches.
  3. In the Swatch option name setting, enter the variant option title (circled below).
    mode-swatch-settings-4.jpg
  4. Under the Swatch method select Color list.
  5. Within the Swatch color list setting, enter the color followed by :
    then followed by the hex color code which should start with a #.
    (Example Red:#ff0000) Refer to the image example below.
  6. Each color should be on a separate line:
    image__8___1_.png

Striped swatches

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

Untitled-min.jpg

Custom images as swatches

If you prefer using your own images, you can upload custom images that will be shown as swatches. You can also use a mix of html color codes and image files. 

Steps

  1. Create a PNG or JPG image file for each color. A file of approximately 40px by 40px is appropriate. Maintaining a consistent size and aspect ratio across all swatch image files is recommended for best results. 
  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 area 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. Within the Swatch option name setting, enter the variant option title. 
  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.
    Untitled-min__1_.jpg

Variant images as swatches

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Under Swatch method change the dropdown to Variant image

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.

Swatches in the product grid and filters

Steps

  1. Open the Theme Editor, and click on Theme Settings > Swatches.
  2. Select Enable swatches in product grid.
  3. Select Enable swatches in collection 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. 

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.
    image__23_-min.jpg
  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 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 color variant title in the Swatch option name field.  Be sure to add image files or codes for the additional colors in the Swatch color list.

image__24_-min.jpg

 

 

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