Skip to main content
The Predictive Search section powers the search autocomplete dropdown that appears when customers type in the header search bar, showing instant product, collection, page, and article suggestions without requiring a page reload.
This is a dynamic AJAX-powered section with no customizer settings. All functionality is controlled by Shopify’s Predictive Search API and the theme’s JavaScript.

​
Section Overview

Predictive Search provides instant, real-time search results as customers type, improving discovery and reducing friction in the shopping experience. It displays multiple content types in an organized, scannable layout.

​
How It Works

Trigger:
  • Activated when customer types in header search input
  • Typically requires minimum 2 characters
  • Updates automatically as typing continues
  • Debounced to prevent excessive API calls
Display:
  • Appears as dropdown below search input
  • Two-column layout on desktop
  • Stacked layout on mobile
  • Smooth show/hide animations
Interaction:
  • Click any result to navigate
  • “View all results” button shows full search page
  • Escape key or clicking outside closes dropdown

​
Locale Strings

Translatable strings from locales/en.default.json:

Main Search

Full search results page template

Header

Header search bar configuration

Search Snippet

Search input component

Shopify Search

Shopify search documentation

​
Technical Notes

  • Requires JavaScript enabled in browser
  • Uses AJAX for live result updates
  • No page reload required for results
  • Supports keyboard navigation (arrow keys, enter, escape)
  • Accessible with screen readers
  • Automatically includes product metafields in search
  • Respects product visibility settings
  • Honors draft/published status
Predictive Search functionality cannot be disabled via theme settings alone. If you need to remove it, you must edit the theme’s JavaScript and liquid files. Consider carefully as this is a key user experience feature.

​
Image Placeholders

For documentation purposes, the following images would enhance this section:
  1. Predictive search dropdown - Full view of search results dropdown
  2. Product results - Product cards in right column
  3. Collection cards - Collections with images and product counts
  4. Popular searches - Query suggestions and page links
  5. Mobile search view - Responsive mobile layout
  6. Empty state - No results found message