Instant search widget

On this page

• What is an instant search widget?
• Enable your instant search widget
• Customize the layout of your search dropdown menu
• Customize the components of your search dropdown menu
• Tutorial video

What is an instant search widget?

By default, a Shopify search bar does not have the autocomplete search feature and it comes with many limitations. By enabling our Instant search widget, your original search bar will be integrated with a number of other advanced search features without any coding. 

The widget comes with a dashboard that enables you to customize the search experience of your customers based on your business priorities. With our Instant search widget, your search bar can:

• Autocomplete: Autocomplete displays search suggestions right as you type in the search bar. Right from the first keystroke, the search bar will deliver real-time predictions of how the query could be completed and a search dropdown menu of matching documents. Predictions will change with each keystroke to increase the likelihood of successful searches on the first try. You can fully customize the layout of the dropdown menu to match your needs. Customers can click on one of the listed suggestions and be taken directly to the search results without submitting the entire query and waiting for results.
• Search box on-click: As soon as your customers click within the search box on your site, they can be offered various suggestions, such as recent searches, popular search terms, and some of the most popular products that you might want to promote.
• “No results” search bar: When the autocomplete feature cannot return any relevant records, the instant search widget can help you set up some solutions to avoid customers from seeing solely “nothing found” announcements. In these cases, the search bar can be customized to display relevant data to expose customers to products and search terms they do not think of in the first place.

Enable the Instant search widget

By enabling our app’s Instant search widget, your default search bar will have a rich autocomplete capability that provides instant result sets that can include related collections, pages, products, other search terms, and thumbnail images.

To enable the app’s Instant search widget:

1. From the app’s admin, go to Search > Standard Search > Instant search widget.
2. Switch on the button Enable Instant search widget (ISW).
3. Click Save settings. Now, our Instant search widget has been integrated into the search bar on your storefront.

Customize the layout of your search dropdown menu

Our Instant Search widget will add the autocomplete search drop-down menu of matching documents to your search box from the first typed character. The drop-down menu contains the following attributes:

• Popular suggestions: They are results that the search engine algorithm will generate to predict how the search query could be completed. They are delivered based on algorithms like Synonym rules, Suggestion Dictionary, and Analytics data.

  

  • Scoped suggestion: One of the sub-setting for Popular suggestions that helps your shoppers narrow down their searches on topics they are most interested in by suggesting queries within specific fields, such as specific collections or vendors.

    

• Products: The dropdown widget can include products that contain search keywords in their product title, product type, vendor, tag, product options, SKU, barcode, and description.

  

• Collections: These are relevant collections that contain the search term in their titles.

  

• Blogs & Pages: The menu can return relevant blog posts and pages that contain the search term in their titles.

  

It is worth noting that you can fully customize the layout of the dropdown menu to match your needs. To customize its layout:

1. From the app’s admin, go to Search > Standard Search > Instant search widget.
2. Make sure to switch on the button Enable Instant search widget.
3. In the Layout settings section, select your preferred layout style among options: Two Columns, Overlay Fullwidth, and One Column.

For each type of layout, you can choose:

• Whether you want to display relevant products in a grid or a list.
• The right or left column in the layout is where you want to display relevant products.
• The number of relevant products per row that you want to display.

4. Click Save settings.

Customize the components of your search dropdown menu

The autocomplete search dropdown menu that our Instant search widget adds to your search bar can include relevant products, collections, pages, and popular suggestions. 

To customize the components of the dropdown menu:

1. From the app’s admin, go to Search > Standard Search > Instant search widget.
2. Make sure to switch on the button Enable Instant search widget.
3. Scroll down till the Display settings section.
4. Switch on/off the button of the corresponding component that the dropdown menu should display/hide.

5. Drag and drop these components into the order that applies to the dropdown menu on your storefront.

   

6. [Optional] Rename how you want the component to appear on your storefront in the Label field.
7. In the Highest number of displayed results field, define the maximum display number of each component’s results from 1 to 10.
8. In the Product suggestion display section, toggle buttons to modify advanced settings to show or hide details of relevant products which are returned by the search engine. You can decide to let the dropdown menu display out-of-stock products, or relevant products with their vendor name, price, SKU, sale price, and image.

9. Click Save Settings. 

Tutorial video

Watch this tutorial video to learn more about how to use Instant search display.

If you have any questions or need further assistance, please do not hesitate to reach out to our dedicated support team at support@boostcommerce.net.