# Storefront filtering

<figure><img src="https://4258944798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXLyWaWgXXqOerFzAWewi%2Fuploads%2F6S4Y15HhwyynYCnqL4JV%2Fstorefront-filtering.jpg?alt=media&#x26;token=ae211088-82b9-4001-a16d-6f29289bbe03" alt=""><figcaption></figcaption></figure>

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](https://shopify.dev/themes/navigation-search/filtering).

{% hint style="info" %}
If your product collection contains **over 5000 products**, then filters are hidden. For more information, see [Add storefront filtering](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters). You must install [Shopify Search & Discovery](https://halosoft.gitbook.io/concept-documentation/installation/install-app/shopify-search-and-discovery) to customize the filter.
{% endhint %}

To select the filters that will appear on your collection pages:

1. From your Shopify admin, go to **Online Store** **->** **Navigation**.
2. Scroll down to **Collection and search filters**.
3. Open [**Shopify Search & Discovery**](https://halosoft.gitbook.io/concept-documentation/installation/install-app/shopify-search-and-discovery). Scroll down to **Customize filter settings** and click **View filters -> Edit filters.**
4. Select one or more filter options from the list of available filters.
5. Click **Save** to update your collection and search filters.

<figure><img src="https://4258944798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXLyWaWgXXqOerFzAWewi%2Fuploads%2FGfh3JfxeWPRIvSVxq9zZ%2Ffiltering.gif?alt=media&#x26;token=94371e3c-9726-4041-acea-d1ea6fd52d9f" alt=""><figcaption></figcaption></figure>

## How to show color swatches in the filter?

<figure><img src="https://4258944798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXLyWaWgXXqOerFzAWewi%2Fuploads%2F03RK5mWpRFpY2i2REJ27%2FScreenshot_1.png?alt=media&#x26;token=f8923cd4-1a5d-4d2a-8e43-65622f0f412c" alt=""><figcaption></figcaption></figure>

The default theme uses Color Board from the [w3schools website](https://www.w3schools.com/colors/colors_names.asp) for the color swatches. If the color name doesn't exist on the [w3schools website](https://www.w3schools.com/colors/colors_names.asp), it will not display on your filter.

{% hint style="info" %}
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
{% endhint %}