Add AI To Your Search Bar

Search is one of the highest-intent actions on ecommerce sites. Customers who search know what they want and are ready to buy. Adding AI to your search bar helps them find products faster with natural language queries like "linen shirts under $200 for someone 6 feet tall" instead of struggling with 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 above except it replaces your search bar. If the user keeps the Default on, then the query runs through your normal search. But if they toggle AI, Nobi intercepts the form submission and launches our AI search and presents the results in a modal.

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.

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