Search
Treble's search opens in a panel under the header, a side drawer, or full screen. Before customers type, it can show popular searches, recent searches, collections and products. As they type, predictive search suggests products, collections, pages and articles.
How to set it up
Step 1: Choose the style
- Under Overlays, click Search.
- Pick a Style (1): panel below the header, side drawer or full screen.
- Add Rolling suggestions (2): words separated by commas that roll in the empty field after "Search for".
Step 2: Fill the empty state
- Under Before typing, pick a Popular searches menu, show recent searches, and choose collections and products to suggest.
- Add a Promotion with an image, heading and link.
Step 3: Tune predictive search
- In Theme settings > Search, turn predictive search on or off, set the number of product suggestions, and show price and vendor.
Settings reference
Search
| Style | Options: Panel below the header, Side drawer, Full screen. |
|---|---|
| Placeholder | |
| Rolling suggestions | Words separated by commas. They roll in the empty field after "Search for". Leave blank to show the placeholder. |
| Before typing | |
| Popular searches | A menu of searches or pages. Uses Theme settings > Search when empty. |
| Popular searches heading | |
| Show recent searches | Kept on the customer's device. |
| Collections | Collections to show. |
| Collections heading | |
| Products | Products to show. |
| Or products from a collection | Used when no products are chosen above. |
| Products heading | |
| Show recently viewed products | Turns this on or off. |
| Promotion | |
| Image | An image from your files. |
| Heading | |
| Link label | |
| Link | Where the link goes. |
| Promotion color scheme | Colors from Theme settings > Colors. |
Search
| Enable predictive search | Turns this on or off. |
|---|---|
| Products in suggestions | Slider. |
| Show product price | Turns this on or off. |
| Show vendor | Turns this on or off. |
| Popular links | Shown when the search field is empty. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Recent searches are kept on the customer's device. With Theme settings > Privacy > Wait for consent, they are only kept after the visitor accepts cookies.
- The full search results page is a separate template: see Search results page.