Search Results¶
Renders the search results listing for a query, with an optional title, per-result content, pagination, and a no-results message. Best for: the dedicated search results page that the Search Input module sends visitors to.
📷 Hero image
Target file: assets/img/search-results/hero.webp
A search results page showing the results heading with the searched term and a count line, above a listing of results. Each result shows a linked title, a small category label, and a preview description, with previous/next pagination below the list. Dark text on a Light page background, with linked titles in the Primary color. Captured at desktop width.
At a glance¶
Search Results Listing
- What it does: reads the visitor's query from the URL and renders the matching results into a listing - each result showing a linked title, an optional category, and a preview description, with an optional featured thumbnail, a results title and count, and previous/next pagination.
- Best used for: the destination page where searches land, showing a clean listing with a heading, counts, and paging.
- Not the right fit if: you need the header trigger that starts the search (use Search Input).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- Create or open the page you want to use as your search results destination.
- Add the Search Results module to that page.
- Keep Show title on and set the Results title wording.
- Edit the Search results count, No results message, and pager labels under Default text.
- Point your Search Input module at this page (or use it as the global results page).
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
A results heading over a text-only list.
📷 Result
Target file: recipe-title-list-default.webp
The results heading with the searched term over a plain text-only list of results, each with a linked title and preview description and no thumbnails. Linked titles in the Primary color.
| Field | Set to |
|---|---|
| Title › Show title | on |
| Default text › Results title | Search results for "[[searched_term]]" |
Featured images per result (thumbnails toggle lives in theme search settings).
📷 Result
Target file: recipe-list-with-thumbnails.webp
The results list with a featured thumbnail image beside each result's title, category, and preview description. Dark text on a Light page background.
| Field | Set to |
|---|---|
| Default text › Featured image | your alt text |
| Thumbnails | enable in theme header search settings |
Previous/next navigation across multiple pages of results.
📷 Result
Target file: recipe-paginated-results.webp
A close crop at the bottom of the results list showing the Previous and Next pagination controls, with the Next control in the Primary color.
| Field | Set to |
|---|---|
| Default text › Previous page link text | Previous |
| Default text › Next page link text | Next |
| Default text › Navigation aria label | Paging navigation |
The message shown when a query returns nothing.
📷 Result
Target file: recipe-empty-state.webp
The results area showing only the friendly no-results message for a query that matched nothing, with no result rows below. Dark message text on a Light page background.
| Field | Set to |
|---|---|
| Default text › No results message | your copy (use [[search_term]]) |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Hide the results heading | Title › Show title off |
| Change the heading wording | Default text › Results title ([[searched_term]] token) |
| Reword the count line | Default text › Search results count ([[offset]] / [[limit]] / [[total]]) |
| Set the empty-search copy | Default text › No results message ([[search_term]] token) |
| Rename the pager links | Default text › Previous page link text / Next page link text |
| Set the pager aria label | Default text › Navigation aria label |
| Set thumbnail alt text | Default text › Featured image (thumbnails toggle in theme settings) |
Field reference¶
The editor is organized into a Content tab and a Style tab, grouped exactly as they appear in HubSpot. (11 fields total - expand each group as needed.)
Content tab¶
Title
| Field | Type | Default |
|---|---|---|
| Show title | boolean | on |
Default text
Editable strings for the listing and its accessibility layer:
| Field | Token(s) | Default |
|---|---|---|
| Results title | [[searched_term]] | Search results for "..." |
| Search results count | [[offset]] / [[limit]] / [[total]] | Displaying ... of ... results |
| Featured image (alt text) | - | Featured image |
| No results message | [[search_term]] | friendly empty-state copy |
| Previous / Next page link text | - | Previous / Next |
| Navigation aria label | - | Paging navigation |
Sample article title, category, and description strings render only in the editor preview so the layout is visible while building.
Style tab¶
Styling
No style-tab fields. Result-list styling (title tag/style, thumbnail and category visibility, pagination button style and icon) is driven by the theme header search settings, not this module.
Tips & gotchas¶
Pair with Search Input
This module renders results but does not start a search. Add the Search Input module in your header and point it at this page.
Thumbnails are a theme setting
Per-result featured images show only when enabled in your theme header search settings. Setting the Featured image alt text here does not turn thumbnails on by itself.
Live results are injected at runtime
HubSpot's search JS injects the real results on the live page. The sample rows you see in the editor are placeholders so you can style the layout while building.
Related modules¶
- Search Input: the header trigger that sends visitors here.
- Blog Listing: a listing layout for blog content.
- Blog Pagination: paging controls for blog listings.
- Navigation: the header menu.