Overlay Predictive Search

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Help Center > Overlays > Predictive Search

Overview

The Predictive Search is a dropdown panel that shows search results as the customer types in a search input. It displays products, articles, and pages matching the query. It uses role="dialog" for accessibility. When Theme settings > Search > Enable predictive search is on, any search input with data-predictive-input triggers it.

Where It Appears

Header search — Both inline search bar and search modal
Any search input with data-predictive-input attribute
Requires Theme settings > Enable predictive search to be on

Files

File	Purpose
`snippets/predictive-search.liquid`	Overlay, form, results container
`layout/theme.liquid`	Renders predictive search (typically once per page)
Predictive search JS (theme assets)	Fetches from predictive search API, renders results

Structure

Predictive Search (id="predictive-search", role="dialog", aria-label="Search results")
├── Overlay (data-predictive-search-overlay) — click to close
├── Panel
│   ├── Form (action="/search")
│   │   ├── Input (predictive input - may be separate from main header input)
│   │   └── Submit button
│   └── Results container (data-predictive-search-results)

Data Attributes

Attribute	Element	Purpose
`data-predictive-search`	Root	Identifies predictive search
`data-predictive-search-overlay`	Overlay	Click to close
`data-predictive-input`	Search input(s) in header	Binds input to predictive search
`data-predictive-search-results`	Results container	Where results are rendered

Behavior

Opening

Customer focuses or types in a search input with data-predictive-input
Predictive search panel becomes visible
Typing triggers API request to predictive search endpoint
Results populate data-predictive-search-results

Closing

Overlay click — closes
Escape key — closes
Clicking outside — typically closes
Submitting search — navigates to /search; panel closes

Search modal — Input inside modal has data-predictive-input; results appear in modal’s predictive container
Inline header search — Input in header has data-predictive-input; predictive search overlay may appear as dropdown below input

Theme Setting

Setting	Path	Effect
Enable predictive search	Theme settings > Search	When on, `data-predictive-input` is added to search inputs

API

Shopify provides a Predictive Search API (e.g. /search/suggest.json?q=...&resources[…])
Theme JS fetches and renders products, articles, pages, etc.

Accessibility

role="dialog", aria-label="Search results"
aria-hidden toggled based on visibility
Keyboard navigation within results
Escape to close

Multipurpose theme documentation