# Storefront filtering

<figure><img src="/files/qun2oSfIFt9WoFTqIXAF" 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](/concept-documentation/installation/install-app/shopify-search-and-discovery.md) 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**](/concept-documentation/installation/install-app/shopify-search-and-discovery.md). 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="/files/Py5LS9OBY7sNzcFFnBpF" alt=""><figcaption></figcaption></figure>

## How to show color swatches in the filter?

<figure><img src="/files/YzXvE5ct9QkePw6kbxr6" 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/concept-documentation/collection/storefront-filtering.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.