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.
In this article
Create a one-color swatch option
Stage 1: Create filter option with Swatch display type
Here are the supported Swatch styles:
Swatch style Type | On storefront |
Round swatches (grid view) | ![]() |
Round swatches (list view) | ![]() |
Square swatches (grid view) | ![]() |
Square swatches (list view) | ![]() |
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 valueYellow
into a new value calledRed & 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.


Manage swatch values
Identifying swatches that have not been completely set up yet might be troublesome if you have a lot of swatches in the app's admin. This feature will help you sort them easily.
Go to the Filter menu on the app, then select Swatch settings
When choosing the Complete or Missing option, there will be a corresponding tag, Swatch value is complete or Swatch value is missing under the search box.
Note: Refreshing the page will bring it back to the default status ( Any).
Filter option values with more than 30 characters will not be listed as a swatch value in Swatch settings.