# Storefront Filters

{% embed url="<https://youtu.be/GOyeYqjA5QQ?si=SQpmAGptkHRs7jIq&t=236/>?" %}

**Storefront Filters** allow you to set up product filtering on your search and collection pages. This feature helps customers quickly find products based on availability, product type, color, or other options.

## How to use Foxify: Storefont Filters <a href="#how-to-use-foxify-inventory-status-with-foxify-smart-page-builder" id="how-to-use-foxify-inventory-status-with-foxify-smart-page-builder"></a>

{% hint style="success" %}
Steps:

1. In your **Foxify dashboard** go to **App extensions** or in your **FoxStudio editor**, on the left sidebar, click **Manage apps (A).**
2. **Filter for Foxify**, look for **Foxify: Storefont Filters**
3. Choose **Install Extension.**
   {% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FWQ4pGwrwyWh5uDncOada%2Fimage.png?alt=media&#x26;token=aa8054bf-c3f9-406f-83bd-2746ec83525e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To use this element, you must have the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery?surface_detail=recommended-for-you\&surface_inter_position=3\&surface_intra_position=11\&surface_type=home\&surface_version=simplified) app installed to customize your filter.&#x20;

Learn how to [customize filters with the app](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters).
{% endhint %}

## How to set up the Foxify: Storefront Filter widget

{% hint style="success" %}
Steps:

1. In **Pages manager**, open the page you want to add the app features to. Select **Add element > App blocks.**
2. Select **Storefont filter** from the **Installed apps** list, and drag the app widget you want to feature on your product page.
3. Set up and edit Storefont filter widget.
   {% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FNVhmxndy1xDmyyAVysPk%2Fimage.png?alt=media&#x26;token=71c23602-eb3c-46f9-a6f0-e1a05a95a5a9" alt=""><figcaption></figcaption></figure>

## How to edit the Foxify: Storefront Filter widget

{% hint style="success" %}
**Steps:**

1. **Select** the Storefont filter element in the editor.
2. Use the tools bar above the selected text element to quickly optimize it.

All the following formatting tools can be found in the **Inspector** panel
{% endhint %}

### General Settings&#x20;

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FjDbtkcJ0UTkg46nw7IU7%2Fimage.png?alt=media&#x26;token=ea4c6402-5512-4451-91d6-5e6a0be97bc5" alt=""><figcaption></figcaption></figure>

**Desktop layout:** Choose how filters appear on desktop screens:

{% tabs %}
{% tab title="Drawer button" %}
The **Drawer button** layout shows the filter button as a clickable element that opens a "drawer" or side panel when clicked.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FxjC4NLWGTAOZIFX2aQ3A%2Fimage.png?alt=media&#x26;token=72958dbb-cd87-4ac4-b328-0f1ade60c354" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Use case**: Ideal for stores with limited space or when you want to keep the page clean and only show filtering options when needed. The filter options are hidden by default and revealed in a side panel (drawer) when users interact with the button.
{% endhint %}
{% endtab %}

{% tab title="Vertical" %}
The **Vertical** layout positions the filter options in a vertical list format directly on the page.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FK6zXzG9UncjhE3AwRkT2%2Fimage.png?alt=media&#x26;token=482091cc-c018-4b1c-b1ff-f01583c03536" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Use case**: Best for stores where you want the filter options to always be visible, making them easy to interact with without needing additional clicks or actions.
{% endhint %}
{% endtab %}
{% endtabs %}

* **Show product count:** Toggle this to display the number of items available for each filter option.
* **Show filter icon:** Toggle to display a filter icon next to the button text.
* **Button label:** Enter the text you want to appear on the filter drawer button.

### Design Settings

**Size & Constraints Settings:** Use these controls to define the element’s dimensions and positioning behavior across devices.

{% content-ref url="../../foxstudio/layout-and-styling/constraints" %}
[constraints](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints)
{% endcontent-ref %}

{% tabs %}
{% tab title="Element Container" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FgBc6JuNtaNpszemfbnCP%2Fimage.png?alt=media&#x26;token=b486b3bd-1753-4993-829c-e6cc73253b74" alt=""><figcaption></figcaption></figure>

**Text Font, Spacing, and Styles**

* **Font**: Choose from hundreds of fonts. You can also [upload your own fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **Size**: Define the font size of the text.
* **Text case**: Click the icons to set the text's capitalization: **As typed** ![](https://docs.foxecom.com/foxify-app/~gitbook/image?url=https%3A%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2F12345678-1234-1234-1234-1234567890ab%2F651c25b0-2d60-43c8-addf-1df2fd575568%2F2024%2F08%2F14%2Fcf835ac2-622c-4066-a95e-39e9ff1a7f38%2Fc4f1d248-c718-427e-9db5-77369c22fb67.png\&width=300\&dpr=4\&quality=100\&sign=ac4af2c5\&sv=2), **Upper case** **AG**, **Title case** **Ag**, or **Lower case** **ag**.
* **Spacing:** Change the spacing between the lines and characters in the text box.
* **Text style**: Normal/*Italic*.
  {% endtab %}

{% tab title="Drawer button" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FGbRv3ySa2TEVZrNruMQ6%2Fimage.png?alt=media&#x26;token=151c32f9-b81f-4862-80a2-1853ace16e59" alt=""><figcaption></figcaption></figure>

* **Color Fill:** Set text color and background color of the tabs.

**Text Font, Spacing, and Styles**

* **Font**: Choose from hundreds of fonts. You can also [upload your own fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **Size**: Define the font size of the text.
* **Text case**: Click the icons to set the text's capitalization: **As typed** ![](https://docs.foxecom.com/foxify-app/~gitbook/image?url=https%3A%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2F12345678-1234-1234-1234-1234567890ab%2F651c25b0-2d60-43c8-addf-1df2fd575568%2F2024%2F08%2F14%2Fcf835ac2-622c-4066-a95e-39e9ff1a7f38%2Fc4f1d248-c718-427e-9db5-77369c22fb67.png\&width=300\&dpr=4\&quality=100\&sign=ac4af2c5\&sv=2), **Upper case** **AG**, **Title case** **Ag**, or **Lower case** **ag**.
* **Spacing:** Change the spacing between the lines and characters in the text box.
* **Text style**: Normal/*Italic*.
  {% endtab %}

{% tab title="Drawer button hover" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FAYBpvqJ5G8YIfS2Gcj2X%2Fimage.png?alt=media&#x26;token=24f2ca98-4d5b-443c-8a40-c14583258b9e" alt=""><figcaption></figcaption></figure>

**Fill Color:** Sets the text and background color for the button on hover.
{% endtab %}
{% endtabs %}

### Animations

{% content-ref url="../../foxstudio/layout-and-styling/animations" %}
[animations](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/animations)
{% endcontent-ref %}