- Replace the theme’s search bar with FiboSearch
- Add FiboSearch to the menu
- Add FiboSearch with a shortcode
- Add FiboSearch as a widget
- Add FiboSearch to a PHP file
There are 5 ways to add FiboSearch to your website.
If FiboSearch is integrated with your theme, you can automatically replace all themes’ search bars with FiboSearch. For a list of integrated themes see: https://fibosearch.com/documentation/themes-integrations/.
Go to WooCommerce →
Starting (tab) and check the ‘Replace all <your theme’s name> search bars with the FiboSearch.’ checkbox →
Save the changes
Go to Appearance →
Menus → choose the menu where you want to insert FiboSearch →
add FiboSearch to the menu →
save the changes. You can also change the layout of the search bar.
You can easily add FiboSearch to your website with a shortcode. There are a few possible configurations:
[fibosearch layout="icon"]will add FiboSearch as an icon
[fibosearch style="solaris"]will add FiboSearch as a search bar
[fibosearch layout="flex-icon-on-mobile"]will add FiboSearch as an icon for mobile devices and as a search bar for devices with wider screens. The breakpoint can be
set in WooCommerce→
Search bar (tab)→
Mobile breakpoint(the breakpoint is enabled when Layout is set to ‘Icon on mobile, search bar on desktop’).
[fibosearch layout="classic" mobile_overlay="1"]will add FiboSearch as a search bar but will open an overlay on mobile devices.
[fibosearch layout="icon" class="fibosearch "]will add a CSS class so you’ll be able to style the search bar independently.
For a detailed tutorial using the FiboSearch shortcode, please refer to this article.
Go to Appearance →
Add ‘FiboSearch bar’ to your website. You can choose the search bar layout:
FiboSearch can be added to your PHP files with the following code:
<?php echo do_shortcode('[fibosearch]'); ?>
You can also use parameters with the shortcode, eg.:
<?php echo do_shortcode('[fibosearch layout="icon"]'); ?>
For supported parameters, see “Add FiboSearch with a shortcode“.