Layer Customization

The Live Layer can be customized for desktop and mobile devices, selecting the behavior that best suits your store.

To customize the layer, go to Layers > General Settings.

Layer name: You can edit the name of the layer if needed and click ‘Save’ to save the changes.
Characters to display results: Number of characters on the search box to start showing results. You can edit the number from here, default is 1.
Automatic filters: If enabled, some filters are automatically applied when a search is performed, so the user gets better results.

Search Sequence

The search sequence allows you to choose the order and layout of your layer, to guide your client during the search session. This sequence can be customised according to 3 events: CLICK - TYPE - ENTER.

On Click: The moment the user clicks on the search box.
On Type: When the user starts typing in the search box.
On Enter: When the user presses 'Enter' inside the search box.

How to Configure the Search Sequence

You can easily configure the search sequence in the Admin going to Layers > General Settings > Search Configuration.

First, you will have the option to select Desktop or Mobile view. Then you can organise the search sequence by enabling or disabling the options.

Initial results: You will activate the 'On Click' event, popular and latest searches and recommended products will be displayed.
Brands & Categories: You will trigger the 'On type' event, showing Brands & Categories and best results, all based on search terms. It is displayed prior to the results layer, offering suggestions of products and filters in categories and brands, according to the search that the user is typing.
Embedded results: Will trigger the 'On Enter' event, embedding search results directly into your site design (Only available on desktop view and floating layers).

📌 Note: For the embedded results to display correctly, you need to enter an insertion point using a CSS selector.

Initial Results

Recommended Products Query: If you have enabled this option, you can include a query for recommended products. This means a search term to be used to select the recommended products. If empty, the most popular ones will be displayed. (Desktop only). Please note that this query will not be included in your statistics.

💡 Tip: You can apply a Custom Result in a 'Query for recommended products' and choose the first products that you want to appear in your layer when it opens. Click here to learn how to do it.

Embedded Results

Insertion point: Enter a CSS selector to choose the element or elements in your page that can hold embedded search results.Find more information here.
Query parameter: The layer uses the search parameter of your store URL to extract the search query for autoloading. The query parameter will be what calls the embedded layer and triggers the correct query.

Suggestions: Allows you to display search suggestions on the screen.
Voice Search: Enables users to find results via voice recognition if the browser supports it. (Available for mobile devices).
Guided Search: Display a search-based guide to apply filters that helps the user to better segment the results.

Multi-index Layer

Before configuring this type of layer, make sure that the indexes have been created correctly in your Search Engine section. You can refer to this article that explains how to do it: Multi-Indices.

1.Go to Layers > General Settings and activate the option 'Multi-index Results'.

Once activated, each available index will be added in a different tab.

Always remember to save your changes.

2.To edit the content of each tab, you can click on 'Edit'. All available indices will be listed and grouped among Search Engines by name.

📌 Note: This configuration is common for all Search Engines, so the same index type must have the same name among all Search Engines.

3.For the tab label, there are default translations for the most common use cases and name indexes:

product --> Products
category --> Categories
collection --> Collections
blog_posts --> Blog
pages --> Pages

For other use cases or customization it can be done from Layers > Translations.

Tab Labels: Check that proper translations for tab:<type_name> strings exist, like tab:product or tab:collection. The translation entered will be the displayed name.

📌 Note: Multi-index layer is available for fullscreen, floating and embedded layers, for desktop and mobile views. Remember to select the layer option in your store settings.

Custom HTML if no results

You can write your own HTML to customize the message displayed when there are no results found in the results screen.

📌 Note: The use of the .df-no-results CSS class is recommended.

Delete layer

You can remove the layer by clicking on “Delete layer” at the bottom left of the screen.

Always, remember to click ‘Save’.