Predictive search

Predictive search shows results while the visitor types: up to 10 products, and the searches Shopify suggests for those words. It usually sits in the navbar, with the results in a Webflow Dropdown or a popover. For the full list of results, pair it with a search results page.

How it fits together

What Smootify needs:

• a smootify-search element;
• inside it, a Text field whose Name setting is query. It sits in a Form Block, as every Webflow field does.

What is up to you:

• where the results appear: in a Webflow Dropdown, in a popover, or in place on the page, such as in a menu panel;
• which parts you use: the result list, the suggestions, the empty message, the content shown before the visitor types;
• how a result looks: a simple result template, or a full product card.

1. Add the search field

1. Add a Custom element with the tag smootify-search.
2. Inside it, add a Form Block with one Text field. Smootify searches with it whatever its Name. With two text fields, set the Name of the search one to query.

Smootify searches a short moment after the visitor stops typing, and when they press Enter. The Form Button is optional.

limit on smootify-search sets how many products show, up to 10, which is also the default. Shopify returns at most 10 products for a predictive search.

2. Choose where the results appear

The results can appear in one of three places:

3. The regions

These Custom elements show and hide themselves with the state of the search. All are optional:

In a Webflow Dropdown without search-with-query, the Dropdown list stays hidden until there are results or the empty message.

4. The results

There are two ways to show a result:

A result template. Add a Custom element with the tag search-result. It is the template: Smootify copies it once per product, and removes other search-result elements you designed. Inside it, search="…" fills an element with a value of the product:

• search="title", search="vendor", search="type": text;
• search="url" on a Link block or a Text link: the product page’s link;
• search="image" on an Image: the product’s main image;
• search="price": the lowest price of the product;
• search="compare-at-price": its crossed-out price, removed when it is not on sale;
• search="collection": the first collection’s name, with its link on a Text link.

image, compare-at-price and collection are removed when the product has none. A result that cannot be bought gets the class is-not-available. Every value is in predictive search attributes.

A product card. Instead of search-result, put a smootify-product with data-id="search" inside search-with-query, and design it as a product card. The first card is the template.

5. Suggestions, the typed words and the search page

• Shopify’s suggestions. Inside search-suggestions, a Text link with search="suggested-query" is the template of one suggestion. A click searches it. Put search-suggestions inside search-with-query: suggestions only exist once the visitor has typed.
• Your own suggestions. In search-no-query, Text links with search="suggested-query" are fixed suggestions, such as popular searches. A click searches their text. Keep them outside search-suggestions.
• The typed words. search="query" on text shows what the visitor typed, for example in “Results for shoes”.
• The search page. A link with search="search-page", set in Webflow to your search page, gets the typed words added to its address, so the search page opens with the same search. A Webflow Button works here too, since it is a link.

While it loads

While a search runs, smootify-search has the class is-loading. Nothing shimmers by default: style that class, or add skeleton to the elements in the result template. Smootify also sets has-query, has-products, is-empty and has-suggestions on smootify-search. See state classes.

Before you publish

Coming from 1.x

• The results no longer shimmer while loading, and Smootify no longer adds a hidden placeholder result: style is-loading or add skeleton.
• Inside search-result, use search="price" and search="compare-at-price" instead of smootify-price.
• limit above 10 is capped at 10.