The Product Search widget allows shoppers to search for products in your store. As the shopper types in the search bar, results populate based on products that match the search criteria. After selecting an option, the shopper is taken directly to that products page.
To add the Product Search widget:
In the side panel, click Widget.
In the Store section, click and drag Product Search onto the desired place on the page.
Content Editor
To access the content editor, right-click the widget, and click Edit Content
In the Placeholder text field, you can enter the text that will appear in the Product Search widget. This text will disappear when the user begins to type in the widget.
Design Editor
To access the design editor, right-click the Product Search widget, and click Edit Design.
Style
Input Field
The Input field is the area of the Product Search widget where the shopper types their search query. You can edit the following design settings for the input field:
Dimensions:
Height (in px)
Background and Layout (These settings apply to the input field before the shopper begins typing their query):
Background color
Border thickness (in px)
To change the border type, click the Gear icon next to Border.
Rounded corners (in px)
To change which corners are rounded, click the Gear icon next to Rounded corners.
Whether or not there is a shadow, and if yes, the color, type and position of the shadow.
Focus (These settings apply to the input field after the shopper starts typing their query):
Background color
Border thickness (in px)
Whether or not there is a shadow, and if yes, the color, type and position of the shadow.
Search results
The Search results is the area where results populate beneath the input field. You can edit the following design settings for the search results:
Dimensions:
Max height (in px)
Background and Layout (These settings apply to search results before the shopper hovers over a specific result):
Color
Border
To change the border type, click the Gear icon next to Border.
Rounded corners
To change which corners are rounded, click the Gear icon next to Rounded corners.
Whether or not there is a shadow, and if yes, the color, type and position of the shadow.
Hover (These settings apply when the shopper is hovering over a specific search result):
Background color
Whether or not there is a shadow, and if yes, the color, type and position of the shadow.
Text
For the text inside the Input field and Search results, you can edit the following design settings:
Font
Font size
Font color
Format (bold, italic, underline)
Alignment
Direction
When text is hovered over in search results, you can edit both the color and format.