How to display swatches in a filter option? (using Swatch settings)

This feature applies to filter option value (with swatch display option) of filter tree only, not for product grid & is not available for all customers yet.

Create a one-color swatch option

Stage 1: Create filter option with Swatch display type

Stage 2: Use Swatch settings

Create a two-color swatch option

For example, if you want to create a swatch option called: Red and yellow for products that have both colors, there are 2 ways to do so:

Method 1: Create a new value:

1
Create a color variant called Red and yellow in your product data.



2
Now that the new value is available in your product data, and in the filter tree option. You will see it as a new value in Swatch settings


3
Click on the two color option box to select 2 colors for this swatch


4
Select the Save swatch settings button.

Method 2: Merge 2 existing values:

1
Merge the color value Red and the color value Yellow into a new value called Red & Yellow

2
The merged value added to your filter option is now available in the swatch settings


3
Select the Save swatch settings button.

Create an image swatch option

Use this when you have a value that needs an image to demonstrate it, not just one or two colors as a swatch but an illustration.

For example, we have a color value called Color Block

1
Upload your swatch image to Shopify Files: Select Settings on your Shopify dashboard, access  Files.


2
Select the Upload files button and choose the image from your local storage. We recommend using .png, .jpg, .jpeg images with the resolution of 28x28 pixels


3
Copy the link of the uploaded file and paste in the Swatch value.
Please be reminded that only URLs of files uploaded to Shopify Files settings as guided above are accepted in Swatch settings.



4
Select the Save settings button.

Filter option values with more than 30 characters will not be listed as a swatch value in Swatch settings.