Add AI To Your Search Bar

Search is one of the highest-intent actions on ecommerce sites. Customers who search often know what they want and are ready to act. Adding AI to your search bar helps them find products and relevant website pages faster with natural language queries like "linen shirts under $200 for someone 6 feet tall", "return policy", or "financing application" instead of struggling with exact keywords.

You have two options for adding AI to your search:

Replace your search bar with Nobi's Dual Mode Search Bar
Keep your existing search bar and add the AI Mode Toggle to it

Option 1: Replace With Dual Mode Search Bar

The Dual Mode Search Bar is a drop-in replacement for your existing search bar. It includes a toggle that lets customers switch between your regular search and Nobi’s AI search.

Preview:

Works exactly like the Toggle option except it replaces your search bar. If the user keeps Default on, the query runs through your normal search. If they toggle AI, Nobi intercepts the form submission, launches AI search, and presents results in a modal. AI search can show products, website pages, or both based on your settings and the shopper’s intent.

How It Works

When customers have the toggle set to "Default", their search runs through your normal search results page. When they switch to "AI", Nobi intercepts the query and opens the chat modal with AI-powered results. Those results can include matching products, relevant website pages, or both.

When to Use This Option

You want to simplify your search interface - Replace your current search with a cleaner, unified experience

You don't rely heavily on typeahead - The Dual Mode Search Bar doesn't include typeahead or autocomplete features your existing search might have

You want a modern search experience - Give customers an obvious choice between traditional and AI search

Installation

Replace your existing search form with the Dual Mode Search Bar component. Find your search form and replace it with:


<nobi-search-bar
  default-mode="site"
  size="regular"
  cta-variant="auto"
  show-mode-toggle="true"
  show-hint-row="true">
</nobi-search-bar>

Configuration

See the Dual Mode Search Bar component page for details on how to configure this feature to your liking.

2. Keep your existing search bar and add an AI Mode Toggle next to it

This is a good option if you want to keep your existing search form and typeahead functionality.

Option 2: Add Toggle to Existing Search Bar

The AI Mode Toggle integrates directly into your current search form. It adds a small toggle element that lets customers switch between your default search and AI search without changing anything else about your search bar.

Preview:

How It Works

The toggle sits inside your existing search form. When set to "Default", your form submits normally to your search results page. When set to "AI", Nobi intercepts the submission and opens the chat modal instead.

When to Use This Option

You want to keep your existing search exactly as is - Your typeahead, autocomplete, and other search features remain untouched

You want the lightest-touch integration - Add one line of code to your existing form

You're testing AI search adoption - See how many customers choose AI versus traditional search without committing to a full replacement

You have complex search functionality - Keep advanced features like faceted search, instant results, or custom integrations

Installation

Add the code below to your existing form, be sure to set the input-selector attribute to the correct CSS selector to identify your input.


<nobi-toggle
    default-mode="site"
    size="regular"
    input-selector="#Search-In-Modal"
    auto-detect-page-context="true">
</nobi-toggle>

Configuration

See the Toggle Launch Component page for details on how to configure this feature to your liking.

Video Demo

Add AI To Your Search Bar Option 1: Replace With Dual Mode Search Bar Preview:How It Works When to Use This Option Installation Configuration 2. Keep your existing search bar and add an AI Mode Toggle next to it Option 2: Add Toggle to Existing Search Bar Preview:How It Works When to Use This Option Installation Configuration Video Demo Search Result Settings

Search Result Settings

In General Settings, the Search results setting controls what Nobi can show when AI search runs. The default is Products and pages. You can also choose Products only or Pages only if you want AI search to focus on one result type.

Products and pages: Nobi can show product results, website page results, or both depending on intent.
Products only: Nobi only shows product results.
Pages only: Nobi only shows indexed website pages.

Nobi only shows options that match your store data. If your store has no products or no indexed pages, the unavailable option is hidden.