By default, the filter on collection pages can be set to display the names of the colors without actually showing the color. To display swatches and images in the filter you first need to install the “Search and Discovery” app from your Shopify dashboard Apps section.

Once you have the app installed you need to create a metaobject. If you haven’t worked with metaobjects yet please check the references here.

Creating a metaobject

In your Shopify dashboard head to “Settings->Custom data->Metaobjects definitions” and click “Add definition”. Name the metaobject, e.g. “Color Swatches“.

Now add the first field. It will hold the name of the color, so click “Add field”, select “Single line text” and name it “Name“. The next field will hold color. For that purpose select “Color” and name it “Color“. The last field will have images. For that purpose select “File” and name it “Image“.

Once you have these set, save the metaobject.

Create a metafield

Now that we have a metaobject we need to create a metafield to reference that object. Head to “Settings->Custom data->Metafields->Products” and click “add definition”. Name the metafield, e.g. “Colors“.

As a “type” select “Metaobject” in the “reference” section and then from the drop-down the metaobject you created ( e.g. Color Swatches ). At last select “List of entries” option and save the metafield.

Add Colors to the metaobject

Now you can add colors by going to “Content->Metaobject“. Select your metaobject and click “add entry”. Each entry accepts “name”, “color” and “image”. If you need just a solid color add “color” value and the name. If your product would be better presented with a pattern, add an image showing that pattern.

The colors/images you added to the metaobject can now be assigned to products from the product’s metafield section. Go to one of your products scroll to “Product metafields” and click on the metafield you created ( e.g. Colors ). Select the colors that apply to that product.

You can also create new metaobject entries ( add new colors ) directly from there by clicking “add new entry“.

Show color swatches in the filter

Now that we set up all the colors and assign them to products we need to display them in the filter. To do that in your Shopify dashboard go to “Apps->Search and Discovery ->Filters” and click “Add filter“.

Click inside the “Source” field and then from the list select the product metafield you created for this purpose ( e.g. Colors ). You will see all the color values listed under “values”.

Now go to “Display options“. As we created this metafield to display color options select “Swatch“. If your products only feature solid colors you can just set “Swatch color” to “Color”. If some of your products use images to show patterns then set “Swatch pattern” to “image” otherwise you can set it to “none”.

Save the filter. Color options should now be displayed in your collection page filter.

Other uses for this feature

Besides displaying the nice color swatches you can use equally well use the same process to create a filter that would display for example various shapes, types, or even brand logos.

The setup process would be roughly the same. You’d create a metaobject that would have “Single line text” for the name and a “File” field. Color wouldn’t be needed here. Then create a metafield to reference that metaobject. Keep in mind that the name of the metafield is the name of the filter that would appear on your collection page.

In the end, you’d set Search and Discovery app to show “Image” instead of “Swatch”.