Predictive Search Via SKU

Solved
Shopify Partner
28 3 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 ProductPredictive Search works to find ProductPredictive Search drops product on SKUPredictive Search drops product on SKUSearch finds product via SKU after pressing enterSearch finds product via SKU after pressing enter

0 Likes
Highlighted

Success.

Shopify Partner
28 3 1

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.

 

0 Likes