Predictive search

Predictive search when enabled occurs in the search bar in the site header. When a search term is entered, it will automatically look for matches as you type. A major update to predictive search was released with Whisk version 3.0.0, and you'll find documentation below for this version, as well as the previous version.

Whisk 3.0.0 and later

In early 2023, Shopify released updated features for predictive search which include query suggestions. We updated our predictive search to include these, as well as adding search results beyond just products. You can also show results for pages, collections, and articles. https://help.shopify.com/en/manual/online-store/storefront-search/predictive-search


You can manage and customize what results show up in your results through Shopify's free Search & Discovery app Below is a screenshot of the setting where you can customize search results.

Within the "Theme Settings" in Whisk, there are the following customizations for Predictive Search:

Enable product suggestions in the header search bar

Check this box to turn predictive search on. If it is unchecked, the search bar will take the visitor to the search page to see results after they click enter, but not automatic matches will be shown.

Products

Show product vendor

Check this box to show the product vendor in the predictive search results

Show product price

Check this box to show the product price in the predictive search results

Collections

Image

Here you can choose which image you'd like to show on the collection card.

Featured image

This is the collection image. If one does not exist on the collection, then the featured image of the first product in that collection will show. If there is no image on that product, then the background placeholder color/gradient will show.

First product image

The featured image on the first product in the collection. If there is no image on that product, then the background placeholder color/gradient will show.

Custom image

Create a custom metafield on collections where you can upload a new photo to use. See the bottom of this page for detailed instructions on how.

Font color

Color of the text on the card

Overlay color

Color of the slightly transparent overlay over the image.

Overlay opacity

Select the percentage of transparency you want to apply to the overlay color. A higher number is a more opaque/solid color.


Whisk v 2.0.0 and earlier

Here are the options you can configure for predictive search in Theme settings.

Enable product suggestions in the header search bar

Check this box to turn predictive search on. If it is unchecked, the search bar will take the visitor to the search page to see results after they click enter, but not automatic matches will be shown.

Show product vendor

Check this box to show the product vendor in the predictive search results

Show product price

Check this box to show the product price in the predictive search results

Still need help? Contact Us Contact Us