By default, the filter on collection pages shows the names of colors without displaying actual color swatches. To show swatches and images in the filter, you first need to install the “Search and Discovery” app from the Apps section in your Shopify dashboard.

Once the app is installed, you’ll need to create a metaobject. If you’re not familiar with metaobjects, please refer to the relevant documentation.

Creating a Metaobject:

1. In your Shopify dashboard, go to Settings > Custom data > Metaobjects definitions and click “Add definition”.
2. Name the metaobject (e.g., “Color Swatches”).

Now, add the fields:

• For the color name, click “Add field”, select “Single line text”, and name it “Name”.
• For the color itself, select “Color” and name it “Color”.
• For the images, select “File” and name it “Image”.

Once you’ve set up the metaobject, make sure to save it.

Create a Metafield

Now that the metaobject is ready, you’ll need to create a metafield to reference it. Follow these steps:

1. Go to Settings > Custom data > Metafields > Products and click “Add definition”.
2. Name the metafield (e.g., “Colors”).
3. In the “Type” section, select “Metaobject”.
4. In the “Reference” section, choose the metaobject you created (e.g., “Color Swatches”).
5. Finally, select the “List of entries” option and save the metafield.

Add Colors to the Metaobject

To add colors, follow these steps:

1. Go to Content > Metaobjects.
2. Select your metaobject (e.g., Color Swatches) and click “Add entry”.
3. For each entry, you’ll need to provide:
   • Name: The name of the color (e.g., Red, Blue).
   • Color: Enter the color value (e.g., #FF0000 for red).
   • Image: If you want to use an image (for a pattern or textured color), upload the image here.

If you only need a solid color, you can just add the color value and the name. For products that would be better presented with a pattern, use the image field to show that pattern.

The colors and images you added to the metaobject can now be assigned to products through the product’s metafield section. To do this:

1. Go to one of your products.
2. Scroll down to the “Product metafields” section.
3. Click on the metafield you created (e.g., “Colors”).
4. Select the colors that apply to that product.

You can also create new metaobject entries (add new colors) directly from the product metafield section by clicking “Add new entry”.

Show Color Swatches in the Filter

Now that you’ve set up and assigned colors to your products, it’s time to display them in the filter. To do this:

1. In your Shopify dashboard, go to Apps > Search and Discovery > Filters.
2. Click “Add filter”.

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

Next, go to “Display options”:

• Since we created this metafield to display color options, select “Swatch”.
• If your products only feature solid colors, set the “Swatch color” to “Color”.
• If some of your products use images to show patterns, set “Swatch pattern” to “Image”. Otherwise, set it to “None”.

After adjusting the display options, save the filter. Your color options should now be displayed in the filter on your collection page.

Other uses for this feature

In addition to displaying color swatches, you can use the same process to create filters for other attributes, such as different shapes, types, or even brand logos.

The setup process for filters such as shapes, types, or brand logos would be similar:

1. Create a metaobject with:
   • A “Single line text” field for the name (e.g., shape, type, or brand).
   • A “File” field to upload images (color is not needed in this case).
2. Create a metafield to reference that metaobject. Remember, the name of the metafield will be the filter name that appears on your collection page.
3. In the Search and Discovery app, set the display option to “Image” instead of “Swatch” for this filter.