Smart Search gives e-commerce teams full control over a powerful, AI-driven search experience. Combine keyword and vector search, smart suggestions and intelligent filters to help visitors find the right products faster, reduce zero-result searches and turn search traffic into conversions.

The recommended way to use Tweakwise is by using a combination of search with suggestions. In cases where that is not desired, the alternative is instant search: search results will be shown while you type.

Installation

Make sure you have followed the Installation guide.

Implementation

Once loaded, Tweakwise JS will start looking for an input and output, and start initializing the plugin.

Input

The input is the existing text field on the page that users use to search for products. By default Tweakwise JS will look for an HTML Input Element with an id of tweakwise-input. Such an element could look like this:

<input type="text" name="search" id="tweakwise-input" />

Please make sure that your search input has the tweakwise-input id.

Note: If your search input already has another id or you want to match on a different attribute you can change this in the settings of the Search & Merchandising Plugin.

Output

The output is an existing element on the page that contains all content that should be replaced with the search results when the user enters a search term. This can be any element, also containing existing content.

The search results container acts as a temporary overlay on top of the content of the page. After searching the user will be able to close the overlay and view the original page content.

By default Tweakwise JS will look for an HTML Element with an id tweakwise-output.
That element could look like this:

<div id="tweakwise-output">
  <!-- ... -->
</div>

Please make sure that the container you want to use has the tweakwise-output id.

Note: If your output already has another id or you want to match on a different attribute you can change this in the settings of the Search & Merchandising Plugin in Plugin Studio.

Good to know

Make sure auto-initialization is on in Plugin Studio.