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.