📖 Upgrade your default Shopify search bar with autocomplete and rich, real‑time results—no coding required. The widget adds a customizable dropdown that surfaces products, collections, pages, and guided suggestions to speed up discovery and improve conversion.
What is an instant search widget?
Autocomplete: Predicts and completes queries as the shopper types.
On‑click suggestions: Show recent searches, popular terms, and featured products when the box is focused.
Smart “no results” handling: Replace empty states with alternative suggestions (terms, products, or content).
Enable the Instant search widget
From the app’s admin, go to Search > Standard Search > Instant search widget.
Switch on the button Enable Instant search widget (ISW).
Click Save settings.
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-settings 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:
From the app’s admin, go to Search > Standard Search > Instant search widget.
Make sure to switch on the button Enable Instant search widget.
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.
Click Save settings.
Customize the components of your search dropdown menu
From the app’s admin, go to Search > Standard Search > Instant search widget.
Make sure to switch on the button Enable Instant search widget.
Scroll down to the Display settings section.
Switch on/off the button of the corresponding component that the dropdown menu should display/hide.
Note: When you want to hide specific collections, blog posts, and pages in the search dropdown menu, you can contact us via our live chat support for further assistance.
Drag and drop these components into the order that applies to the dropdown menu on your storefront.
[Optional] Rename how you want the component to appear on your storefront in the Label field.
In the Highest number of displayed results field, define the maximum display number of each component’s results from 1 to 10.
In the Product suggestion display section, toggle buttons to modify advanced settings to show or hide details of relevant products that 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.
Note: These features adjust the display information of products only and do not affect the data fields scanned by the algorithm used to display relevant records.
Click Save Settings.
Tutorial video
Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.