Hello Shopify community!
I’m trying to add SKU to predictive search.
All solutions I found are not compatible with my theme.
Does any one know how to do so and can share with me?
we have too many items to add the SKU to product title.
Thanks in advance!
screenshot for all search files
I was able to get predictive search to include SKU in the Dawn 14.0 theme 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;
}
Update for Dawn version 15.4.0
the above code won’t work because the regular expression in the js can’t handle the special characters in the new URL. The issue is in the updateSearchForTerm() method around line 108 inside assets/predictive-search.js
Replace with:
updateSearchForTerm(previousTerm, newTerm) {
const searchForTextElement = this.querySelector('[data-predictive-search-search-for-text]');
const currentButtonText = searchForTextElement?.innerText;
if (currentButtonText) {
// Escape special regex characters in previousTerm
const escapedPreviousTerm = previousTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const matches = currentButtonText.match(new RegExp(escapedPreviousTerm, 'g'));
if (matches && matches.length > 1) {
// The new term matches part of the button text and not just the search term, do not replace to avoid mistakes
return;
}
const newButtonText = currentButtonText.replace(previousTerm, newTerm);
searchForTextElement.innerText = newButtonText;
}
}
Then update the fetch request
fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&resources[type]=product,collection,page,article&resources[options][fields]=title,product_type,variants.title,variants.sku,vendor§ion_id=predictive-search`, {
signal: this.abortController.signal,
})
Bonus - Add SKU in the suggestions drawer for better customer clarity
Modify sections/predictive-search.liquid and add SKU after the product title.
<p class="predictive-search__item-heading h5">{{ product.title | escape }}</p>
{%- if product.selected_or_first_available_variant.sku != blank -%}
<div class="predictive-search__item-sku caption-with-letter-spacing">
<span class="visually-hidden">{{ 'products.product.sku' | t }}: </span>
SKU: {{ product.selected_or_first_available_variant.sku }}
</div>
{%- endif -%}
