Shop
Search Result Hero
Search results hero with the matched search term and a result-count pill.
Overview
SearchResultHero is the hero block at the top of a search results page. It echoes the shopper's search term and surfaces the total result count as an AmountPill. Required props are searchTerm: string and amount: number.
Auto-import tag: <LSearchResultHero>.
Key Business & UX Benefits
- Echoing the search term confirms what the engine actually matched, cutting the "did it understand me?" doubt that pushes shoppers back to the search bar.
- The result-count pill sets correct expectations before scrolling, helping shoppers decide between refining the query or filtering down.
- A single hero block anchors the page with the active search context above the listing grid.
Usage
SearchResultHero Default
<SearchResultHero :search-term="query" :amount="results.length" />
Feature List
- searchTerm prop echoes the matched query so shoppers see what the engine actually searched for
- amount prop renders as an AmountPill next to the term so the result count reads at a glance
- Hero block sits above the results grid, anchoring the page with the search context
- Pairs with ProductListingGrid and FilterBar below to compose the full search experience
- Two required props keep wiring it up to a search store a one-line job
API Reference
| Prop | Default | Type |
|---|---|---|
amountrequired | number | |
searchTermrequired | string |