Skip to main content

​
What It Does

The Predictive Search component automatically displays when customers type in the header search bar, showing instant search results before submitting the search query. Results include products, pages, articles, and collections matching the search term.
This is an automatic component with no customizable settings. Displays automatically when customer types in search field. Cannot be configured in Theme Customizer.

​
How It Works

​
Automatic Display

Component appears when:
  • Customer types in header search bar
  • After 2-3 characters entered (minimum trigger)
  • Search query matches store content (products, pages, articles, collections)
Component hidden when:
  • Search field empty
  • Customer clicks outside search area
  • Customer submits search (redirects to full search results page)

​
Display Content

Predictive search dropdown shows:
  • Products - Product title, image, price (up to 4-6 products)
  • Pages - Page titles matching query (e.g., “About Us,” “FAQ”)
  • Blog articles - Article titles from store blog
  • Collections - Collection names matching query
  • “View all results” link - Links to full search results page
Grouped by type:
  • Products section
  • Pages section (if matches)
  • Articles section (if matches)
  • Collections section (if matches)

​
Search Behavior

Real-time updates:
  • Dropdown updates as customer types (live search)
  • Debounced (waits 200-300ms after typing stops before querying)
  • Reduces server load vs querying every keystroke
Click result:
  • Clicking product → Redirects to product page
  • Clicking page/article/collection → Redirects to that page
  • Clicking “View all results” → Full search results page (/search?q=[query])

​
Configuration (Theme Settings)

​
Predictive Search Settings

Shopify Admin → Online Store → Themes → Customize → Theme settings → Search: Typical settings:
  • Enable predictive search - Toggle on/off (some themes)
  • Number of products to show - Limit predictive results (4-8 products)
  • Show vendor - Display product vendor/brand in results
  • Show price - Display product price in results
Note: Settings location varies by theme. Some themes have no predictive search settings (always enabled, defaults used).

​
Best practices

Fast Server Required

Predictive search queries server on every keystroke. Fast hosting essential for responsive experience.

Optimize Product Data

Ensure product titles, descriptions contain searchable keywords. Improves predictive search accuracy.

Limit Results

Show 4-6 products max in dropdown (avoid overwhelming). “View all results” link for full list.

Mobile-Friendly

Predictive search dropdown must work on mobile (touch-friendly, readable on small screens).
  • Header - Contains search bar that triggers predictive search
  • Search Results Page - Full search results (where “View all results” redirects)

​
Key Takeaways

  • Automatic component - No section settings, displays automatically when customer searches
  • Real-time search - Updates dropdown as customer types
  • Shows multiple content types - Products, pages, articles, collections
  • Theme settings may apply - Some themes allow configuring product count, show/hide price
  • No Theme Customizer control - Cannot add/remove/reposition without code editing
  • Performance-dependent - Requires fast hosting for responsive live search
Predictive search configured automatically by theme. For advanced customization, edit theme code or explore search apps.