Skip to content
Search drawer
Section overview
The Search section provides a slide-out search drawer with predictive search functionality, allowing customers to quickly find products, articles, pages, and collections in your store.
Common use cases
- Adding a search function to your store's header
- Creating a prominent search experience for product-heavy stores
- Highlighting featured search terms or popular searches to guide customers
- Improving site navigation by making content easily discoverable
Usage tips
- Add search recommendations to guide customers toward popular items or categories
- Consider enabling the second column for desktop to show product results visually
- For mobile, the drawer appears from the bottom, making it easily accessible
- The search results are organized by type (products, pages, articles, collections) for clearer navigation
Section settings
| Setting | Description |
|---|---|
| Search recommendations | Add suggested search terms that appear before a user begins typing |
| Color scheme (top bar) | Choose the color scheme for the search drawer's top navigation bar |
| Border color (top bar) | Set the border color style for the top navigation area |
| Color scheme (main section) | Select the color scheme for the main search results area |
| Border color (main section) | Choose the border color style for the main search results |
| Enable second column | When enabled, displays product search results in a second column on desktop |
Block settings
Announcement
The Announcement block allows you to display promotional content or important messages at the top of the search drawer.
Block limit: 1
| Setting | Description |
|---|---|
| Content | Rich text content for your announcement |
| Color scheme | Choose the color scheme for the announcement area |
| Horizontal alignment | Set the text alignment to left, center, or right |