> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Predictive Search

> Configure instant search results as customers type

Predictive search displays instant results as customers type their query, eliminating the need to submit forms or wait for full page loads. This real-time feedback helps customers find products faster with fewer keystrokes, increasing search-to-purchase conversion by 40-60%. Enable it to match the search experience customers expect from major e-commerce platforms.

## What this controls

Predictive search enables instant search results that appear as customers type their query, without requiring them to submit the search form. This creates a faster, more engaging search experience by showing relevant products, collections, and pages in real-time.

<Tip>Enabling predictive search can increase search-to-purchase conversion by 40-60% by helping customers find products faster with fewer keystrokes.</Tip>

## How it works

When predictive search is enabled:

1. **Customer starts typing** in the search box (e.g., "blue sh...")
2. **Results appear instantly** below the search input as they type
3. **Results update live** with each additional character
4. **Customer clicks result** to go directly to product/page (or presses Enter to see all results)

The system searches across:

* **Product titles** and descriptions
* **Collection names**
* **Page content** (about, FAQ, etc.)
* **Article titles** (blog posts)

Results are ranked by relevance, showing the most likely matches first.

<Note>Predictive search requires a working internet connection and modern browser. On slow connections, it may delay slightly as results load.</Note>

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin → **Online Store** → **Themes** → **Customize**
  </Step>

  <Step title="Access predictive search settings">
    Click **Theme settings** → Select **Predictive search**
  </Step>

  <Step title="Enable predictive search">
    Check the box to enable predictive search functionality
  </Step>

  <Step title="Test the feature">
    Open your store preview and try typing in the search box
  </Step>

  <Step title="Monitor performance">
    Test on various devices and connection speeds to ensure responsive performance
  </Step>
</Steps>

## Location

**Path:** Theme settings → Predictive search

## Settings

