Search

A results page built on the same grid as your collection pages — the same product cards, badges, quick add and filters — plus the predictive flyout in the header. Nothing to configure to get a working search; everything to configure if you want to.

The results page

Search results render as a product grid, not a list of text snippets. Every card is the same one your collection pages use, so badges, sale price formats, the second-image hover and quick add all behave identically — set them once on a collection, and search matches.

Under Theme editor → Search results you get the grid controls you'd expect: products per page, columns on desktop and mobile, image shape, second image on hover, quick add style, and how more results load (pagination, a Load more button, or infinite scroll). Plus spacing and a Colors group.

Adding to the cart from the results

Two routes, and they're set in different places — worth knowing which is which, because a shopper who has typed a search knows what they're after and it's worth being direct with them.

• Quick add — the same four styles as the collection page, set here in the Search results section, independently of your collection pages.
• Variant picker and Add to cart on the price row — a permanently visible dropdown and Add button on the price line of every card. Set in Theme settings → Add to cart on product cards, where Show on search results is its per-surface toggle. Off by default; a Variant limit (default 12) decides when a product is too complex for a dropdown and links to the product page instead.

Both are documented in full on the Collection Page chapter, including the one combination that isn't offered — the price row won't render on a section whose quick add is the Add to cart button style, because both sit in the same place on the card.

Products first — but everything renders

Peregrine's own search asks Shopify for products. The search box, the header flyout and its "view all results" link all request products specifically, for two reasons:

• Filters and sort only describe a product result set. Shopify's faceted filters are built from product data — availability, price, options. Mix pages and blog posts into the results and the filters stop matching what's on screen.
• A grid of product cards is the useful answer to a product search. Someone typing "harness" wants to buy one.

But a shopper can reach a results URL without that restriction — a hand-typed address, or a link from elsewhere — and then Shopify returns blog posts and pages alongside products. Every result type renders properly: products as the usual product card, blog posts as the same article card your blog index uses, and pages as a simple title-and-excerpt card. Nothing is skipped, so the results count always matches what's on screen.

Filters

Theme settings → Filtering → Show filters on search results puts the same filter system your collection pages use onto search. It's a separate switch from the collection one, so you can run filters in one place and not the other.

Everything carries across: the three desktop layouts (sidebar, horizontal bar, drawer), collapsible groups, colour swatches, the "show more" cut-off, and the active-filter pills. Filtering a search keeps the search — the terms travel with the filter form, so narrowing by price doesn't quietly drop what the shopper typed.

Filters come from Shopify's free Search & Discovery app, same as on collections. With none configured, every store still gets Availability and Price by default. If the switch is on and no filters exist, the theme tells you so in the editor rather than rendering an empty column.

Sort

Search offers three orders: Relevance, Price, low to high and Price, high to low. That's Shopify's list, not a theme limitation — the alphabetical, best-selling and date orders you get on a collection don't exist for search results.

Relevance is the default, and it only exists on search. It's Shopify's own judgement of how well each product matches what was typed, so leave it alone unless you have a reason not to.

When there's nothing to show

Three different situations, three different answers — because "no results" for a misspelling and "no results" after four filters are not the same problem:

• No results for the search — the terms are named back, with two suggestions (check the spelling, try a more general word) and a link to browse all products.
• Results exist but the filters emptied them — the filters are the problem, so the active ones are listed with a Clear all button. The shopper doesn't lose their search.
• Someone lands on the search page with nothing typed — a prompt to search, not an empty results shell.

The predictive flyout

The header's search icon opens a flyout that suggests products as the shopper types, without a page load. Theme settings → Search → Enable predictive search flyout turns it off if you run an instant-search app — those fight the theme's own flyout for the input. With it off, the search icon becomes a plain link to this results page: no JavaScript, nothing to conflict with.

The flyout needs at least two characters and searches product titles, types, vendors and variants. Its "view all results" link hands over to the full results page with the same terms.

Works without JavaScript

The results page is a plain form and plain links. Searching, filtering, sorting and paging all work with scripting switched off — the JavaScript only upgrades filtering and Load more to update in place rather than reloading the page.