Storefront Filters

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

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.

To use this element, you must have the Shopify Search & Discovery app installed to customize your filter.

Learn how to customize filters with the app.

How to set up the Foxify: Storefront Filter widget

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.

How to edit the Foxify: Storefront Filter widget

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

General Settings

Desktop layout: Choose how filters appear on desktop screens:

Drawer button

The Drawer button layout shows the filter button as a clickable element that opens a "drawer" or side panel when clicked.

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.

Vertical

• 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.

Constraints

Element Container

Text Font, Spacing, and Styles

• Font: Choose from hundreds of fonts. You can also upload your own fonts to Foxify.

• Size: Define the font size of the text.

• Text case: Click the icons to set the text's capitalization: As typed , 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.

Drawer button

Drawer button hover

Animations

Animations