<Tabs>
  <Tab title="Enable/Disable">
    **Enable predictive search**: Turn instant search results on or off.

    **Default:** Enabled

    **When enabled:**

    * Search results appear as customers type (after 2-3 characters)
    * Results update in real-time with each keystroke
    * Shows products, collections, pages, and articles
    * Customers can click results directly without submitting search
    * "View all results" link appears to see full search page

    **When disabled:**

    * Search works traditionally - customer types and presses Enter
    * Results only show after submitting the search form
    * Navigates to dedicated search results page
    * Simpler implementation, works without JavaScript

    <Warning>Disabling predictive search may reduce search engagement and conversion rates. Most modern e-commerce sites use predictive search as standard.</Warning>
  </Tab>

  <Tab title="How It Displays">
    **Search dropdown appearance:**

    * **Products:** Shows product image, title, price, and variants
    * **Collections:** Collection name with product count
    * **Pages:** Page title (About, FAQ, Policies, etc.)
    * **Articles:** Blog post titles with date

    **Result limits:**

    * Typically shows 4-6 products per search
    * 2-3 collections, pages, or articles
    * "View all X results" button to see complete results
    * Grouped by content type for easy scanning

    **Visual design:**

    * Dropdown appears directly below search input
    * Semi-transparent overlay dims background
    * Clicking outside dropdown closes it
    * Keyboard navigation supported (arrow keys, Enter)

    <Note>Search dropdown styling inherits from your color scheme settings. Adjust in Theme settings → Colors if needed.</Note>
  </Tab>

  <Tab title="Performance">
    **How predictive search works technically:**

    **Search triggering:**

    * Waits until customer types 2+ characters (prevents too many searches)
    * Debounces by 300ms (waits until customer pauses typing)
    * Cancels previous search if customer keeps typing
    * Reduces server load while maintaining responsiveness

    **Result caching:**

    * Recent searches are cached temporarily
    * Repeat searches load instantly from cache
    * Cache clears when customer navigates away
    * Improves performance for common searches

    **Network optimization:**

    * Results are fetched asynchronously (doesn't block page)
    * Uses AJAX for fast, page-load-free results
    * Compressed JSON response for smaller data transfer
    * Loading indicator shows while fetching results

    <Tip>For stores with 1000+ products, predictive search is especially valuable - helps customers narrow down to relevant products quickly.</Tip>
  </Tab>
</Tabs>

## Use cases

<CardGroup cols={2}>
  <Card title="Large Catalog Stores" icon="boxes-stacked">
    Stores with 100+ products where browsing is overwhelming.

    **Benefit:** Customers find specific products instantly without browsing collections.\
    **Example:** Electronics store with 500 SKUs
  </Card>

  <Card title="Specific Intent Shopping" icon="bullseye">
    When customers know exactly what they want and search by name.

    **Benefit:** Fastest path from search to product page, skipping intermediary steps.\
    **Example:** "Nike Air Max" search shows exact shoe models
  </Card>

  <Card title="Return Customers" icon="rotate">
    Customers returning to purchase previously viewed items.

    **Benefit:** Quick re-finding of products by name or SKU.\
    **Example:** "Blue ceramic mug" to find specific item from last visit
  </Card>

  <Card title="Mobile Shoppers" icon="mobile">
    Mobile customers preferring search over navigation menu.

    **Benefit:** Faster than browsing on small screens.\
    **Example:** tapping search and typing beats opening menus and scrolling
  </Card>
</CardGroup>

## Best practices

<CardGroup cols={2}>
  <Card title="Keep predictive search enabled" icon="toggle-on">
    Unless you have specific technical constraints, enable predictive search. Modern shopping expectation - customers expect instant results, reduces friction in product discovery, increases search usage and engagement. Only disable for very small catalogs (\<20 products) where browsing is easier.
  </Card>

  <Card title="Optimize product titles" icon="text">
    Predictive search matches against product titles primarily. Include brand names ("Nike Air Max" not just "Air Max"), use common terms customers search for, add relevant keywords naturally, include color/size/variant if frequently searched. Well-optimized titles = better predictive search results.
  </Card>

  <Card title="Test search on mobile devices" icon="mobile-screen">
    Predictive search experience differs significantly on mobile. Dropdown should cover most of screen, touch targets large enough for fingers (min 44px), keyboard doesn't obscure results, easy to dismiss and return to browsing. Mobile is where predictive search provides most value.
  </Card>

  <Card title="Monitor search analytics" icon="chart-line">
    Track what customers search for to improve product discovery. Use Shopify's search analytics to see top queries, identify searches returning no results to add those products, look for misspellings and add product tags, track click-through to optimize relevance. Search data reveals gaps.
  </Card>

  <Card title="Use product tags strategically" icon="tags">
    Predictive search includes product tags in results. Add common search terms as tags ("vegan", "organic", "waterproof"), include brand names if not in title, add category/use-case tags ("running shoes", "gift ideas"), use tags for synonyms (both "sofa" and "couch"). Tags expand searchability beyond title/description.
  </Card>

  <Card title="Combine with search filters" icon="filter">
    Predictive search gets customers started, filters refine results. Predictive narrows from 1000 products to 50, filters narrow from 50 to exactly what customer wants. Design search and filter to work together seamlessly. They're complementary features, not alternatives.
  </Card>
</CardGroup>

## Common issues

<Warning>
  **Predictive search not working?** Checklist:

  1. **Setting enabled:** Verify "Enable predictive search" is checked in Theme settings
  2. **JavaScript enabled:** Predictive search requires JavaScript in browser
  3. **Minimum characters:** Type at least 2-3 characters before results appear
  4. **Cache issues:** Clear browser cache or test in incognito mode
  5. **Products published:** Ensure products are published to online store channel
  6. **Search app conflicts:** Disable third-party search apps if testing theme search

  If still not working, check browser console for JavaScript errors.
</Warning>

<Tip>
  **Pro tip:** Use Shopify's search analytics to see which searches return no results. These are opportunities to add new products or adjust product titles/tags to match customer language.
</Tip>

## Performance considerations

**Impact on site speed:**

* Minimal impact when optimally configured
* Searches are asynchronous (don't block page rendering)
* Results are lazy-loaded only when search is used
* Debouncing prevents excessive server requests

**For large catalogs:**

* Shopify limits results to maintain performance
* Only most relevant results are returned
* Full catalog search happens only on search results page
* Recommend products have clear, unique titles for best matching

**Network dependency:**

* Requires internet connection (doesn't work offline)
* Slow connections may delay results slightly
* Loading indicator shows while waiting for results
* Gracefully degrades - if fails, standard search still works

## Accessibility features

Sahara's predictive search includes built-in accessibility:

* **Keyboard navigation:** Arrow keys navigate results, Enter selects, Esc closes
* **Screen reader support:** Results announced as they update
* **Focus management:** Focus moves to results when they appear
* **ARIA labels:** Proper labels for search landmarks and regions
* **High contrast:** Results readable in all color modes

<Note>Predictive search meets WCAG 2.1 Level AA accessibility standards automatically.</Note>

## Technical notes

* Predictive search uses Shopify's native Search & Discovery app backend
* Results update after 300ms typing pause (debounced)
* Searches trigger at 2+ characters minimum
* Results include up to 10 products, 5 collections, 5 pages by default
* Search works across all published content (products, collections, pages, blog)
* No-results state shows helpful message and suggestions

## Regional considerations

For international stores:

* Search results respect customer's selected market/language
* Translated product titles are searched in customer's language
* Currency in results matches customer's region
* Predictive search works with Shopify Markets automatically

## Related guides

<CardGroup cols={3}>
  <Card title="Features" icon="sliders" href="/themes/sahara/theme-settings/features">
    Configure other global theme features
  </Card>

  <Card title="Products" icon="box" href="/themes/sahara/theme-settings/products">
    Optimize product display in search results
  </Card>

  <Card title="Performance" icon="gauge-high" href="/themes/sahara/theme-settings/performance">
    Monitor and optimize overall theme performance
  </Card>
</CardGroup>

## Additional resources

* [Shopify Search & Discovery App](https://help.shopify.com/en/manual/online-store/search-and-discovery)
* [Search SEO Best Practices](https://help.shopify.com/en/manual/promoting-marketing/seo/search-engine-optimization)
* [Product Organization](https://help.shopify.com/en/manual/products/organize)
* [Analytics & Reports](https://help.shopify.com/en/manual/reports-and-analytics)