Swatches

Yay! Our Boost 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 swatch Source to be either CSS colors or Uploaded images.

CSS 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 and on collection pages :)

Uploaded Images method 1

(version 1.1.6 - version 1.3.0)

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 theme code files (Actions > Edit code) and open up the Assets folder

3. Click on Add a new asset and upload your new image files

4. Your swatch color images will then be displayed on both product and collection pages.

Note: If you only have one color available, swatches will not be shown on the collection page.

Due to the requirement to add new asset files, you will need to buy the theme before you can upload color swatch images using this method.

Uploaded Images method 2

(version 1.3.0 and after)

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 Admin > Settings > Files and upload your new image files

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

Note: If you only have one color available, swatches will not be shown on the collection page.