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.
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.
To access the design editor, right-click the Product Search widget, and click Edit Design.
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 Borders.
-
Rounded corners (in px). To change the border type, 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 tying 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 tpye, 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.
-
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.
For information about design options that are not specific to this widget (animation or spacing) see Widget Design.