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.
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.
You can view our article here if you need more information regarding the CSS selector: https://help.datatrics.com/en/articles/3458000-the-css-selector.
The "Search" tab has quite a list of options. Let's break each one down.
Align results: Here, you can select the way you want your results to be aligned relative to the chosen element with the CSS selector.
Offset: In this field, you can set the number of pixels (0-100) you want between the selected elements and the results.
Accent color: The search recommendations have some elements 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 two 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 displayed while the search query is loading.
After setting everything up, you should have something that looks like this:
