Swatches

Yay! Our Expression theme has the ability to show swatches with products :)

Step one

Head into the theme customizer, click Theme settings at the top of the left sidebar, and in the Products section, scroll down to SWATCH.

Type the option name for your color variants e.g. Color, Pattern, Couleur, Farbe.
The option name must match the option name you've used for your products.

Next, choose your swatches to be either HTML colors or Uploaded images.

HTML color method

1. Go to a product in your Admin and ensure each of your color variants has an exact name from this list. Note: using names not in this list will result in no color swatch being shown.

2. Your swatch colors will then be shown automatically :)

Uploaded Images method

1. Create a small png file for each color. (40px x 40px is a good size.)

The name of the png file must match the "handle-ized" version of the variant name.

• Use only lowercase letters
• Replace any spaces with a dash
• Remove any special characters

Examples:

• "Coral Red" would require a file named "coral-red.png"
• "Waldgrün" would require a file named "waldgrun.png"
• "Blue-green" would require a file named "blue-green.png"

2. Go to the store files (Admin > Settings > Files) and upload your swatch images.

3. Your swatch color images will then be displayed on both product.

Note:  The uploaded images method is only available from Expression theme version 5.0.

In theme versions after 5.2.0 swatches are shown on product and collection pages.  Prior to this version, swatches were only shown on product pages.