Storefront filtering
Storefront filtering allows merchants to add filters to their collection and search results pages based on the following product and variant attributes: Availability, Price, Product type, Vendor, Variant options and Metafields. More information, see Storefront filtering.
If your product collection contains over 5000 products, then filters are hidden. For more information, see Add storefront filtering. You must install Shopify Search & Discovery to customize the filter.
To select the filters that will appear on your collection pages:
From your Shopify admin, go to Online Store -> Navigation.
Scroll down to Collection and search filters.
Open Shopify Search & Discovery. Scroll down to Customize filter settings and click View filters -> Edit filters.
Select one or more filter options from the list of available filters.
Click Save to update your collection and search filters.
How to show color swatches in the filter?
The default theme uses Color Board from the w3schools website for the color swatches. If the color name doesn't exist on the w3schools website, it will not display on your filter.
If your products have custom color/special color, please upload image with the same name as the variant color name: Go to Settings → Files -> Upload Files.
Naming convention: Lower cap and use a hyphen "-" to replace white space if your color image name has the white space. For example: your special color will have this name: "Holo Rainbow", you will upload the .png image is holo-rainbow.png