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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/space/sections/content-and-media/search-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.