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 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 <input name="query">, in a <form>.

What is up to you:

• where the results appear: 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.

<smootify-search>
  <form><input type="search" name="query"></form>
  <div popover="auto">
    <search-with-query>
      <search-result>
        <a search="url" href="#"><img search="image" alt="" width="48" height="48"><div search="title">Product name</div><div search="price">$0.00</div></a>
      </search-result>
      <search-empty><div>No products found</div></search-empty>
    </search-with-query>
  </div>
</smootify-search>

1. Add the search field

1. Add a smootify-search element.
2. Inside it, add a <form> with one text <input>. Smootify searches with it whatever its name. With two text inputs, 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 submit 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 two places:

3. The regions

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

4. The results

There are two ways to show a result:

• A result template, search-result: an element with search="…" values inside, copied once per product. Prices with search="price" and search="compare-at-price": a smootify-price inside it has no product to read.
• A product card, smootify-product with data-id="search" inside search-with-query, designed as a product card: it shows everything a product card shows, such as smootify-price or an add-to-cart button, but each card loads the whole product from Shopify.

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

• search="title", search="vendor", search="type": text;
• search="url" on an <a>: the product page’s link;
• search="image" on an <img>: 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 an <a>.

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.

<search-with-query>
  <div class="sm-dyn-item">
    <smootify-product data-id="search">
      <a product="url" href="#">Product name</a>
      <smootify-price><div data-prop="price">$0.00</div></smootify-price>
    </smootify-product>
  </div>
</search-with-query>

5. Suggestions, the typed words and the search page

<search-no-query>
  <div>Popular searches</div>
  <a href="/search/" search="suggested-query">Sneakers</a>
</search-no-query>
<search-with-query>
  <div>Results for <span search="query">shoes</span></div>
  <search-suggestions><a href="/search/" search="suggested-query">Suggestion</a></search-suggestions>
  <a href="/search/" search="search-page">See all results</a>
</search-with-query>

• Shopify’s suggestions. Inside search-suggestions, an <a> 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, 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" and an href that is your search page, such as /search/, gets the typed words added to its address, so the search page opens with the same search. Enter in the field opens it too.

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