Skip to main content

Search designer

The Search designer is a no-code tool that allows you to configure the appearance and behavior of your search box and results. You can adjust settings such as layout, auto-suggestions, and search history, and see changes reflected immediately in the interactive preview.

Search designer

Get started​

To access the Search designer, go to Search Studio > Design & Publish.

You can choose from the following options to begin:

  1. Start from scratch – Work with a blank sample layout or preview your own website.
  2. Import settings from your site – If your Zoovu Search is already live, enter your website URL to import the current configuration.
  3. Use an existing configuration – Paste your Zoovu configuration code to continue editing from a saved setup.

On the right side, you'll see a sample layout. This lets you test your configuration and later apply it to your website. You can also enter a URL at the bottom of the page to generate a live search preview.

The preview pane on the right side of the screen displays how your search configuration will appear and behave. You can test changes in real time and optionally enter a URL at the bottom of the page to load a live preview of your search experience.

To test your setup, type keywords into the search box and see how results, suggestions, autofill, and recommendations are displayed. You can also click "Preview" in the top-right corner to open a full-screen preview.

Search designer

On the right side, you can access search settings:

Search bar settings​

By default, the search bar settings are hidden. If you want to configure the search bar, go to General Settings and enable "Add a search bar to my website." This will make the Search Bar settings appear.

Search designer

General settings​

General settings control how your search behaves and looks.

  • Set the main colors for your search UI.
  • Choose how search results appear while loading.
  • Select the language of the search UI.

Search bar options:

  • Use an existing search bar or add a new one.
  • Define selectors for the search box and search button.
  • Set placeholder text (e.g. "Search...").
  • Enable an animated placeholder effect.

How to display results:

  • Overlay (results appear in a popup).
  • Embed (results are shown directly on the page).
  • Fullscreen (results take up the entire screen).
  • Voice search – Enable voice search.

Go to General Settings > Tracking to connect your search to Google Analytics or Google Tag Manager. Learn more.

Suggestions​

Suggestions help users find what they need quickly. You can customize two types of suggestions:

  • Empty state – What users see before they start typing.
  • Query-based – What users see after they type a few characters.

Go to Suggestions > Empty State/Query-based and click "Customize" to choose a layout for your search suggestions. Drag and drop the boxes onto the preview:

Search designer

General suggestion settings:

  • Set the number of characters before suggestions appear.
  • Define max width of the suggestion box.
  • Choose whether suggestions appear on mobile.
  • Allow users to open suggested results in a new tab.
  • Customize the call-to-action (CTA) button.

You can display related products to guide users toward relevant items.

  • Activate related products – Enable or disable related product recommendations.
  • Relation type – Choose how related products are determined.
  • Layout type – Display related products in a grid or list format.
  • Data points – Configure which product attributes are shown.

Results​

Configure how search results appear and function.

Navigation:

  • Group results by category.
  • Show an "All results" tab.
  • Display uncategorized results.
  • Allow sorting options as tabs.

Pagination & infinite scrolling:

  • Set results per page.
  • Enable infinite scrolling.
  • Allow results to open in a new tab.
  • Redirect users if there’s only one result.

Filters:

  • Show or hide filters.

Related queries:

  • Show additional search queries related to the current search.

Product results:

  • Enable mini product detail pages (mini-PDPs).
  • Add an "Add to Cart" CTA link.
  • Show stock availability, ratings, and badges.

Comparison:

No results page:

  • Customize title and description when no results are found.
  • Display alternative suggestions (fuzzy search, related queries, popular searches).

Highlighting:

  • Highlight search term matches in results.

Layout​

Adjust how search results are displayed on desktop and mobile.

Thumbnail settings:

  • Use a placeholder image for missing product images.
  • Collapse missing images or hide results without images.
  • Show alternative images.

Display options:

  • Show/hide images, URLs, result snippets, and data points.
  • Enable a toggle for switching between list and grid views.

CTA settings: – Configure call-to-action buttons for results.

Test and publish​

When you're happy with your setup, click the "Publish" button in the top-right corner. To integrate search on your site, add the copied code before the closing </body> tag.

Testing your configuration:

  • Type a keyword in the search box on your website.
  • If the search is installed correctly, you should see the same results as in the Search Preview.

While Search Preview queries aren’t logged, actual search terms on your site will appear in your Dashboard analytics.

Reset or copy configuration​

Starting over​

If you want to reset your search configuration:

  • Click the three dots icon next to the Publish button.
  • Select "Delete this configuration."

Search designer

This action cannot be undone and will reset the configuration to an empty state.

Copying configuration​

You can copy search settings across your projects:

  • Click the three dots icon next to Publish.
  • Select "Copy to another configuration."
  • Choose the source and target configuration.
  • Click Copy. This will overwrite existing settings but won't publish them automatically.

Advanced settings​

The Advanced tab lets you fine-tune your search experience with custom styling, callbacks, and template configurations. This is where you can apply deeper customization beyond what’s available in the standard UI.

Changes in the Advanced tab don’t require republishing. They apply automatically when saved.

Use caution when editing configuration settings - incorrect changes may break search functionality.

The Advanced Configuration section allows you to modify:

  • CSS – Add custom styles to your search plugin.
  • Callbacks – Define JavaScript functions that trigger at different stages of the search process.
  • Renderers – Customize how search results and suggestions are displayed.
  • CTA (call to action) buttons

Custom CSS​

You can add custom CSS styles to modify the appearance of the search box, results, filters and other UI elements. This is useful for applying brand-specific designs or making small layout adjustments.

Example:


.search-box {
  border-radius: 8px;
  background-color: #f0f0f0;
}

Callbacks​

Available callbacks:

  • Presearch Callback – Runs before a search query is sent.
  • Postsearch Callback – Runs after search results are returned.
  • Filter Rendered Callback – Modifies filters after they are loaded.
  • PreInit Callback – Runs before the search plugin is initialized.
  • Init Callback – Runs when the search plugin initializes.
  • PreRender Callback – Runs before search results are displayed.
  • Suggest Line Callback – Customizes how suggestions appear.
  • Add to Cart Callback – Modifies how the "Add to Cart" button works.
Learn more.

Renderers​

  • Content Result Renderer customizes content search results.
  • Product Result Renderer customizes product search results.

You can modify templates for:

  • Result items – How individual search results appear.
  • Suggestions – How autocomplete suggestions look.
Learn more.

Plugin configuration​

The Plugin Configuration section in Advanced settings lets you edit the search plugin’s JavaScript configuration.

Search designer

If a setting is not available in the UI, you can modify the zoovuSearchConfig configuration object.

Example default configuration:

{
  "searchBox": {
    "placeholder": "Search…"
  },
  "results": {
    "searchQueryParamName": "zQuery",
    "sortingParamName": "zSorting",
    "showRelatedQueries": false,
    "embedConfig": {
      "contentBlock": "main"
    },
    "integrationType": "layover",
    "fullScreenConfig": {}
  },
  "queryTerm": {
    "highlightColor": "#b5f948"
  },
  "layout": {
    "navigation": {
      "flatTabs": true
    }
  },
  "siteId": 35584,
  "ecomDev": true
}

Learn more about Search Plugin configuration settings.