Skip to main content

Configure search suggestions

Search suggestions help users find products faster by showing relevant queries and results as the users type. Use the following setup to connect your search bar, enable suggestions and control how suggestions appear in the UI.

Make sure your search experience is already set up in Search Studio. Then open Design & Publish to configure the search bar and suggestions.

  • Go to Search Studio > Design & Publish > General settings > Search bar.

Search designer

  • When you open your website in the Search Designer preview, Zoovu checks whether your page already includes a search input field. If it finds one, it automatically detects the selectors needed to connect that search bar to Zoovu Search.

  • If your site has more than one search bar, or if the detected selectors are not the ones you want to use, you can replace them or add additional selectors.

If you already use the default Zoovu Search HTML snippet, the selectors #searchBox for the input field and #searchButton for the button are already configured. In that case, you usually do not need to change anything.

Example:​

<section role="search" data-zoovu-search="true">
   <input type="search" id="searchBox" placeholder="Search…">
   <button id="searchButton"></button>
</section>

Search bar settings​

  • Turn on Show search suggestions to enable autocomplete suggestions and type-ahead results. For example, when a user types "wire", a suggestion might be "wireless".
  • Under Show results, choose how search results should open:
    • Overlay: opens results in a layer on top of the current page
    • Embed: shows results inside the page layout
    • Fullscreen: opens results in a full-page view

Step 2: Customize suggestions​

In Design & Publish, open the second tab to style autocomplete suggestions and type-ahead results. Then click Customize.

Search designer

Empty state vs. query-based suggestions

  • Empty state suggestions appear before the user starts typing. These can include popular searches, recent searches or recommended categories.
  • Query-based suggestions appear as the user types and update based on the entered text. These can include matching queries or relevant products.

From here, you can:

  • choose a layout for your suggestion panel
  • drag and drop suggestion blocks into the configurator
  • click the pencil icon to edit an individual block

Click Save when you're done

Search designer

Before you publish, test the experience on your site and make sure:

  • the correct search bar is connected
  • suggestions appear when typing
  • the empty state behaves the way you want
  • the suggestion layout fits your page design
  • results open in the right mode: overlay, embed, or fullscreen

Next step: Once suggestions are working, review your search results layout and styling in Design & Publish so that the full search experience feels consistent.