Search results
An editorial search page with native product, article, and page results, a desktop filter rail, mobile filter drawer, icon-only filter and sort controls, and pagination.
- Merchant-addable
- No — template section
- Settings
- 13
- Block types
- —
- File
sections/search.liquid
Used by default on: Search
Screenshots pending
Captures for Search results at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Automatic on the search template.
Setting it up
- Edit Eyebrow and Heading to introduce the search page. A blank heading uses the translated Search title.
- Edit Suggested search terms using comma-separated phrases. The default suggestions are hydration serum, hydration cream, dry skin, and barrier support; each starts a fresh search across products, articles, and pages. Suggestions show a subtle shine sweep on hover and keyboard focus using the global interface animation speed; No motion and reduced motion disable the sweep.
- Optionally select a Suggested links menu to override the text suggestions with top-level links to collections or custom search URLs. The terms field is hidden while a menu is selected. Clear the terms and menu to hide the suggestions row.
- Choose Results per page and Number of columns on desktop. The defaults are 16 results and four desktop columns; mobile uses two.
- Choose Heading size: Small, Medium, or Large (default). Search uses the shared editorial heading scale, reducing to 20px, 24px, and 28px on mobile.
- Set Mobile heading alignment to Left or Center for the heading and eyebrow below 750px. Center is the default; desktop layout and search controls keep their own alignment.
- Use Show quick add and Show quick view to control product actions. Product card imagery, alignment, vendor, variants, and prices follow the global product card settings.
- Configure filters in Shopify Search and Discovery. Filters use a sidebar on desktop and an icon-only drawer control on mobile, with native forms available without JavaScript. Active choices remain checked in the filters. A compact Clear filters link appears beside the filter heading on desktop and inside the mobile drawer only while filters are active; it preserves the query, result type, and sort order. There is no applied-filters bar or bottom clear action. The mobile drawer keeps its Apply button.
- Set Color and Section padding. Search defaults to Scheme 7 (stored as scheme-6 in the supplied palette). Global fonts, corner style, custom control radius, link and image hover effects, motion transition, and interface animation speed apply. Search links have no underline at rest.
Where the content comes from
Section settings own the eyebrow, heading, suggested search terms, and optional menu selection. Shopify navigation owns suggested link titles and destinations. Shopify search owns results, filters, sorting, and pagination; native product, article, and page data own result content. No metafields are required.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Search content
Optional. Select a menu of search suggestions or collection links. Only top-level links appear.
Separate suggestions with commas. Each phrase starts a fresh search. A selected suggestions menu overrides these terms.
Layout
Product cards
Adds single-variant products to the cart and opens product options when the product offers choices.
Lets shoppers review product details without leaving search results.