Skip to main content

Configure search suggestions

To configure the search bar, navigate to Search Studio > Design & Publish > General settings > Search bar.

Search designer

When you load your website in the Search Designer preview, the tool checks if your page already has a search input field. If it finds one, it automatically detects the selectors (like the unique identifiers for HTML elements) to connect your existing search bar with Zoovu Search.

If you have multiple search bars on your website or want to make adjustments, you can replace or add more selectors.

If you’ve previously integrated the default HTML code snippet from Zoovu Search, the selectors #searchBox (for the search input) and #searchButton (for the search button) are already configured. In this case, you don't need to make any changes.

Here’s an example of the default HTML setup:


<section role="search" data-zoovu-search="true">
   <input type="search" id="searchBox" placeholder="Search…">
   <button id="searchButton"></button>
</section>
  • Show search suggestions: Switch on this toggle if you want to enable autocomplete queries and as-you-type results. For example, when the user types "wire" the autocoplete suggestion could be "wireless".
  • Show results: Choose how to display search results — overlay, embed, or fullscreen:
    • Overlay: Displays the search results in a pop-up window on top of the current page.
    • Embed: The results appear within the page layout without opening a new window.
    • Fullscreen: Opens the search results in a full-page view.

Step 2: Style auto-complete suggestions and type-as-you-go results​

  • In the Design & Publish section, navigate to the second tab to style the auto-complete suggestions and type-as-you-go results.
  • Click "Customize" to start configuring the suggestions.

Search designer

Empty state vs. query-based suggestions

  • Empty state suggestions are the suggestions that appear when the search box is empty, before the user has started typing. They might include popular searches, recent searches, or recommended categories.
  • Query-based suggestions appear as the user types in the search box. They dynamically update based on the entered text, showing relevant products.
  • Choose how to display your suggestions by selecting from various layout options.
  • Drag and drop the suggestion blocks onto the suggestion configurator on the right side of the screen. To customize any block, click on the pencil icon.
  • Click "Save".

Search designer