Skip to content
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.