Storefront theme

FiboFilters offers seamless integration with the Storefront theme owned by Automattic.

Table of Contents

If you have an active parent or child theme of Storefront, you will be able to activate the integration in the FiboFilters settings under the General tab. You should see the following screen:

FiboFilters: enable Storefront integration

What does the integration include?


The Storefront theme sets the mobile breakpoint to 767 px. FiboFilters respects this breakpoint. If you place the filters in a sidebar, FiboFilters will move them off-canvas if the screen width is 767 px and less.

Off-canvas position

FiboFilters will display filter UI in an off-canvas area if you select horizontal filters or when the mobile breakpoint is reached. The off-canvas position will depend on the Storefront sidebar position (right or left).

Ways to embed filters in the Storefront theme

The most popular ways to embed filter UI elements in the Storefront theme are adding them to the sidebar or displaying them above the product listing as horizontal filters.

First, select the sidebar position in Appearance -> Customize -> Layout -> General Layout. You can choose between right and left sidebar:

Select Storefront sidebar position (right or left)

Then, go to WooCommerce -> FiboFilters -> General and select Sidebar in the Filter location section.

Now you can add the filters to the sidebar. Go to Appearance -> Customize -> Widgets -> Sidebar and add the FiboFilters widget to the sidebar:

FiboFilters: add filters to Storefront sidebar

As a result, the filters will be displayed in the sidebar:

FiboFilters: filters in the Storefront sidebar

Above the products

Go to WooCommerce -> FiboFilters -> General and select Above the products in the Filter location section. FiboFilters will then place horizontal filters above the products:

FiboFilters: filters above products in the Storefront theme