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:

In your Foxify dashboard go to App extensions or in your FoxStudio editor, on the left sidebar, click Manage apps (A).
Filter for Foxify, look for Foxify: Storefont Filters
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.

Steps:

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

Steps:

Select the Storefont filter element in the editor.
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:

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.

The Vertical layout positions the filter options in a vertical list format directly on the page.

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.

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

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.

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

Fill Color: Sets the text and background color for the button on hover.

Animations

Last updated 12 days ago

How to use Foxify: Storefont Filters

How to set up the Foxify: Storefront Filter widget