By default, product variants and options on the product pages are displayed as drop-down menus.  Customers choose their product options (such as color, size, material, etc.) using drop-down menus.  This works fine, but we wanted to offer another option: product swatches!

With product swatches enabled, these 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.


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 an image that represents that color. The default color displays are fairly generic and may not match the colors of your products very well. In addition, if your colors have odd names, the script may not be able to select an appropriate color because it looks for specific color names. For example, if one of your products comes in the color "Granite," the theme will not know what color to assign to it. 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 lower-case.

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', the name your image black.png.

To upload your swatch images, follow these instructions:

  1. Login to your Shopify dashboard and click on the Themes link in the left navigation.
  2. Click the button with the three dots and a small drop-down box will appear. Click Edit HTML/CSS
  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.