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 in product pages :)

Swatches do not show on collection pages, if you want to extend the built-in swatch functionality, you can search for a suitable app here.

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: If you only have one color available, swatches will not be shown on the collection page. The uploaded images method for swatches is only available from Expression theme version 5.0.