Set up the latest Doofinder layer for your e-commerce

Layer Configuration

Before you start, log in to your Doofinder control panel and click on the search engine you want to set up. You will be redirected to the feed configuration page.

Within the side menu click Installation Scripts and select Doofinder Layer. The following screen will show the script you have inserted into your site, if you already you have configured a layer.

To modify the layer press the button labelled Configure Doofinder Layer. The wizard of the layer configuration will open.

The wizard starts by asking for confirmation of the web page where you want to install the layer and the platform (Magento, Shopify or Regular Website) you use. If the wizard misses the detection of the platform, select the appropriate one from the drop-down menu.

Don’t worry if the platform you use for your ecommerce isn’t on the list or you are not sure, in this case, select Regular Website. When you finish reviewing the information, click on OK.

Then select the layer variant you want to use:

  • Classic: Doofinder is displayed as a pop-up window, attached to your search bar.

  • FullScreen: The browser opens as a layer that occupies all the available area of the browser, above the normal content of the page. This variant  permits a better visualization of the results and a greater brand customization by allowing the incorporation of a corporate logo.


Once you have confirmed the selected variant, the wizard will ask you to specify your search box. In the case of the Fullscreen layer, you can select any element of the page that the user can click, although the most obvious thing to do is to use the search box on your page!



To activate the selection mode, press the Choose Searchbox / Element button. The mode of selection will be completed when a valid item is selected or when the Cancel button is pressed.

If all went well, you will see a simulation of your layer below your search bar.

Finally, you can make some adjustments, which will be different depending on the type of layer you are configuring.

Once the layer is as you like it, you only have to save the changes made by pressing the Save button.

When the layer script page finishes loading, simply copy the Javascript code and paste it into the HTML template of your website. If you are using one of our modules, among the configuration options in your platform’s back office, you will find the option to paste the layer without having to modify the code of your page.