# Search banner

### Section overview

The Banner Search section displays a visually appealing banner with an integrated search field, allowing users to search your store from a prominent position on your page.

#### Common use cases

* Creating a visually striking search page header
* Highlighting search functionality on collection or category pages
* Adding a prominent search feature to landing pages
* Providing visual context to search results pages

#### Usage tips

* Use high-quality images that contrast well with the text overlay to ensure readability
* Keep the banner height appropriate for the page context - larger for hero sections, smaller for supporting content
* Consider enabling the gradient overlay to improve text visibility over busy background images
* For mobile users, use a dedicated mobile image with simpler composition to maintain usability on smaller screens

### Section settings

| Setting                   | Description                                                         |
| ------------------------- | ------------------------------------------------------------------- |
| Y spacing                 | Controls the vertical height of the banner                          |
| Image background desktop  | Background image displayed on desktop devices                       |
| Image background mobile   | Background image displayed on mobile devices                        |
| Video background          | Background video to display behind the search field                 |
| Show entire image         | Shows the entire image instead of cropping to fill the container    |
| Show video on mobile      | Determines if video background is visible on mobile devices         |
| Color scheme              | Sets the color scheme for the section background                    |
| Text color                | Sets the color of text elements                                     |
| Border color              | Sets the color of any borders                                       |
| Button color              | Sets the color style of the search button                           |
| Enable gradient           | Adds a gradient overlay to improve text visibility                  |
| Enable background overlay | Adds a background behind the text for improved readability          |
| Border position           | Sets the position of borders around the section                     |
| Y alignment               | Controls vertical alignment of content within the banner            |
| X alignment               | Controls horizontal alignment of content within the banner          |
| Enable header overlap     | Allows the header to overlap with the banner                        |
| Enable margin             | Adds horizontal margin to the section content                       |
| Enable max width          | Limits the width of the content for improved readability            |
| Visibility                | Controls whether the section is visible on mobile, desktop, or both |
| Enable search             | Toggles the display of the search field                             |

### Block settings

This section does not contain any blocks.