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:
Pirx layout (a default one in FiboSearch)
Solaris 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 WooCommerce → FiboSearch → Search bar → scroll down to “Appearance” section
Here’s how this will look in your dashboard:
- To activate the overlay, please select the checkbox (already selected on the print screen)
- 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:
[fibosearch mobile_overlay="1" ]– forces overlay on mobile[fibosearch mobile_overlay="1" mobile_overlay_breakpoint="768" ]– forces overlay on mobile + breakpoint fixed at 768px