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

Go to menu Filter, select Manage Filter trees, select a filter tree and select create a filter option.

Select Swatch for Option display (available in the Color, Size, and Tag display type), and a Swatch style.

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

Now that you've had filter options with swatches, go to menu Filter and select Swatch settings to edit them.

Each value has a Swatch display type, choose the display option: One color

Select the text box to choose a color from the color wheel (or paste the HEX color code directly).

Save 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:

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

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

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

Select the Save swatch settings button.

Method 2: Merge 2 existing values:

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

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

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

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

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

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.

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

On the right side of the Swatch settings page, you will see the Swatch value filter, which has three options, Any, Complete and Missing to filter your swatches based on your preference.

Any: Shows all values (chosen by default)

Complete: Shows all swatches that are completely set up and have values

Missing: Show all swatches that are not completely set up and do not have values

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.