Articles on: Quizell Smart Search & Menu

Customizing Your Search Bar

Introduction

The Search Bar Editor controls how your search experience looks and reads — the search button, the search bar, the results popup, the tab labels, the colors, and the "no results" text. A live preview sits beside the settings so you can see every change as you make it.

(This article covers appearance and wording. To change how search behaves and what it returns, see Setting Up AI Search.)

The Search Bar Editor is part of Quizell Smart Search & Menu, a separate Shopify app from Quizell.

Where to find it

In your Shopify admin, open Apps → Quizell Smart Search & Menu → Search
In the Adjust your search widget look card, click Edit widget

Use See it on your store at any time to view your search on your live storefront

The editor has three tabs — Settings, Layout, and Text — with a preview panel on the right showing the Search Button, Search Bar Button, and Search Bar Popup.

Settings tab

Place the search button on your store

The Settings tab gives you embed snippets to position the search trigger wherever you want it in your theme:

Search Button Settings — copy the button embed (e.g., <div id="navigo-search-bar-button"></div>) and paste it into your theme where you want the search button to appear.
Search Bar Button Settings — the version with icons (e.g., <div id="navigo-search-bar-button-icons"></div>), plus Search Bar Button Input Text to set the text shown inside the bar.

Control the wording and tabs of the search popup:

Search Bar Button Text — the label on the search trigger
Placeholder Text — the prompt inside the field (e.g., "Search for anything…")
Show RTL Layout — enable for right-to-left languages
Show Count — display the number of results on each tab
Tab 1–5 Text — rename the result tabs (e.g., All, Products, Collections, Blogs, Articles). Use the eye icon next to a tab to show or hide it.

Layout tab

The Layout tab handles colors:

Search Bar Button Layout — Search Bar Button Border Color
Search Bar Popup Layout — Tab Background Color, Active Tab Background Color, Tab Text Color, Active Tab Text Color, Count Background Color, and Count Text Color

Set these to match your store's theme so the search experience feels native.

Text tab

The Text tab controls what shoppers see when a search comes up empty:

No Results Heading — e.g., "No results found"
No Results Message — e.g., "Try searching for something else"

A helpful, on-brand no-results message keeps shoppers searching instead of leaving.

Previewing your changes

Your edits appear instantly in the preview panel on the right. To confirm them on your actual storefront, use See it on your store.

Best practices

Match your theme. Pull your store's colors so the search bar and popup look built-in, not bolted on.
Keep tab labels short so they fit cleanly on mobile.
Hide tabs you don't use. If you don't publish blogs or articles, hide those tabs with the eye icon.
Turn on Show Count so shoppers can see how many results sit behind each tab.
Write a useful no-results message that nudges shoppers to try another term.
Enable RTL if your store serves right-to-left languages.

Important notes

The embed snippet must be placed in your theme for the search button to appear where you want it.
This editor controls appearance and wording only. Search types, relevance, and results are configured under Search — see Setting Up AI Search.
Use See it on your store to verify changes on your live storefront.

Troubleshooting

The search button isn't showing on my store

Make sure the embed snippet is placed in your theme, then check See it on your store.

A tab is showing that I don't want (e.g., Articles)

Hide it with the eye icon next to that tab in Search Bar Popup Settings.

Result counts aren't appearing on the tabs

Enable Show Count in Search Bar Popup Settings.

What's next?

With the bar styled and the search engine configured, your AI Search is ready for shoppers.

Updated on: 10/06/2026

Was this article helpful?

Thank you!