Add AI Mode to my Search

Add AI Mode to my search

Toggle search between Default and AI Mode

Improve conversion rate and offer conversational search to your site by enabling an AI mode option.
 
Two ways to do this with Nobi:
  1. Keep your existing search bar and add our AI Mode Toggle next to it
  1. Replace your search bar with our Dual Mode Search Bar
 

1. 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.

Preview (try it below):

(<nobi-toggle>) allows customers to choose between the merchant's default search functionality and Nobi's AI-powered search experience without taking over the existing search bar.

Installation

In addition to the Nobi script in your Theme in Shopify, add the below code inside your Shopify search form (typically right before </form>:
<nobi-toggle
    default-mode="site"
    size="regular"
    input-selector="#Search-In-Modal"
    auto-detect-page-context="true">
  </nobi-toggle>
When the toggle is set to "Default", your form submits normally. When set to "AI", Nobi intercepts the form submission and launches the AI search with the query and presents the results in a modal.

Configuration

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

2. Replace your search bar with Nobi’s Dual Mode Search Bar

This is a drop-in search bar with a toggle between your native search and Nobi’s AI search. It provides multiple display modes, customizable styling, and merchant-friendly CSS classes. But it does not include typeahead or other animations you may have in your default search bar.

Preview (try it below):

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.

Installation

Replace your existing Shopify search form with the below:
<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.

Video Demo

Video preview