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:
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:
|
*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:
|
2 | Currently showing for | You can preview your autosuggest template as a:
|
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:
|
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.
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.
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.
You have now successfully integrated and published autosuggest on your web store.
You can view performance reports of your autosuggest template within the Console.