Swatch filters
Available in Whisk 6.3.0 and later
Swatch filters are a way to display swatches with filters on a collection or search page. Here are examples of how that could look taken from our "Sharp" demo store "Honey to the Bee".
Here's a step by step of how to add these to your store.
Create a Swatch metaobject and add swatches to it
If you are already using swatches for product variants and you want to use the same swatches for filters, you can skip this step and reuse the swatches you have already created. If you want different swatches for filters, you can create a new metaobject list with a different name, it doesn't have to be "swatches". All of the other fields should be named exactly the same as instructed.
If you need to create swatches for the first time, follow the first step in the instructions on the Swatches documentation. There's also a narrated video on this page that walks you through the setup step by step.
Here's a screencast video that goes through all of the remaining steps as we added swatch filters to our "Soft" demo store. We've also included text instructions below.
Add a new product metafield that accepts a list of metaobject entries
Visit "Settings/Custom data" and click the "Add definition" button in the upper right corner.
Fill out the fields and click "Save".
Name: This should be the name of the filter. Here's an example of where it would be displayed.
Namespace and key: This can be whatever auto populates. It doesn't need to be anything specific.
Description: This is for you in the Shopify Admin to describe what this metafield is for. It will not display on the store.
Type: Choose "Metaobject" from the dropdown selector. From "Reference" select the Swatches metaobject that you would like to use. We recommend selecting "List of entries" in case you want to have a product show in more than one swatch (e.g. a t-shirt is white black stripes, and you want it to show as results for "white" and "black" color swatches.
Make sure "Access/Storefronts" is set to "Read". This should be enabled by default.
Click "Save" to finish.
Add the swatches to each relevant product
Navigate to "Products" in the left column menu in the Shopify Admin. In each product that you want to be a result for a swatch, click into that product, scroll down to the bottom, and under "Metafields" add the relative swatch/swatches. You only need to do this on products that you want to have results under the swatches, you can leave this metafield blank on any irrelevant products.
Add the metaobject filter to the Search & Discovery app
If you haven't already installed Shopify's Search & Discover app, install it in your store now.
Once installed, go to the app and visit the "Filters" section. Click into "Add filter". Under source, look for your swatches metafield in the dropdown under "Product metafields". In display type, select "Swatch". To learn more about the other options here and how the Search & Discover app works with filters, visit Shopify's documentation on Filters.
That's it! This filter should be added to your store and now display with swatches.