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

  1. Edit Eyebrow and Heading to introduce the search page. A blank heading uses the translated Search title.
  2. 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.
  3. 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.
  4. Choose Results per page and Number of columns on desktop. The defaults are 16 results and four desktop columns; mobile uses two.
  5. Choose Heading size: Small, Medium, or Large (default). Search uses the shared editorial heading scale, reducing to 20px, 24px, and 28px on mobile.
  6. 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.
  7. 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.
  8. 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.
  9. 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

EyebrowText
ID
eyebrow
Default
The skincare edit
HeadingText
ID
heading
Default
Find your daily ritual.
Heading sizeDropdown
ID
heading_size
Default
Large
  • Smallsmall
  • Mediummedium
  • Largelarge
Suggested links menuMenu

Optional. Select a menu of search suggestions or collection links. Only top-level links appear.

ID
suggested_links
Suggested search termsText

Separate suggestions with commas. Each phrase starts a fresh search. A selected suggestions menu overrides these terms.

ID
suggested_terms
Default
hydration serum, hydration cream, dry skin, barrier support
Shown when
suggested_links is empty
Results per pageSlider
ID
results_per_page
Default
16
Range
8 to 40, in steps of 4

Layout

Number of columns on desktopDropdown
ID
columns_desktop
Default
4 columns
  • 2 columns2
  • 3 columns3
  • 4 columns4
Mobile heading alignmentDropdown
ID
mobile_header_alignment
Default
Center
  • Leftleft
  • Centercenter

Product cards

Show quick addCheckbox

Adds single-variant products to the cart and opens product options when the product offers choices.

ID
show_quick_add
Default
On
Show quick viewCheckbox

Lets shoppers review product details without leaving search results.

ID
enable_quick_view
Default
On

Color

Color schemeColor scheme
ID
color_scheme
Default
scheme-6

Section padding

Padding topSlider
ID
padding_top
Default
40
Range
0 to 100, in steps of 4
Padding bottomSlider
ID
padding_bottom
Default
52
Range
0 to 100, in steps of 4