Displaying swatches in your filter tree

Swatches are thumbnail images used to represent the color, pattern, etc. for product variants. Swatches on e-commerce websites can enhance the user experience by providing better visual information and helping customers navigate the right products faster.

On this page

Enable swatch settings

You can enable swatch settings when setting up filters for titles, heights, colors, sizes, and filters using tags and Metafields.

To integrate swatches in those filters:

1. From the app’s admin, go to Filter > Manage filter trees.

2. Click the filter tree that you want its size/color/height/title/tag/Metafield values to be displayed in swatches.

3. Click Add filter option.

4. Select Color/Size/Height/Title/Tag/Metafield in the drop-down of Option Type.

5. Select Swatch in the drop-down of Option Display.

6. Select your preferred swatch style in the drop-down of Swatch Style.

7. Click Save on the Edit filter option page.

8. Click Save on the Filter options page.

9. Check how new settings appear on your storefront.

One-color swatch and two-color swatch

When setting up a filter for colors, you can find standard swatch colors inaccurate or missing after activating the swatch settings. In this case, you can use our app to customize swatch colors and images.

For instance, one of your products has the color  blue on its product details page. Its automatic swatch color shows a different shade from how it is. Our app can replace that standard color with your own custom color.

To customize the swatch color:

1. Make sure that you have enabled the swatch settings for the Color filter option.

2. From the app’s admin, go to Filter > Swatch settings.

3. Find the swatch name that you want to customize its displayed color.

4. If the product, which has that swatch name, is a solid color, select One color in the drop-down of Option Display. In the Swatch value section, place your cursor in the color wheel to choose your desired color or enter the six-character hexadecimal value of the color.

Note: If you are familiar with CSS, you can use Hex color to display the Swatches:

1. FInd boost-pfs-custom.scss.liquid file.

2. Add each style for each filter option value. 
For example: with the color " Jet Black", the code will look like: 
.boost-pfs-filter-option-item-list-swatch span.boost-pfs-filter-option-swatch-image[title="Jet Black"] {background-color: #111111 !important;}

If the product, which has that swatch name, has two colors, for example, green and pink, select Two colors in the drop-down of Option Display. In the Swatch value section, place your cursor in the color wheel to choose your desired colors or enter the six-character hexadecimal values of those two.

5. Click Save swatch settings.

6. To filter  Swatch value, in the drop-down of Swatch value, select: 

  • Any: Shows all swatch values (chosen by default).
  • Complete: Shows all swatches that are completely set up and contain valid swatch values.
  • Missing: Show all swatches that are not completely set up and have no valid swatch value.

Note: When a product has two colors but on its product details page, you separated those two colors into two variants of the product, you might want to merge those values to have a proper swatch display. For example, instead of setting the color of a shirt as "Black and pink", you show it with two versions, the black shirt, and the pink shirt. Our app has a feature that helps you to merge those values and show the right swatches.

Displaying Swatches in Your Filter Tree

To merge color values and show the right swatches:

1. From the app’s admin, go to Filter > Merge values. 

2. Click Add new merged value.

3. Select Color in the drop-down of Type and click Add new merged value in the Merged values section. 

4. Under the Merged value heading, enter the color phrase merged by two values. In the example above, you can enter Black and pink.

5. Under the Current values heading, select two corresponding colors that you want to merge into the one you have entered in step 4.

6. Click Save.

7. From the app’s admin, go to Filter > Swatch settings.

8. Find the swatch name which is the merged value created in step 4. Select Two colors in the drop-down of Option Display. In the Swatch value section, place your cursor in the color wheel to choose your desired colors or enter the six-character hexadecimal values of those two.

9. Click Save swatch settings. 

Display swatches in filters created by product tags and Metafields

Displaying Swatches in Your Filter Tree

When you sell visually-driven products, our app provides you tools to set up filters for product attributes that are not available in both Shopify and our app by using product tags and Metafields. You can display those filter values in swatches by uploading your own custom images.

For instance, your customers want to filter your new collection’s shirts by types of necklines. You want to set up a filter in the collection for neckline types by using product tags and integrating corresponding swatches as some customers might need a hint about what the neckline looks like. Our app allows you to upload custom images that produce a true representation of different neckline styles like the image below. 

Displaying Swatches in Your Filter Tree

To integrate swatches in a filter created by tags and Metafields with your own custom images:

1. After setting up a filter option on the Manage filter tree page with Tag and Metafield in the drop-down of Option Type and Swatch in the drop-down of Option Display.

On your storefront, you can see those filter values are displayed in blank swatches. Those swatches are waiting to be customized with your own images. 

2. Prepare images that you want to upload into those swatches. We suggest that you save the images as squares to preserve the aspect ratio of a pattern. 

You should resize them to 34 x 34 pixels, name them after the value they are going to represent in lowercase, and be formatted as PNG files.

3. From your Shopify admin, go to Settings > Files. Click Upload files and upload all the images that you have prepared.

4. Notice that each uploaded file comes with a Link button beside the file that you will use later. 

5. From the app’s admin, go to Filter > Swatch settings. Find a swatch name that you want to customize how it is displayed with the corresponding images that you have uploaded in step 4. You can use the Swatch value drop-down next to the search box for faster results.

6. Select Image in the drop-down of Option Display. 

7. On the Files page in Shopify, identify one of the uploaded images that you want to display in this swatch. Click the Link button beside the file. Paste it in the Swatch value section on the app's Swatch settings page.

8. Click Save swatch settings.

9. Repeat these steps with all swatch names that you want to replace with your own images.

10. Check how they are displayed on your storefront.