The Search section allows you to include a search bar on a page.
Add this section to
Customize section settings
Click the Search section to open its settings.
Include a heading
Add a Heading using the provided field. Leave the field blank to exclude a heading.
Add text
Include Text using the provided field. This is positioned below the Heading.
Placeholder text
Use the Placeholder text to control the semi-opaque text in the search bar (What are you looking for?).
Use refined search
Allow customers to scope their search By tag or By product type.
By tag
Using the By tag option for Refined search requires a specific tag setup in order to connect products with this feature. When adding tags to products (in the Products admin), add "searchfilter_" to the beginning of the tag for use in the search bar.
For example, if the tag "Waterproof" is used, the tag would be
searchfilter_Waterproof
By product type
The By product option is based on collections, so confirm you have collections configured in your Shopify admin to use this feature.
Activate live search
Provide customers with suggested products based on what they have already typed in the search box.
Enable
Activate Enable live search to activate the feature.
Include product image
Enable Show product images in live search results to display icon-sized versions of images for products that come up in live search results.
Blog posts and pages
Enable Show blog posts and pages in live search results to include results from blog posts and pages in live search results. These results will display in a separate "Pages & Posts" column to the right side of your live search results.
Add background image
Include a background image for the section.
Image
Click Select image to upload an image to give this feature a more customized look.
Images will be cropped to fit the section container
Position
The Position setting will help you select the focal point of the image you use if it's a different size than the feature has room for.
Increase contrast with an overlay
Configure the Overlay to make the text more legible. Enable Show overlay, then select colors for the Text color and Overlay color.
Use the provided slider to control the Opacity level.