The Search widget allows you to add an input field on your website that enables your customers to search for specific information or content within your website. The users enter search queries, and the widget processes the input and returns relevant results based on the search algorithm implemented.
Adding a Search Widget
To add a Search widget:
- Go to the Visual Editor from Channels on the Dashboard Left Panel.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the Navigation grouping and select the Search widget.
- Drag and drop the Search widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Search Widget
Once you have added the Search widget, click the widget to activate the Property Panel where you can customize its Styles, Content, and Settings according to your preferences.
To modify the Search widget:
- Go to Styles to modify the widget styling features (see Global Styles).
- Go to Settings to modify the widget, specifically:
- Turn on/off Show Suggestion to activate/deactivate the list of suggestions displayed to the customers according to the search query.
- Indicate the type of data the search directory provides during the search query: Ecommerce products or Collections.
- Expand Visibility and modify the visibility of the widget on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).
Modifying the Search Widget Design
You can modify the design of the search field displayed on your website according to your preferences.
To set the widget design:
- Go to Styles on the Property Panel.
- Select one of the following options from the Mode drop-down list:
- Collapse - the Search widget is displayed compactly.
- Expand - the Search widget is displayed as an expanded input field.
Loading - the Search widget is displayed as an expanded input field with a loading icon.
Modifying the Search Widget States
You can set the state of the Search widget to define how the search field is displayed on your website based on user actions.
The following states are available:
- Suggestions - refers to a specific state of a Search widget when a user performs a search and the matching results are displayed.
Empty result - refers to a specific state of a Search widget when a user performs a search, but no matching results are displayed on the provided query. In this state, you can add any widget in the corresponding container and modify the styling and design according to your preferences (see Essential Widgets > Container). To do so, press Ctrl and drag and drop the widget in the container.
Modifying the Search Widget Properties
Once you have set the state of the Search widget, you can modify the corresponding properties inside the Search widget according to the selected state. This allows you to define the appearance and functionality of the widget on your website.
The following properties are available:
- Suggestion List - allows you to add and modify the drop-down list of suggestions according to the customer’s search query.
- Suggestion Item - allows you to add the list of potential search items or queries displayed when users type in the search input field. These suggestions aim to assist users by providing predicted items related to their search query.
- Title - allows you to modify the style (see Global Styles), visibility, and brief descriptive text to generate the empty result field of the search query, e.g. "No Results Found", "Sorry, we couldn't find any results", etc.
- Label - allows you to modify the brief and descriptive text placed near or within the search input field to guide users on what they can search for, e.g. "Search," "Find," "Type here to search," or "Enter keywords”, etc. It helps users understand the context and prompts them to input relevant keywords or phrases to initiate a search.
- Icon allows you to add an icon that best suits your website interface. The icon serves as a recognizable symbol that users can identify and perform searches.
The modification of these properties enables you to create a better user experience on your website and assist users in finding relevant information more efficiently.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.