Search

The theme ships two connected search experiences:

1. Header search overlay — the panel that opens when a shopper taps the search icon in the header. It can appear as a slide-in drawer or a dropdown, and it shows live (predictive) results as the shopper types, plus optional curated suggestions before they type.
2. Search results page — the dedicated /search page that lists all matches with the same filtering, sorting, and grid controls as your collection pages.

This guide documents every setting in both, with exact labels, options, and defaults.

Table of contents#

• Before you start
• How storefront search works
• Part 1 — Header search overlay (Search modal)
• Part 2 — Search results page

- General - Heading settings - Subheading settings - Search input - Results display - Per-type layout (Products / Collection / Article) - Filters & sorting - Desktop & mobile layout (spacing) - Colors

• How-to guides
• Best practices
• FAQ
• Troubleshooting

Before you start#

All settings below are edited in the theme editor: from your Shopify admin go to Online Store → Themes → Customize.

• To edit the header overlay: in the editor, open the Sections list and select Search modal (it is a global element available on every page).
• To edit the results page: open the template picker at the top of the editor and choose Search, then select the Search section.

Slide-in drawer:

Dropdown:

Search Page:

How storefront search works#

• Matching is title-based. A product, collection, article, or page appears in results when its title contains every word the shopper typed. This is intentionally stricter than Shopify's default behavior (which also matches descriptions, tags, vendor, and type) so that short queries return focused results.
• Partial words are supported. Typing part of a word matches the whole word — e.g. shir matches "shirt".
• Result types. Search can return Suggestions (popular queries), Products, Collections, Articles, and Pages.
• Live results. As a shopper types, predictive results appear instantly without reloading the page. Pressing Enter (or selecting "Search for…") opens the full results page.

Part 1 — Header search overlay (Search modal)#

Select the Search modal section in the editor.

Layout#

Default settings → Suggestions#

Content shown in the panel before the shopper types anything.

Products#

Collections#

Articles#

Colors (light mode) → Primary#

Colors (dark mode) → Primary#

Part 2 — Search results page#

Open the Search template, then select the Search section. Settings appear in the groups below, in editor order.

General#

Heading settings#

Subheading settings#

Search input#

Results display#

These control how result groups are arranged.

Per-type layout (Products / Collection / Article)#

These groups appear only when Combined view is off. Each type (Products, Collection, Article) has the same controls:

The Article group additionally has:

Filters & sorting#

These controls are shared with the collection product grid, so the styling you choose carries across both the search page and collection pages.

Desktop & mobile layout (spacing)#

Desktop layout

Mobile layout

Colors#

The results page has full Colors (light mode) and Colors (dark mode) groups. Within each, colors are organized by surface. Leave any blank to inherit the theme's colors.

Primary

Drawer & modal (shown when filtering is on)

Sort dropdown (shown when sorting is on)

Filter pill (shown when filtering is on)

Predictive search colors (shown when predictive suggestions are on)

How-to guides#

Show popular searches before anyone types#

1. In Shopify admin, create a menu (Online Store → Navigation) listing your top search terms as links.
2. In the theme editor, open Search modal → Suggestions and select that menu.
3. Optionally assign Products, Collections, and Articles for richer empty-state content. Save.

Switch the header search from a drawer to a dropdown#

1. Open the Search modal section.
2. Set Layout to Dropdown. Save.

Make the search results page faster on large catalogs#

1. Open the Search template → Search section.
2. Lower Products per page to about 16.
3. Set Loading type to Load more button or Pagination (AJAX). Save.

Combine all result types into one grid#

1. Open the Search section → Results display.
2. Turn on Combined view and set the desktop/tablet/mobile column counts. Save.

Match search styling to your brand#

1. Open the Search section → Colors (light mode) / Colors (dark mode).
2. Set the Primary, Drawer & modal, Sort dropdown, Filter pill, and Predictive search colors. Repeat any branding colors in the Search modal section so the header overlay matches. Save.

Best practices#

• Write clear product titles. Because search matches titles, the words shoppers type must appear in the title. Put the most important keywords (product type, key attribute) in the title.
• Curate the empty state. Assign Suggestions and a few Featured products so the panel is useful the moment it opens.
• Keep filter/sort styling consistent. Since these controls are shared with collections, style them once and verify both pages.
• Limit predictive results. 4–6 Max suggestions per resource keeps the live panel readable.

FAQ#

Where do I create the actual filters (price, size, color)? In Shopify admin under Settings → Search & Discovery → Filters. The theme controls only their placement and styling.

Why don't product descriptions or tags affect what shows up? This theme matches on titles for more focused results. Make sure relevant keywords appear in titles.

Does the Predictive search section need configuration? No. It has no settings and inherits styling from the Search modal and Search page.

Can I show blog articles in search? Yes — assign a blog under Search modal → Articles for the empty state, and articles also appear in results automatically when titles match.

Troubleshooting#

A product I expect isn't appearing in results. Confirm the search word(s) appear in the product title, and that the product is active and available on the Online Store sales channel.

The empty state (before typing) is blank. Assign content under Search modal → Suggestions / Products / Collections / Articles.

Filters don't appear on the results page. Make sure Enable filtering is on in the Search section, and that filters are configured in Settings → Search & Discovery.

Colors aren't changing. Empty color fields inherit the theme. Confirm you're editing the matching mode (light vs dark) and the correct surface group (Primary, Drawer & modal, etc.).