Shoptimizer theme

FiboFilters offers seamless integration with the Shoptimizer theme owned by CommerceGurus.

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

What does the integration include?


In the Shoptimizer theme, you can define your own color palette. You can do it in Appearance -> Customize -> Colors -> General. FiboFilters uses the Primary swatch color and General links color, so you don’t have to define them again in FiboFilters settings under the Appearance tab.

Shoptimizer color palette


The Shoptimizer theme sets the breakpoint to 993 px. When the screen width is less than this breakpoint, FiboFilters will use the horizontal layout for the filters.

Ways to embed filters in the Shoptimizer theme

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

First, you need to enable the sidebar in the Shoptimizer options. Go to Appearance -> Customize -> Layout -> Sidebars and select Left or Right under WooCommerce:

FiboFilters: enable sidebar in the Shoptimizer theme

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

Then, go to Appearance -> Widgets and add the FiboFilters – product filters widget to the Sidebar area:

As a result, you should see FiboFilters in the sidebar:

FiboFilters: filters in Shoptimizer sidebar

Off Canvas

When you add filters to the sidebar, they will automatically be moved to the off canvas area on mobile devices (below 993 px). Depending on the FiboFilters settings, either the Shoptimizer or the FiboFilters off canvas will be used.

If the Force horizontal layout on tablets setting in WooCommerce -> FiboFilters -> General is disabled, Shoptimizer will display a SHOW FILTERS button above the products:

FiboFilters: show filters in Shoptimizer

When clicked, it will display filters in the Shoptimizer off canvas area on the left:

FiboFilters: filters in Shoptimizer off-canvas

If the FiboFilters Force horizontal layout on tablets setting is enabled, FiboFilters will display the filters above the products on mobile devices.

Above the product listing

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 Shoptimizer theme