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
- Search Activation
- Result Types
- Layout Structure
- Empty States
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
- Appears as dropdown below search input
- Two-column layout on desktop
- Stacked layout on mobile
- Smooth show/hide animations
- Click any result to navigate
- “View all results” button shows full search page
- Escape key or clicking outside closes dropdown
Locale Strings
Translatable strings fromlocales/en.default.json:
| Locale Key | Default Text | Usage |
|---|---|---|
search.popular_searches | Popular searches | Left column heading |
search.collections | Collections | Collections heading |
search.products | Products | Products heading |
search.no_results | Oh no! No results found. | Empty state |
search.no_results_with_terms | Oh no! No results found for "". | Empty state with term |
search.change_terms | Please try again with a different query. | Empty state suggestion |
search.view_results_with_terms | View results for "" | View all button |
Related Documentation
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
Image Placeholders
For documentation purposes, the following images would enhance this section:- Predictive search dropdown - Full view of search results dropdown
- Product results - Product cards in right column
- Collection cards - Collections with images and product counts
- Popular searches - Query suggestions and page links
- Mobile search view - Responsive mobile layout
- Empty state - No results found message