By default, product variants and options on the product pages and quick view (if enabled) are displayed as drop-down menus.  Customers choose their product options (such as color, size, material, etc.) by selecting options in the drop-down.  This works fine, but if you'd like to use a more graphical approach, you might want to give swatches a try.

With product swatches enabled, the drop-down menus for your product options are replaced with color-specific buttons (or swatches) that you can customize for color options, or attractive buttons for non-color options.  Here is an illustration of what the two options look like in the ShowTime theme:

Working with color options

For the color options you have for your products, you can either let the theme attempt to choose a suitable color button for you, or you can upload a small image that represents that color. If you elect not to upload images for the colors, the theme will attempt to show a relevant color automatically based on the name.  For example, if you have simple color names like blue, red, and yellow, the theme will change the color swatches to the default CSS colors for these names.  You can see a reference of all built-in colors that CSS supports by default here. 

The default color displays are fairly generic and may not match the colors of your products very well. In addition, if your colors have non-CSS supported names, the theme may not be able to select an appropriate color for you if one doesn't exist. For example, if one of your products comes in the color "Granite," the theme will not know what color to assign to it because that is not a supported CSS color name. In this case, the default color is used (which is the same as the primary color you selected elsewhere in theme options). If this is a problem for you, it's best to upload your own swatch images.

Uploading your own swatches

To use your own swatches, you need to upload an image that is approximately 55 x 45 pixels in size. It must be in .png format and must follow a strict naming convention. The image must be named after the color option and must be all lowercase with hyphens replacing spaces.

For example, if you have a color called 'Déjà Vu Blue', then name your image deja-vu-blue.png

Another example, if your color is 'Blue/Gray', then name your image blue-gray.png.

Most simple example, if your color is 'Black', then name your image black.png.

To upload your swatch images, follow these instructions:

If you are using ShowTime version 6.2 or Galleria 2.0.3 or later:

1. Login to your Shopify dashboard and click on Settings > Files link in the left navigation
2. Click the Upload files button in the upper-right corner of the screen
3. You can upload images one at a time, or add multiple files at once by holding the Control key (PC) or CMD key (Mac) as you select files

If you are using Couponia, ShowTime version 6.1.4 or Galleria 2.0.2 or older:

1. Login to your Shopify dashboard and click on Online Store > Themes link in the left navigation
2. Click the Actions button and a small drop-down box will appear. Click Edit Code
3. You are now on the Template Editor page. Locate and click on the Assets folder to reveal its contents
4. Under the Assets heading, click on the Add a new asset link
5. Upload your image
6. Repeat steps 4 and 5 until you have uploaded all your images

Assuming you have done all this correctly, your color swatches will be automatically replaced with your custom swatches on your product pages and quick view popups.

A note about stores in languages other than English

In order for the custom color swatches to appear, the theme code looks for the word "color" or "colour" within the product option in order to know that it should display the swatches.  If your store is translated in another language, you'll need to make a minor code edit in order to point the theme to the color option in your language.  To do this, please follow these steps:

• Login to your Shopify dashboard and go to Online Store > Themes > Your Theme
• Click the Actions button and choose Edit Code from the dropdown menu
• Navigate to the Snippets folder on the left and open the file called swatch.liquid
• Around line 33, you should see the following code:
  

  {% if downcased_option contains 'color' or downcased_option contains 'colour' %}

• Change that to:
  

  {% if downcased_option contains 'color' or downcased_option contains 'yourcolornamehere'  or downcased_option contains 'colour' %}

• You will want to change the text "yourcolornamehere" in the snippet above to the name of the product option in your language (in all lowercase)
• Save the file

Your color swatches should be appearing properly now.