A great moment to recommend products to your visitors is when they are using your search bar. They are actively looking for something and you can inspire them to buy the products you want.

  1. In order to set this up, create a touchpoint for the website and select search recommendations.

2. In the content section you can either have it show all content or filter content. Static and select content are not available because a search bar has to be dynamic.

3. For this touchpoint the appearance tab is split into 2. 

If you need more information regarding the CSS selector, you can view our article here: https://help.datatrics.com/en/articles/3458000-the-css-selector.

The "Search" tab has quite a list of options. Lets break each one down

  • Align results: Here you can select the way you want your results to be aligned relative to the element selected with the CSS selector.
  • Offset: In this field you can set the amount of pixels (0-100) you want between the selected elements and the results.
  • Accent color: The search recommendations have some elements in them that require a color to be chosen. We recommend setting this color up to match the color of your website.
  • Empty state: Within this option there are 2 fields. The first field is the text displayed when there are no results for the search query. The second field is the text displayed when no search query has been filled in.
  • Results: The text filled in here is the text that will be shown above the search recommendations.
  • Loading: This is the text that will be displayed while the search query is loading. 

After setting everything up, you should have something that looks like this:

Did this answer your question?