The Search Box UI Component is the main entry point for search where shoppers can type what they're looking for in your shop. It usually includes an input field, a search button, and a clear button.

interact

Can't quite capture the concept? Learn more about Search Box.

It can be combined with other X Components, such as Query Suggestions or Next Queries, to update the query according to shoppers’ intent or behaviour. For example, if a shopper selects a query suggestion, the query is instantly updated in the input field to the selected suggestion and the search is launched.

warning

To modify the query syntax using Query Suggestions or Next Queries, make sure that your current search service supports this type of feature.

Power-up behavior

Every component has a power-up behavior under the hood that is visible to the user but not glaringly obvious. For example, in Interface X Components for web, see what happens when:

• A query with results is submitted:

  • Results are displayed
  • Related tags are displayed
  • Next queries are displayed
  • The query can be displayed in the History Queries or Query Suggestions lists upon configuration

• A query with results is cleared using the clear button:

  • Any text in the search input is cleared
  • The results are cleared
  • The query suggestions are cleared
  • The next queries are not cleared
  • The related tags are cleared
  • The searched query is displayed in history queries

• Using instant search and a query is being typed that has results:

  • No results are displayed before debounce time
  • Results are displayed after debounce time
  • Next queries are displayed after debounce time
  • Related tags are displayed after debounce time

• Using instant search and modifying the initial query:

  • No results related to the second query are displayed before debounce time
  • Results related to the second query are displayed after debounce time
  • Displayed results are different from the previous ones

warning

Deactivating instant search means History Queries are not updated until the search button or Enter key is pressed, since the typed query is not submitted until one of these two actions is performed.

Tailor the web experience

• Configure the position and place it wherever you prefer.
• Customize content. Allow shoppers to search or clear their search using text or icons.
• Determine the number of characters shoppers can enter in the search input.
• Autofocus the input field when the search box is displayed.
• Auto-accept the query without the need of using a search button or the Enter key. Determine the debounce time to wait before instant search.
• Configure what will happen after the search is triggered; for example, display Related Tags or Next Queries.

interact

Want to know more? Learn how to configure your web experience.