> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/concept-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/concept-documentation/collection/storefront-filtering.md).

# 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 %}