General Settings

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 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: They apply when the majority of the results fall into one attribute for example, if 80% of the results belong to the Adidas brand, the filter by Adidas brand will be applied automatically.

  • Search Query Retention: If enabled, the search term will remain in the layer's search box during the web browsing process.

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.

  1. On Click: The moment the user clicks on the search box.
  2. On Type: When the user starts typing in the search box.
  3. 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. The search sequence option may vary depending on the chosen view and layer selection.

Desktop View

For Desktop view, you'll find these available options depending on the selected layer:

  • Initial Content: 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).
choose the Search Sequence

Mobile View

For Mobile view, you'll find these available options:

  • Initial Content: You will activate the 'On Click' event, popular and latest searches will be displayed.
  • Initial Results: You will activate the 'On Click' event, and recommended products will be shown from the first click.
  • 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.
choose the Search Sequence
  • 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.

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

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

Enhanced Search Features

  • Suggestions: Allows you to display search suggestions on the screen

  • Visual Search: Enables users to find results via image recognition. (Available for Enterprise Plans).

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

 layer general settings

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'.
 enable multi index results

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

 multi-index tabs
  1. 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.
 multi-index edit

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

  1. For the tab label, there are default translations for the most common use cases and name indexes:
  2. product --> Products
  3. category --> Categories
  4. collection --> Collections
  5. blog_posts --> Blog
  6. pages --> Pages

  7. Save your changes.

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.
 multi-index translation

🗒️ 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.

No results message

🗒️ 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'.