Overlay on mobile

Using an overlay on mobile devices is beneficial in few different ways:

  • Better search experience
  • More streamlined UX
  • Easy to find suggestions and results 
  • Minimalistic layout compliant with many modern designs

What do we mean by an overlay? Let’s have a look at examples:

Solaris layout (a default one in FiboSearch)


Pirx layout (alternative)


Overlay triggered by just an icon (alternative)

As you can see, an overlay appears after a customer taps the input box to type a query the input box jumps to the upper edge of the screen the whole screen changes into a field to present results and/or autosuggestions

Hence the name: “overlay” means covering anything that was already displayed on the screen and simplifying the view to input box + results. This helps avoid distraction and steer customers from anything but the results.

How to activate?

To activate this feature, please go to WooCommerceFiboSearchSearch barscroll down to “Appearance” section

Here’s how this will look in your dashboard:

  1. To activate the overlay, please select the checkbox (already selected on the print screen)
  2. Additionally, you can set a custom breakpoint – this lets you display the overlay only on devices smaller than X (992px in our case)

Using shortcodes

You can also activate the overlay feature via shortcodes. By doing so, that search bar will overwrite the global settings on your site and will appear as an overlay design on mobile devices.

Shortcodes:

  1. [fibosearch mobile_overlay="1" ] – forces overlay on mobile
  2. [fibosearch mobile_overlay="1" mobile_overlay_breakpoint="768" ] – forces overlay on mobile + breakpoint fixed at 768px