> ## 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

> Real-time search autocomplete and suggestions that display as customers type in the header search bar.

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.

<Note>
  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.
</Note>

## 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

<Tabs>
  <Tab title="Search Activation">
    **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
  </Tab>

  <Tab title="Result Types">
    **Query Suggestions (Limit: 3)**

    * Popular search terms
    * Highlighted matching text
    * Links to full search results

    **Pages (Limit: 3)**

    * Informational pages
    * Policy pages
    * Custom content pages

    **Articles (Limit: 3)**

    * Blog posts
    * News articles
    * Content articles

    **Collections (Limit: 2)**

    * Featured image or placeholder
    * Collection title
    * Product count
    * Card-style layout

    **Products (Limit: 3)**

    * Full product cards
    * Product images
    * Title, price, variants
    * Same styling as product grids
  </Tab>

  <Tab title="Layout Structure">
    **Left Column:**

    * Popular searches section
    * Query suggestions
    * Pages and articles
    * Collections with images

    **Right Column:**

    * Products section
    * Full product cards
    * Responsive grid layout

    **Bottom Row:**

    * "View results for \[terms]" button
    * Only shows when results exist
    * Links to full search page
  </Tab>

  <Tab title="Empty States">
    When no results found:

    * Display: "Oh no! No results found for '\[search terms]'"
    * Suggestion: "Please try again with a different query"
    * No "View all results" button shown

    The section checks all resource types:

    * Products
    * Collections
    * Pages
    * Articles
    * Query suggestions
  </Tab>
</Tabs>

## Locale Strings

Translatable strings from `locales/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 "{{terms}}". | 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 "{{terms}}"             | View all button        |

## Related Documentation

<CardGroup cols={2}>
  <Card title="Main Search" icon="magnifying-glass" href="/themes/release/sections/main-search">
    Full search results page template
  </Card>

  <Card title="Header" icon="bars" href="/themes/release/sections/header">
    Header search bar configuration
  </Card>

  <Card title="Search Snippet" icon="code" href="/themes/release/snippets/search">
    Search input component
  </Card>

  <Card title="Shopify Search" icon="book" href="https://help.shopify.com/en/manual/online-store/storefront-search">
    Shopify search documentation
  </Card>
</CardGroup>

## 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

<Warning>
  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.
</Warning>

***

## 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