How to add FiboSearch to your website

Table of Contents

There are 5 ways to add FiboSearch to your website.

Replace the theme’s search bar with FiboSearch

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 WooCommerceFiboSearch -> Starting (tab) and check the ‘Replace all <your theme’s name> search bars with the FiboSearch.’ checkboxSave the changes

Add FiboSearch to the menu

Go to AppearanceMenus → 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.

Add FiboSearch with a shortcode

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 WooCommerceFiboSearchSearch 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.

Add FiboSearch as a widget

Go to AppearanceWidgets Add ‘FiboSearch bar’ to your website. You can choose the search bar layout:

Add FiboSearch to a PHP file

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“.