# 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="/files/hF8Mt5aY7iajv4TiT0JA" 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="/files/HkWM1YVfV38MDwhaKZyR" 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="/files/2oVo8Q54b2QGfaV4Yuqn" 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="/files/ikOUd1km74Prdo7NwQNr" 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="/files/AfGnO7DiGA1cuzKY7haI" 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="/pages/SSvw9bNbiI3U8pCyvlpe" %}
[Constraints](/foxify-app/foxstudio/layout-and-styling/constraints.md)
{% endcontent-ref %}

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

<figure><img src="/files/zavebfRfNBws3AOAvGe7" 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="/files/dL6oQ55sxcEJ8Ojfnyxx" 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="/files/V0PNCRlMgKjpwieHO1uM" alt=""><figcaption></figcaption></figure>

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

### Animations

{% content-ref url="/pages/7gnm1vqOxYHR0d2x5dym" %}
[Animations](/foxify-app/foxstudio/layout-and-styling/animations.md)
{% endcontent-ref %}


---

# 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://docs.foxecom.com/foxify-app/page-management/app-extensions/storefront-filters.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.