📖 Swatches are thumbnail images representing colors, patterns, etc. of 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.
💡 Swatch settings in our app are designed exclusively for the Filter swatch feature. These settings will not affect or apply to other swatch types, such as the product item swatch, the product grid swatch, or the quick view swatch.
While our app offers powerful customization options for the filter swatch, please be aware that any changes made to Swatch settings will not impact the display or functionality of other swatch types.
If you need to configure swatches for other parts of your online store, please refer to the specific settings or customization options available for those elements.
For any questions or assistance regarding swatch settings or customization, please don't hesitate to contact our support team at [email protected].
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 > 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 custom color.
To customize the swatch color:
1. Please ensure you have enabled the swatch settings for the Color filter option.
2. From the app’s admin, go to Filter > Swatches.
3. Find the swatch name that you want to customize its displayed color.
4. If the product, that 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.
💡 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 to 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 menu 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 the Swatch value, in the drop-down menu 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.
When a product has two colors, but on its product details page, you separate 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 to "Black and pink", you show it in two versions: the black shirt and the pink shirt. Our app has a feature that helps you merge those values and show the right swatches.
To merge color values and show the right swatches:
From the app’s admin, go to Filter > Merge values.
Click Add new merged value.
Select Color in the drop-down menu of Type and click Add new merged value in the Merged values section.
Under the Merged value heading, enter the color phrase merged by two values. In the example above, you can enter Black and pink.
Under the Current values heading, select two corresponding colors that you want to merge into the one you have entered in step 4.
Click Save.
From the app’s admin, go to Filter > Swatches.
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.
Click Save swatch settings.
Display swatches in filters created by product tags and Metafields
When you sell visually-driven products, our app provides tools to set up filters for product attributes unavailable in both Shopify and our app by using product tags and Metafields. You can display those filter values in swatches by uploading your 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.
To integrate swatches in a filter created by tags and Metafields with your own custom images:
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 images.Please prepare images that you want to upload into those swatches. We suggest 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 represent in lowercase, and be formatted as PNG files.From your Shopify admin, go to Settings > Files. Click Upload files and upload all the images that you have prepared.
Pay attention: each uploaded file has a Link button beside the file you use later.
From the app’s admin, go to Filter > Swatches. 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.
Select Image in the drop-down of Option Display.
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.
Click Save swatch settings.
Repeat these steps with all swatch names that you want to replace with your images.
Check how they are displayed on your storefront.
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].