How can I enable predictive search via SKU on my store?

Store Design
1

I have tried asking this question before but to no avail. However, I think it’s important for my store, and it’ll be useful for other people. I contacted Shopify help and the said it was a functionality not currently built-in and they are gonna pass it on to the devs. I’m sure there is always a way with a bit of code though!

I’m trying to make it so the predictive search drawer can search via SKU. When I hard search for the product it comes up on the search page but it doesn’t come up during the search activity in the search drawer. See the pictures below.

Predictive Search works to find Product
Predictive Search works to find Product3570×2089 352 KB

Predictive Search drops product on SKU
Predictive Search drops product on SKU3588×2092 346 KB

Search finds product via SKU after pressing enter
Search finds product via SKU after pressing enter3555×2089 267 KB

1 Like
2

I worked it out! It was easier than I expected so I’m leaving the answer here for those who come after me. I am using the debut theme as a base.

in theme.js under assets, there is a predictive search function that starts as such (it is on line 855 for me)

this.Shopify = this.Shopify || {};
this.Shopify.theme = this.Shopify.theme || {};
this.Shopify.theme.PredictiveSearchComponent = (function(PredictiveSearch)

within this function there are declarations for FIELDS (line 1245 for me)

PredictiveSearch.FIELDS = {
AUTHOR: ‘author’,
BODY: ‘body’,
PRODUCT_TYPE: ‘product_type’,
TAG: ‘tag’,
TITLE: ‘title’,
VARIANTS_BARCODE: ‘variants.barcode’,
VARIANTS_SKU: ‘variants.sku’,
VARIANTS_TITLE: ‘variants.title’,
VENDOR: ‘vendor’
};

Then there is a second function on line (1329 for me)

this.Shopify = this.Shopify || {};
this.Shopify.theme = this.Shopify.theme || {};
this.Shopify.theme.PredictiveSearchComponent = (function(PredictiveSearch)

and within this function there is the variable

var DEFAULT_PREDICTIVE_SEARCH_API_CONFIG = {
resources: {
type: [PredictiveSearch.TYPES.PRODUCT],
options: {
unavailable_products: PredictiveSearch.UNAVAILABLE_PRODUCTS.LAST,
fields: [
PredictiveSearch.FIELDS.TITLE,
PredictiveSearch.FIELDS.VENDOR,
PredictiveSearch.FIELDS.PRODUCT_TYPE,
PredictiveSearch.FIELDS.VARIANTS_TITLE
]
}
}
};

All I did was add this after the Variants_Title line. (Pay attention to syntax, comma to close the variants_title line, and no comma on the final line)
PredictiveSearch.FIELDS.VARIANTS_SKU

Now it predictively returns results for SKU, not only that, it PULLS THE CORRECT IMAGE!

Hope this helps someone else.

7 Likes
3

Thank you Max11,

This code is working fine,

4

I could not find these files and keywords in the Dawn theme, anyone know of a solution?

1 Like
5

Does this still work for you in 2024? I’m having the same issue with my website. No results on predictive search dropdown if searching by anything other than product title or variant title, but if I hit enter (or click search) the appropriate products are listed on the search page.

I was told by Shopify to reach out to my theme developer. The developer responded saying Shopify wants to keep predictive search functions in the admin using the Search & Discovery app, and that I should ask to have it added as a feature. Unfortunately there’s no option to filter results by Tag in the app. Hoping someone has a workaround to get this functioning correctly

2 Likes
6

I was able to get SKUs to appear in predictive search results in Dawn 14.0 by editing assets/predictive-search.js

Look for the fetch and replace with:

fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&resources[type]=product&resources[options][unavailable_products]=hide&resources[options][fields]=title,variants.sku,product_type,variants.title§ion_id=predictive-search`,
     { signal: this.abortController.signal }
    )
      .then((response) => {
        if (!response.ok) {
          var error = new Error(response.status);
          this.close();
          throw error;
        }
2 Likes