# Storefront filtering

<figure><img src="https://halosoft.gitbook.io/~gitbook/image?url=https%3A%2F%2F4258944798-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FXLyWaWgXXqOerFzAWewi%252Fuploads%252F6S4Y15HhwyynYCnqL4JV%252Fstorefront-filtering.jpg%3Falt%3Dmedia%26token%3Dae211088-82b9-4001-a16d-6f29289bbe03&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=a95857b3&#x26;sv=1" 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](broken-reference) 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**](broken-reference). 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://halosoft.gitbook.io/~gitbook/image?url=https%3A%2F%2F4258944798-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FXLyWaWgXXqOerFzAWewi%252Fuploads%252FGfh3JfxeWPRIvSVxq9zZ%252Ffiltering.gif%3Falt%3Dmedia%26token%3D94371e3c-9726-4041-acea-d1ea6fd52d9f&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=9709321a&#x26;sv=1" alt=""><figcaption></figcaption></figure>

***

## How to show color swatches in the filter? <a href="#how-to-show-color-swatches-in-the-filter" id="how-to-show-color-swatches-in-the-filter"></a>

<figure><img src="https://halosoft.gitbook.io/~gitbook/image?url=https%3A%2F%2F4258944798-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FXLyWaWgXXqOerFzAWewi%252Fuploads%252F03RK5mWpRFpY2i2REJ27%252FScreenshot_1.png%3Falt%3Dmedia%26token%3Df8923cd4-1a5d-4d2a-8e43-65622f0f412c&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=a70284d1&#x26;sv=1" 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 %}
