The Predictive Search API can be used to display predictive search results for queries, products, collections, pages, and articles.
To learn how to use predictive search in a theme, refer to [Add predictive search to your theme](/docs/storefronts/themes/navigation-search/search/predictive-search).
All Ajax API requests should use [locale-aware URLs](/docs/api/ajax#locale-aware-urls) to give visitors a consistent experience.
## GET /{locale}/search/suggest.json
The following example request retrieves predictive results for a specified search query:
```js
GET /{locale}/search/suggest.json?q={query}
```
### Query parameters
<table>
<tr>
<th>Query parameter</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td><code>q</code></td>
<td>Yes</td>
<td>The search query.</td>
</tr>
<tr>
<td><code>resources[type]</code></td>
<td>No</td>
<td>
<p>Specifies the type of results requested.</p>
<p>The following are the accepted values, which can be combined in a comma-separated list:</p>
<ul>
<li><code>product</code></li>
<li><code>page</code></li>
<li><code>article</code></li>
<li><code>collection</code></li>
<li><code>query</code></li>
</ul>
<p> The default value is <code>query,product,collection,page</code>.</p>
<p>To change the default value, you can use <a href="https://help.shopify.com/manual/online-store/search-and-discovery/settings">Search Settings</a> in the Search & Discovery app.</p>
</td>
</tr>
<tr>
<td><code>resources[limit]</code></td>
<td>No</td>
<td>
<p>Limits the number of results based on <code>limit_scope</code>.</p>
<p>The value can range from <code>1</code> to <code>10</code>, and the default is <code>10</code>.</p>
</td>
</tr>
<tr>
<td><code>resources[limit_scope]</code></td>
<td>No</td>
<td>
<p>Decides the distribution of results.</p>
<p>The following are the accepted values:</p>
<ul>
<li><code>all</code>: Return results up to <code>limit</code> across all types.</li>
<li><code>each</code>: Return results up to <code>limit</code> per type.</li>
</ul>
<p> The default value is <code>all</code>.</p>
</td>
</tr>
<tr>
<td><code>resources[options][unavailable_products]</code></td>
<td>No</td>
<td>
<p>Specifies whether to display results for unavailable products.</p>
<p>The following are the accepted values:</p>
<ul>
<li><code>show</code>: Show unavailable products.</li>
<li><code>hide</code>: Hide unavailable products.</li>
<li><code>last</code>: Show unavailable products below other matching results.</li>
</ul>
<p>The default value is <code>last</code>.</p>
<p>To change the default value, you can use <a href="https://help.shopify.com/manual/online-store/search-and-discovery/settings">Search Settings</a> in the Search & Discovery app.</p>
<p>This parameter is only applicable to type <code>product</code>.</p>
</td>
</tr>
<tr>
<td><code>resources[options][fields]</code></td>
<td>No</td>
<td>
<p>Specifies the list of resource fields to search.</p>
<p>The following are the accepted values:</p>
<ul>
<li><code>author</code></li>
<li><code>body</code></li>
<li><code>product_type</code></li>
<li><code>tag</code></li>
<li><code>title</code></li>
<li><code>variants.barcode</code></li>
<li><code>variants.sku</code></li>
<li><code>variants.title</code></li>
<li><code>vendor</code></li>
</ul>
<p>The default fields searched on are <code>title</code>, <code>product_type</code>, <code>variants.title</code>, and <code>vendor</code>. For the best search experience, you should search on the default field set.
</p>
</td>
</tr>
</table>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example request object"></script>
<script type="text/plain" data-language="json">
{
"q": "bag",
"resources": {
"type": "product",
"options": {
"unavailable_products": "hide",
"fields": "title,product_type,variants.title"
}
}
}
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example request using Fetch"></script>
<script type="text/plain" data-language="javascript">
fetch(window.Shopify.routes.root + "search/suggest.json?q=bag&resources[type]=product&resources[options][unavailable_products]=hide&resources[options][fields]=title,product_type,variants.title")
.then((response) => response.json())
.then((suggestions) => {
const productSuggestions = suggestions.resources.results.products;
if (productSuggestions.length > 0) {
const firstProductSuggestion = productSuggestions[0];
alert(`The title of the first product suggestion is: ${
firstProductSuggestion.title}`
);
}
}
);
</script>
</div>
</p>
### Resources response
The following example is a response to a successful request to the `/{locale}/search/suggest.json` endpoint, which contains resource objects associated with the specified query:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example resources response"></script>
<script type="text/plain" data-language="json">
{
"resources": {
"results": {
"queries" : ARRAY OF RELEVANT search queries,
"products": ARRAY OF MATCHING product_object,
"collections": ARRAY OF MATCHING collection_object,
"pages": ARRAY OF MATCHING page_object,
"articles": ARRAY OF MATCHING article_object
}
}
}
</script>
</div>
</p>
> Caution:
> You shouldn't output the `body` content of resource objects for stores that support multiple languages. When a store supports multiple languages, the `body` content contains a combination of the content translated in each language.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example product_object"></script>
<script type="text/plain" data-language="json">
{
"available": BOOLEAN,
"body": STRING w/HTML,
"compare_at_price_max": DECIMAL ("0.00" when the product has no variants with a "compare_at_price"),
"compare_at_price_min": DECIMAL ("0.00" when the product has no variants with a "compare_at_price"),
"handle": STRING,
"id": INTEGER,
"image": STRING e.g, "https://cdn.shopify.com/s/...",
"price": DECIMAL,
"price_max": DECIMAL,
"price_min": DECIMAL,
"tags" : ARRAY OF STRING,
"title": STRING,
"type" : STRING,
"url": STRING e.g, "/products/fast-snowboard?_pos=1&_psq=snowb&_ss=e&_v=1.0",
"variants": [{
"available": BOOLEAN,
"compare_at_price": DECIMAL (nullable),
"id": INTEGER,
"image": STRING e.g, "https://cdn.shopify.com/s/...",
"price": DECIMAL,
"title": STRING,
"url": STRING e.g, "/products/fast-snowboard?_pos=1&_psq=snowb&_ss=e&_v=1.0",
"featured_image": { // (If a variant doesn't have an associated featured_image, then all of the properties of featured_image are set to null.)
"alt": STRING,
"aspect_ratio": DECIMAL,
"height": INTEGER,
"url": STRING e.g, "https://cdn.shopify.com/s/...",
"width": INTEGER
}
}],
"vendor": STRING,
"featured_image": { // (If a product doesn't have an associated featured_image, then all of the properties of featured_image are set to null.)
"alt": STRING,
"aspect_ratio": DECIMAL,
"height": INTEGER,
"url": STRING e.g, "https://cdn.shopify.com/s/...",
"width": INTEGER
}
}
</script>
</div>
</p>
> Note:
> A product variant is returned only when the query matches terms specific to the variant title. Only the variant with the most matching terms is returned. When a variant is returned, the following `product_object` fields will match those of the variant:
>
>- `featured_image`
>- `image`
>- `url`
>
>For example, a store has a snowboard with a blue variant and a light blue variant. If you search for `snowbo`, then only the snowboard product is returned. However, if you search for `light blue snowbo`, then the snowboard product is returned with the light blue variant.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example collection_object"></script>
<script type="text/plain" data-language="json">
{
"body": STRING w/HTML,
"handle": STRING,
"id": INTEGER,
"featured_image": { // (If a collection doesn't have an associated featured_image, then all of the properties of featured_image are set to null.)
"alt": STRING,
"width": INTEGER,
"height": INTEGER,
"aspect_ratio": DECIMAL,
"url": STRING e.g, "https://cdn.shopify.com/s/..."
},
"published_at": STRING DATE,
"title": STRING,
"url": STRING e.g, "/collections/snowboards?_pos=1&_psq=sno&_ss=e&_v=1.0"
}
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example query_object"></script>
<script type="text/plain" data-language="json">
{
"url": STRING e.g, "/search?_pos=1&_psq=cos&_ss=e&_v=1.0&q=costume",
"text":STRING,
"styled_text": STRING e.g, "<mark>cos</mark><span>tume</span>",
}
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example page_object"></script>
<script type="text/plain" data-language="json">
{
"author": STRING,
"body": STRING w/HTML,
"handle":STRING,
"id": INTEGER,
"published_at": STRING DATE,
"title": STRING,
"url": STRING e.g, "/pages/my-page?_pos=1&_psq=my&_ss=e&_v=1.0"
}
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example article_object"></script>
<script type="text/plain" data-language="json">
{
"author": STRING,
"body": STRING w/HTML,
"handle": STRING,
"id": INTEGER,
"image": STRING e.g, "https://cdn.shopify.com/s/...",
"published_at": STRING DATE,
"summary_html": STRING w/HTML,
"tags": ARRAY OF STRING,
"title": STRING,
"url": STRING e.g, "/blogs/news/my-article?_pos=1&_psq=my&_ss=e&_v=1.0"
}
</script>
</div>
</p>
### Error responses
When a request to the `/{locale}/search/suggest.json` endpoint is unsuccessful, one of the following error responses is returned:
- [Invalid parameter error](#invalid-parameter-error)
- [Expectation failed](#expectation-failed)
- [Too many requests](#too-many-requests)
Any other errors not listed will return a `5xx` status code.
#### Invalid parameter error
All errors related to the request parameters are returned with a 422 status code and a relevant error message. The `description` field describes the request error.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Invalid parameter example"></script>
<script type="text/plain" data-language="json">
{
"status": "422",
"message": "Invalid parameter error",
"description": "Invalid option for `unavailable_products` parameter"
}
</script>
</div>
</p>
#### Expectation failed
If your theme isn't using one of the [supported languages](#supported-languages), then the API returns the following error:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Expectation failed example"></script>
<script type="text/plain" data-language="json">
{
"status": "417",
"message": "Expectation Failed",
"description": "Unsupported buyer locale"
}
</script>
</div>
</p>
#### Too many requests
Exceeding the request throttle limit will return a 429 status code with a relevant error message.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example"></script>
<script type="text/plain" data-language="json">
{
"status": "429",
"message": "Too many requests",
"description": "Throttled"
}
</script>
</div>
</p>
In this case, the response will also contain an HTTP header with the Retry-After value in seconds.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Retry-After example"></script>
<script type="text/plain" data-language="none">
Retry-After: 1
</script>
</div>
</p>
## GET /{locale}/search/suggest
The following example request retrieves the HTML from a section rendered with the predictive results for a specified search query.
```js
GET /{locale}/search/suggest?q={query}&resources[type]=product§ion_id={section_id}
```
### Query parameters
The `/search/suggest` endpoint supports the same <a href="/docs/api/ajax/reference/predictive-search#query-parameters">query parameters</a> as the <code>/search/suggest.json</code> endpoint, in addition to the following:
<table>
<tr>
<th>Query parameter</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td><code>section_id</code></td>
<td>Yes</td>
<td>The unique <a href="/docs/api/ajax/section-rendering#find-section-ids">section ID</a> of the section file that you want render with the predictive search query.</td>
</tr>
</table>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example request object"></script>
<script type="text/plain" data-language="json">
{
"q": "bag",
"resources": {
"type": "product",
"options": {
"unavailable_products": "hide",
"fields": "title, product_type, variants.title"
}
},
"section_id": "predictive-search"
}
</script>
</div>
</p>
<a id="html-example-fetch-request"></a>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example request using Fetch"></script>
<script type="text/plain" data-language="javascript">
const predictiveSearchSection = document.querySelector('.predictive-search-results');
var requestResponse;
fetch(window.Shopify.routes.root + "search/suggest?q=bag&resources[type]=product&resources[options][unavailable_products]=hide&resources[options][fields]=title,product_type,variants.title§ion_id=predictive-search")
.then((response) => {
requestResponse = response;
return response.text();
})
.then((text) => {
if (!requestResponse.ok) {
throw new Error(`${requestResponse.status}: ${text}`);
}
const resultsMarkup = new DOMParser()
.parseFromString(text, 'text/html')
.querySelector('#shopify-section-predictive-search').innerHTML;
predictiveSearchSection.innerHTML = resultsMarkup;
})
.catch((error) => {
console.error(error);
});
</script>
</div>
</p>
### Section response
The response to a successful request to the `/{locale}/search/suggest` endpoint.
The section response contains the HTML of the provided section rendered with the [`predictive_search` object](/docs/api/liquid/objects/predictive_search) containing the results of the specified query.
For example, the following section would generate the following section response:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example section"></script>
<script type="text/plain" data-language="liquid">
{%- if predictive_search.performed -%}
<div id="predictive-search-results">
{%- if predictive_search.resources.products.size > 0 -%}
<h3>Products</h3>
<ul>
{%- for product in predictive_search.resources.products -%}
<li><a href="{{ product.url }}">{{ product.title }}</a></li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endif -%}
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example section response"></script>
<script type="text/plain" data-language="html">
<div id="shopify-section-predictive-search">
<div id="predictive-search-results">
<h3>Products</h3>
<ul>
<li><a href="/products/running-shoes">Running Shoes</a></li>
<li><a href="/products/tennis-shoes">Tennis Shoes</a></li>
</ul>
</div>
</div>
</script>
</div>
</p>
> Note:
> For the `product` resources type, if the query matches terms specific to a variant's title, the following [`product` object](/docs/api/liquid/objects/product) fields will match those of the variant:
>
>- `featured_media`
>- `url`
>
>For example, a store has a snowboard with a blue variant and a light blue variant. If you search for `snowbo`, then the snowboard product is returned showing the featured media and URL for the snowboard product. However, if you search for `light blue snowbo`, then the snowboard product is returned showing the featured media and URL for the light blue variant.
### Error responses
When a request to the `/{locale}/search/suggest` endpoint is unsuccessful, one of the following error status codes is returned:
<table>
<thead>
<tr>
<th>Status code</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>404</code></td>
<td><strong>Section not found</strong> - The provided section ID wasn't found in the theme.</td>
</tr>
<tr>
<td><code>417</code></td>
<td><strong>Expectation failed</strong> - The buyer isn't using one of the <a href="#supported-languages">supported languages</a>.</td>
</tr>
<tr>
<td><code>422</code></td>
<td><strong>Invalid parameter error</strong> - The value used for a query parameter was invalid.</td>
</tr>
<tr>
<td><code>429</code></td>
<td><strong>Too many requests</strong> - The request throttle limit has been exceeded.</td>
</tr>
</tbody>
</table>
You can output the response text to get more details about an error. Refer to the [example request using Fetch](#html-example-fetch-request) to learn more.
> Note:
> Any other errors not listed will return a `5xx` status code.
## Searchable properties
Search results are based on different searchable properties, depending on the resource `type` that you include in your query.
<table>
<tr>
<th>Resource type</th>
<th>Searchable properties</th>
</tr>
<td>Products</td>
<td>
<ul>
<li><code>body</code></li>
<li><code>product_type</code></li>
<li><code>tag</code></li>
<li><code>title</code></li>
<li><code>variants.barcode</code></li>
<li><code>variants.sku</code></li>
<li><code>variants.title</code></li>
<li><code>vendor</code></li>
</ul>
</td>
</tr>
<tr>
<td>Pages</td>
<td>
<ul>
<li><code>author</code></li>
<li><code>body</code></li>
<li><code>title</code></li>
</ul>
</td>
</tr>
<tr>
<td>Articles</td>
<td>
<ul>
<li><code>author</code></li>
<li><code>body</code></li>
<li><code>tag</code></li>
<li><code>title</code></li>
</ul>
</td>
</tr>
<tr>
<td>Collections</td>
<td>
<ul>
<li><code>title</code></li>
</ul>
</td>
</tr>
</table>
### Searchable translations
When searching a translated storefront, you can search the following properties:
<table>
<tr>
<th>Resource type</th>
<th>Searchable translations</th>
</tr>
<td>Products</td>
<td>
<ul>
<li><code>body</code></li>
<li><code>title</code></li>
<li><code>variants.title</code></li>
</ul>
</td>
</tr>
<tr>
<td>Pages</td>
<td>
<ul>
<li><code>body</code></li>
<li><code>title</code></li>
</ul>
</td>
</tr>
<tr>
<td>Articles</td>
<td>
<ul>
<li><code>body</code></li>
<li><code>title</code></li>
</ul>
</td>
</tr>
</table>
## Typo tolerance
Predictive search includes typo tolerance, which lets search terms containing typos return the correct matching search results.
Typo tolerance is set to `1`, which means that search displays results that differ from the search term by 1 letter, or results that have 2 letters in a different order. The first 4 letters of a search term need to be entered correctly for typo tolerance to take effect.
The following fields support typo tolerance:
<table>
<tr>
<th>Resource type</th>
<th>Fields supporting typo tolerance</th>
</tr>
<td>Products</td>
<td>
<ul>
<li><code>title</code></li>
<li><code>product_type</code></li>
<li><code>variants.title</code></li>
<li><code>vendor</code></li>
</ul>
</td>
</tr>
<tr>
<td>Pages</td>
<td>
<ul>
<li><code>author</code></li>
<li><code>title</code></li>
</ul>
</td>
</tr>
<tr>
<td>Articles</td>
<td>
<ul>
<li><code>author</code></li>
<li><code>title</code></li>
</ul>
</td>
</tr>
<tr>
<td>Collections</td>
<td>
<ul>
<li><code>title</code></li>
</ul>
</td>
</tr>
</table>
### Partial word matches
Predictive search supports partial word matches. This means that it suggests results even if the word you've entered is still incomplete. For example, if you enter `sweate`, then you might see a suggested search result for `sweater`.
Predictive search has the following limitations when it applies partial word matches:
- If a search query has more than one term, then partial word matches are applied only to the last term in the query.
- Partial word matches are applied only to the end of a search term. For example, if you enter `book`, then you won't see a suggested search result for `ebook`.
- Partial word matches are supported only for themes using specific languages. For more details, refer to [Requirements and limitations](#requirements-and-limitations).
Predictive search uses a different search engine than storefront search. Because of this, it doesn't handle partial word matches in the same way. Although predictive search supports partial word matches, storefront search supports them only if the [prefix option parameter](/docs/storefronts/themes/navigation-search/search#query-parameters) is set to `last`.
## Requirements and limitations
This section contains information about how predictive search is supported, and any current limitations.
### Supported languages
Predictive search is supported when the customer's online store session (`buyer locale`) is in one of the following supported languages:
<ul>
<li>Afrikaans</li>
<li>Albanian</li>
<li>Armenian</li>
<li>Bosnian</li>
<li>Bulgarian</li>
<li>Catalan</li>
<li>Croatian</li>
<li>Czech</li>
<li>Danish</li>
<li>Dutch</li>
<li>English</li>
<li>Estonian</li>
<li>Faroese</li>
<li>Finnish</li>
<li>French</li>
<li>Gaelic</li>
<li>German</li>
<li>Greek</li>
<li>Hungarian</li>
<li>Icelandic</li>
<li>Indonesian</li>
<li>Italian</li>
<li>Latin</li>
<li>Latvian</li>
<li>Lithuanian</li>
<li>Macedonian</li>
<li>Moldovan</li>
<li>Norwegian</li>
<li>Norwegian (Bokmål)</li>
<li>Norwegian Nynorsk</li>
<li>Polish</li>
<li>Portuguese (Brazil)</li>
<li>Portuguese (Portugal)</li>
<li>Romanian</li>
<li>Russian</li>
<li>Serbian</li>
<li>Serbo-Croatian</li>
<li>Slovak</li>
<li>Slovenian</li>
<li>Spanish</li>
<li>Swedish</li>
<li>Turkish</li>
<li>Ukrainian</li>
<li>Vietnamese</li>
<li>Welsh</li>
</ul>
A script tag in the `<head>` section indicates whether predictive search is supported for the theme language: `<script id="shopify-features"></script>`. This script tag includes a JSON-encoded `predictiveSearch` key with a boolean value. When it's set to `true`, the theme language is supported, and predictive search is enabled. Otherwise, it's set to `false`.
### Limitations
- Individual products can't be excluded from predictive search results. If a product is hidden from search engines and sitemaps with the metafield `seo.hidden`, then it won't appear in predictive search results. Learn more about [hiding resources with this metafield](/docs/apps/build/marketing-analytics/optimize-storefront-seo#step-2-hide-a-resource-from-search-engines-and-sitemaps).
- The API returns no more than 10 predictive suggestions per request type.
- Collection suggestions are based on the store's primary language. A customer's search won't be compared to a collection's translated content.
- Query suggestions are available in English only, and require the store's primary language (`shop primary locale`) and the customer's online store session (`buyer locale`) to be in English.