Include a search bar as a standalone homepage section by using the Search section.
Use the theme editor to customize the section color, add your messaging, enable the live search option, set search limitations, add quick links, add a background image, and include an overlay for the Search section.
Add Search to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Search
- Click the section, then Add
- Save
Customize the section color
Choose an optional Section background color by selecting the rounded-rectangle swatch.
Add your messaging
Add a Heading, Text, and Placeholder text for the Search homepage section using the text fields.
Enable live search option
To provide customers with search suggestions the moment they start typing, click Enable live search.
Search limitation options
Expand or limit the search results gathered by selecting an option in the Display dropdown. The four options are:
- Products only
- Products and pages
- Products and posts
- Products, posts, and pages
Add quick links
Include links for common search subjects by clicking Select menu under Quick links.
Add a background image
Include an optional Image by clicking Select image. The focal point of the image can be adjusted by selecting an option in the Position dropdown. There are nine options:
- Top left
- Top center
- Top right
- Center left
- Center
- Center right
- Bottom left
- Bottom center
- Bottom right
Include an overlay
Increase the contrast between text and image by configuring the Text color and Overlay color. The level of transparency for the Overlay can be adjusted using the Opacity slider.