Skip to content

Predictive search

Where you can add it

Not in the Add section list: it comes with its template or section group.

Up to 6 blocks.

SettingTypeDefaultOptions and range
Layout
Layout

The sheet unfolds out of the header across the page width. The drawer slides in from the side. On phones both open as a sheet.

SelectSheet from the header
  • Sheet from the header
  • Side drawer
Position

End is the side the search icon is on: right in left-to-right languages, left in right-to-left languages. Phones always use the sheet.

Shown when Layout is Side drawer.

SelectEnd
  • End
  • Start
Width

Phones always use the sheet.

Shown when Layout is Side drawer.

SelectDefault
  • Narrow
  • Default
  • Wide
Color schemeColor schemeScheme 1
Page overlay opacityRange30 %0–80 %, step 5
Opening motion

How search opens. Full unfolds the sheet out of the header and brings the blocks in one by one; Calm fades it in. Off when Animation is off in Theme settings > Motion, and for customers who prefer reduced motion.

SelectFull
  • Full
  • Calm
  • None
Show the logo

The header’s logo, at the start of the search row.

Shown when Layout is Sheet from the header.

CheckboxOn
Show “Close” label

“Close” and the Esc key on desktop. Off: a round close button.

Shown when Layout is Sheet from the header.

CheckboxOn
Search field
Placeholder textTextSearch products, pages, or articles
Show field label

The label is always available to screen readers.

CheckboxOff
Keyboard shortcutSelectSlash (/) and Command/Ctrl + K
  • Slash (/) and Command/Ctrl + K
  • Slash (/)
  • Command/Ctrl + K
  • None
Characters before suggestions appear

Suggestions start after this many characters. Hebrew matching begins at three characters on most stores.

Range21–3, step 1
Show product type filter

Adds a product type dropdown next to the field, using the product types in your catalog.

CheckboxOff
Results
Show productsCheckboxOn
Products to show

Shown when Show products is on.

Range42–10, step 1
Show collections

Available when the customer’s language is supported by Shopify’s predictive search. Hebrew and Arabic stores show products, pages, and blog posts.

CheckboxOn
Collections to show

Shown when Show collections is on.

Range31–5, step 1
Show pagesCheckboxOn
Pages to show

Shown when Show pages is on.

Range31–5, step 1
Show blog postsCheckboxOn
Blog posts to show

Shown when Show blog posts is on.

Range31–5, step 1
Show search suggestions

Query suggestions are available only for stores whose primary language and customer language are English.

CheckboxOn
Suggestions to show

Shown when Show search suggestions is on.

Range31–5, step 1
Highlight matching textCheckboxOn
Show “View all results”CheckboxOn
Product cards
Columns on desktop

Shown when Show products is on and Layout is Sheet from the header.

Range42–5, step 1
Columns on tablet

Shown when Show products is on and Layout is Sheet from the header.

Select3
  • 2
  • 3
Results in the drawer and on phones

The sheet shows cards from 750 px wide; the drawer and every phone show this layout.

Shown when Show products is on.

SelectList
  • List
  • Two-column grid
Image ratio

Shown when Show products is on.

SelectPortrait
  • Adapt to image
  • Square
  • Portrait
  • Landscape
Show add to cart

Product cards show quick add, as in collections; adding a product closes search and opens the cart. Rows in the list layout link to the product.

Shown when Show products is on.

CheckboxOn
Show vendor

Shown when Show products is on.

CheckboxOff
Show badges

Shown when Show products is on.

CheckboxOn