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 theme’s search bars with FiboSearch. For a list of integrated themes see: https://fibosearch.com/documentation/themes-integrations/.

Go to WooCommerce -> FiboSearch -> Starting (tab) and check the ‘Replace all <your theme’s name> search bars with the FiboSearch.’ checkbox. Save the changes.

Add FiboSearch to menu

Go to Appearance -> Menus, choose the menu you want to insert FiboSearch to, add FiboSearch to menu and 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 configurations possible:

[fibosearch layout="icon"] will add FiboSearch as an icon

[fibosearch layout="classic"] will add FiboSearch as a search bar

[fibosearch layout="icon-flexible"] 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 -> FiboSearch -> 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.

Add FiboSearch as a widget

Go to Appearance -> Widgets and 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’.