# 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  |