Sign in

Search as you Type

Updated on October 2, 2024
Table Of Contents

With the Search as you Type functionality, you will be able to take full advantage of the AI capabilities and data aggregation we have to offer. From the moment you start typing a phrase in the search field, we shall start showing all of the products that corresponds to and is closest to the entered phrase.

Initial Setup #

The first step would be to enable the feature. In order to do so, please follow the steps below:

  1. Open your Releva Admin panel
  2. Expand the ‘Web Personalization’ menu
  3. Click on ‘Search as you Type’ submenu

By default, the funtionality will be disabled, so when you are ready, click on Enable. Doing so will expand the available options you can work this. We will cover each of them down below separately with more detail.

CSS Selector #

The first and most important step is to find and enter the CSS Selector for your Search field. This is a pretty straight forward and down below you will find the necessary steps:

  1. Open the ‘Inspect’ menu of your Browser
  2. Click on your search bar / button to initialize a search
  3. Click on this button in order to have full control and be able to point to a specific element of your website:
  4. Once that is selected, hover your mouse towards the search field of your website. Once you see that the whole inner section of your search field is highlighted, make a left click on it. Doing so will highlight the portion of the CSS responsible for Search on your website:
  5. After you have completed the previous step, it is time to copy the CSS selector itself. In order to do so right click on the highlighted part (it is in white when looking at the picture above) → select Copy → Copy Selector
  6. With the coppied CSS Selector, you are ready to go back to Releva’s Admin panel and paste it in the corresponding field:

Please note, the shown CSS Selector is only as an example and yours may differ.

Choosing a Layout #

This is what will dictate how the ‘Search as you Type’ functionality will look and operate in terms of UI and UX.

[Need confirmation if there will be a default Layout for every customer and if creating a new one needs to be paid for depending on their plan. This will dictate how this portion will be written].

Setting the number of Products #

You will have full control over how many products will be shown (that correspond to the search query). Here, we would advise you to show more products so there will be a higher chance the clients will find the product they are searching for.

Search filters #

If you wish to provide a bit more options to your users, you can also utilize the use of filters in the search pop-up. This will allow them to further filter the results so they can a lot more easily find the product they are searching for (especially if the same search phrase is present in a couple or more different categories).

Here, the filters come from your own product characteristics that are synced with Releva which means, the more details for a product you sync with us, the more options you will have to select here.

Adding a new Filter #

Adding a new filter is pretty straight forward – simply click on the large button ‘+ Add New Filter’ which on will add a blank filter:

After that, make sure to click on the field below ‘Values to Use’ and from the drop-down, select the product characteristic you would like to add as a Filter (e.g. Category, Vendor, Colour etc.)

Once ready, make sure to enter a Title on the left side. This is what the users will see on the website.

You can add as many Filters as you would like. Please note though, that the more filters you add, it may look a bit too busy so add in moderation.

Editing a Filter #

Editing an already existing filter is as easy as clicking on the corresponding fields and either choosing a new product characteristic or changing the Title the users will see on the website.

Deleting a Filter #

To delete a filter, all you need to do is click on the red X button the right side of each Filter:

Please note, there won’t be a confirmation modal for the deletion of the Filter. If you delete a Filter by mistake, make sure to reload the page.

Once you are done with the setup of the ‘Search as you Type’ functionality, make sure to click on the ‘Save’ button located at the bottom right corner. This will save all of the changes and setup you have done.

It is important to note that once you click to Save the setup, all of the functionality will be Live for all of your users to see and use.

If you have the option, we would recommend you do the setup initially either in a Dev / Local environment so you can fine-tune the experience and then move them to Live or do the setup in a time when there’s low traffic. Alternative to this would be to do the setup during off-hours for the website when the traffic is as low as possible.

As always, if you have any questions do not hesitate to write us at support@releva.ai.