Autosuggest

Having product suggestions appear as shoppers type in a query isn't just about efficiency but also about enhancing your shopper's user experience.

The true value and impact on the user's search experience come from how autocomplete suggestions can assist and guide users toward better search queries.

As autosuggestions play a more active role in determining what shoppers will search for and how they navigate your product categories, it's important to set it up properly.

Shoppers expect the site 'to know better' and tend to trust your product suggestions.

All the more reason why setting up autosuggest correctly is very important. Our autosuggest wizard walks you through the process of setting up autosuggest on your webpage all by yourself in a couple of screens in just a few minutes.

To make search queries more intuitive and effective, We support these five autosuggest features:

Scope Suggestions (also known as Infields)
Top Suggestions
Keyword Suggestions
Popular Products
Promoted Suggestions

Get Started

While this is a standard feature with our Search solution, Autosuggest can also be deployed as a standalone feature. After you've integrated your product feed, you can configure Autosuggest in just a few easy steps.

To successfully set up autosuggest on your site, you need to sign in to the Console and provide us with product catalog and schema as a unified JSON file. This will help us index your catalog and suggest a suitable Autosuggest template that will provide your shoppers with the most relevant product recommendations.

Depending on the level of customization you want, you can go live with autosuggest in three ways:

Get Going Quick path:
Autosuggest Prerequisites > Select Template > Go Live
Here you select an autosuggest template based on the information you provided us and go live without any further customization.
Customize your Template path:
Autosuggest Prerequisites > Select Template > Customize Template > Go Live
Here you select and customize an autosuggest template based on the information you provided us. You can customize the layout and display attributes of your autosuggest template, customize the Popular Products and Suggestions widget.
Customize your Template path (Advanced):
Autosuggest Prerequisites > Select Template > Customize Template (Code Editor) > Go Live
Here you select and customize an autosuggest template based on the information you provided us. You can customize your autosuggest template using the in-built code editor.

Once you've uploaded your feed, click Manage and select Configure Autosuggest.

The Autosuggest Prerequisites screen appears, as below.

The interface elements within the Autosuggest Prerequisites labels are explained:

#	Label*	Description
1	Upload Product Catalog	Your catalog powers autosuggest and product discovery on your webpage. Ensure your catalog is uploaded and indexed before you proceed to set up autosuggest.
2	Map Attributes	Powers product suggestions on your webpage. These could be fields pre-defined by Unbxd and are important to help your shoppers browse, select, and buy the right product. Map essential fields from your catalog with Unbxd dimensions (also known as the Featured Fields) to enable our search engine leverage semantic relevance. In other words, mapping your fields to Unbxd dimensions will help us understand your catalog better.
3	Your Website	The URL of your web store. Often, this will be the home page of your web store.
4	Business Vertical	The type of commercial activity. You can choose from: Apparel Electronics Grocery Home Furniture Autoparts This will help us curate autosuggest templates most suitable for your business vertical.
5	Search box text	Choose the CSS Selector or the DOM element ID of your website's search bar. To locate the CSS Selector or the DOM element ID within Google Chrome: On your webpage, right-click the Search bar. Click Inspect. Within Elements, search for 'class' and 'id'. Copy and paste the 'class' and 'id' values.

*Required fields

Once you've uploaded and indexed your catalog, to continue setting up autosuggest using the Get Going Quick path:

In the Select Template screen, select the template that best suits your business needs. Know more about templates and how you can customize them.
Click Test & Go Live.

You have successfully set up a basic autosuggest template for your webpage.

To integrate and test your template before you can go live, refer to 'Go Live with Autosuggest'.

Manage Templates

After you've provided required details in the Autosuggest Prerequisites screen, you can select a template within the Select Template screen.

The interface elements in the Select Template are:

#	Label	Description
1	Templates based on	Depending on the business vertical you choose, we offer customizable autosuggest templates. Other business verticals available are: Apparel Electronics Grocery Home Furniture Autoparts
2	Currently showing for	You can preview your autosuggest template as a: Desktop: To view your selected template as on a desktop device. This is the default view. Mobile: To view your selected template as on a mobile device.
3	Recommended For You	The Recommended Templates section list templates that are curated, based on template designs that are popular and is tailor-made to enhance your shopper's user experience.
4	Autosuggest template view	You can filter autosuggest templates by: As you type: Indicates how product recommendations appear as your shopper types in a search query. Hover: Indicates how product recommendations appear without any input from the shopper.
5	Preview	The preview panel on the right will display the desktop version of your webpage in real-time as soon as your autosuggest template is set up, by default. To view your webpage as a mobile device, click Currently showing for and select Mobile.
6	Template Features	Displays salient features of a template. To view template features, hover over the required template.
7	Other Templates	The Other Templates section lists templates that are offer you curated variations of template designs for your business vertical.
8	Customize	Allows you to customize a selected template. To customize the template, click Customize.

Customize Template

While we recommend curated autosuggest templates, you can also customize the templates to suit your business needs.

The Customize Template screen allows you to edit the appearance, layout and interface elements of the autosuggest widget.

You can also customize a template using the Self-Serve wizard.

Code Editor

While you can customize a template using the Customize Template screen, you can also use the Code Editor using a Javascript or CSS file.

Use the code editor to modify your template only if you're an advanced user. Changes you make to your template using the Code Editor will override custom settings and are irreversible.

To customize your autosuggest template using the Code Editor:

On the Select Template screen, once you have selected your template, click Customize.
Click Advanced Code Editor.
To modify template settings, use the inbuilt code editor.
Click Save to proceed.
Click Go Live.

You have successfully customized your autosuggest template.

Your next step would be to integrate and test your template before you can go live.

Integrate

Once you have successfully integrated autosuggest, to take your autosuggest template online, you need to deploy the autosuggest JS code on your site.

To integrate and test autosuggest on your site:

To integrate the autosuggest template, copy and paste the custom JS code to the <head> tag of your HTML page.
To preview how your site will appear after autosuggest is deployed, enter the parameters of the test site. Copy and paste the web address to preview.
Once satisfied with the results, click Go Live.
Click Ok.

If your current site has a pre-existing autosuggest code, it is important that you remove them before testing our autosuggest solution.

You have now successfully integrated and published autosuggest on your web store.

You can view performance reports of your autosuggest template within the Console.