# Storefront filters

![](https://docs-assets.foxecom.app/foxify-app/a3923517-7953-4ec9-890b-f496d0f7dab0.png)

Add product filters to your collection and search pages, so shoppers can narrow results by availability, product type, color, price, and more.

Available on all Foxify plans.

<Hint type="info" title="Set up your filters in Shopify first">
  Storefront Filters shows the filters you create in Shopify's free [Search & Discovery](https://apps.shopify.com/search-and-discovery) app. Install it and add your filters before using this extension. See Shopify's guide on [how to customize filters](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters).
</Hint>

## Add Storefront filters to your page

1. Open the collection or search page you want to add filters to.
2. In the editor, open **Apps market** (**A**) and install **Storefront Filters**.<br/>![](https://docs-assets.foxecom.app/foxify-app/5878c570-2bc9-4436-964e-a819c5022733.png)
3. Open **Add to page** (**E**) > **App blocks**, then find **Storefront Filters** under **Installed apps**.<br/>![](https://docs-assets.foxecom.app/foxify-app/2dc7b25c-e31b-4951-8f59-8b1fbacfa918.png)
4. Drag the filter block onto your page, usually above or beside your product grid (**Main collection** section).

## Settings

Select the filter block on your canvas to open its settings in the Inspector.

### General

**Desktop layout** controls how filters appear on desktop:

<Table widths="30%">
  | Layout            | How it looks                                  | Best for                                                                                  |
  | ----------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------- |
  | **Drawer button** | A button that opens filters in a side panel.  | Clean layouts, or pages with limited space. Filters stay hidden until shoppers need them. |
  | **Vertical**      | Filters shown as a list directly on the page. | Large catalogs, where shoppers filter often and benefit from seeing all options at once.  |
</Table>

Other settings:

* **Show product count:** Show how many products match each filter option.
* **Show filter icon:** Show an icon next to the button label. Applied when layout set as Drawer button.
* **Button label:** The text on the drawer button, for example "Filter". Applied when layout set as Drawer button.

<Hint type="info">
  On mobile, filters always open in a drawer.
</Hint>

### Design

![](https://docs-assets.foxecom.app/foxify-app/69381731-88a2-4666-92b1-7a6afd922918.png)

Under **What do you want to design?**, choose the part to style:

* **Element container:** font, weight, size, spacing, and alignment of the filter text.
* **Drawer button:** text and background color, plus font settings.
* **Drawer button hover:** text and background color when shoppers hover over the button.

Drawer button and Drawer button hover only affect the Drawer button layout.

## FAQs

#### Why aren't my filters showing on the page?

Check that you've installed Shopify's Search & Discovery app and added filters there. Also make sure the products in your collection have values for those filters. For example, a Color filter won't appear if none of the products have a color option.

#### Can I choose which filters appear, and in what order?

Yes. Add, remove, or reorder filters in the Search & Discovery app. Changes show up in Storefront Filters automatically.

#### I changed the button label, but nothing happened. Why?

**Button label** and **Show filter icon** only apply to the **Drawer button** layout. If you're using **Vertical**, switch the layout to see these settings take effect.

#### Will the filters show on all my collections?

Filters show on every collection that uses this template. Check **Assigned collections** in the top bar to see which ones.