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.

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.

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

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

No results found message

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.

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

Always, remember to click ‘Save’.