Predictive Search
Predictive Search
Predictive search shows suggested results as you type. It helps your customers refine their search without being redirected to a search results page, and quickly explore your store by seeing top results for suggested search terms, products, collections, and more.
You can customize the behavior of predictive search with the Search & Discovery app from Shopify.
Predictive search presents shoppers with a limited set of highly relevant results. By default, a maximum of 10 possible results are shown across all the queried result types. Because of this limit, there are typically more results available on the dedicated search results page of your store.
Search results are based on the searchable properties of the different possible result types. By default, the following properties are searched:
- Products: title, product type, variant title, and vendor
Predictive Search
Copy Webflow element
Predictive search element is made as a native dropdown of Webflow. So to see up and modify the content you need to open up the dropdown menu.
Inside the dropdown you will find 2 DOM elements
Search No Query
This element shows up when you click on the search input and no query has been added yet. You can use it to show up any marketing data you wish, like latest viewed products. Or most searched queries and so on.
Search With Query
This element shows up instead when there is a search query inside the search input. Here you can add several DOM elements
Search result
It’s the result of each search, it’s a card that get’s repeated once for each result from the Shopify API.
Inside you can use the following custom attributes
Search Url
The following attribute can be used on a link element and will dinamically be replaced with the product url
searchurlSearch Title
The following attribute can be used on a text element and will dinamically be replaced with the product title
searchtitleSearch Image
The following attribute can be used on an image element and will dinamically be replaced with the product featured image
searchimageSearch Vendor
The following attribute can be used on a text element and will dinamically be replaced with the product vendor
searchvendorPrice
This is the price of the searched up product
Product Price
Copy Webflow element
Search empty
It’s an element that shows up only and exclusively if the query is not returning any result
Search suggestions
It’s an element that shows up only and exclusively if the query has related search queries to show up
Inside on a link element you must add the attribute
searchsuggested-queryIt will create dynamically related queries to further fine up your search