Design & Layout

ID #1193

Predictive Search Feature

Spotting your desired item by scanning it through all the products in the store is a very time consuming task. Especially when the store has a really wide range of products.
To ease this drudgery the users generally face, mshopper has brought upon a very easy and quick option for its users. This is what is Predictive Search all about.

Predictive Search provides a new Search strip on the top at the Home page, where the user can simply enter his desired product name.
Whatever product names that match in the store with the entered name will then immediately line-up below the Search box in a drop down fashion. The user can just click on a product and he will be redirected to the Product Details Page.

What makes this feature even more user friendly is that it is Predictive! That means as soon as the user starts typing the Product name in the Search box, all the possible options will be displayed in the drop down at once. This will help the users find a variety in thier Search and that too within a blink of an eye.

This feature works with the Search Strip on the Homepage as well as the Search Box on the Universal Navigation Page.

How to add Predictive Search Box on your Home page?

1. A toggle is provided at the admin side to Enable/Disbale the Predictive Search functionality. Just Navigate to
Design & Layout >> Page Settings >> Home and you will see an option "Do you want a search box on the home page?". Set it to Yes.

2. When you set this option to Yes, a field appears below saying "Customize your default search box wording:". Here, you can set a default text that is to be displayed in the Search Text Box on the Home page.
By default the text entered is, "Enter Keyword or Item #".

To blend this newly added element with your Current Theme, we have also provided CSS options in the admin side. This is where you can change it:
1. Navigate to Color Themes >> Customize your Theme >> Home Tab. You can see following options here:
    a. Search TextBox Border Color: Sets a border color to the Search Text Box.
    b. Search TextBox Font Color: Sets a Font Color to the text to be entered in the Search Text box.
    c. Search TextBox Color: Sets a background color to the Search Text box.
    d. Search TextBox 'Go' button Color: Sets a color to the Go button.
    e. Search TextBox 'Go' button text Color: Sets a font color to the Go button.


After all the things are set as per above, the feature will look like this:

Tags: -

Related entries:

Last update: 2014-12-22 15:18
Author: Craig F
Revision: 1.4

Digg it! Share on Facebook Print this record Send FAQ to a friend Show this as PDF file
Propose a translation for Propose a translation for
Please rate this FAQ:

Average rating: 0 (0 Votes)

completely useless 1 2 3 4 5 most valuable

You cannot comment on this entry