Fix Shopify Predictive Search: Make SKUs Searchable in Dawn Theme

Hey everyone! It's your friendly Shopify expert here, diving into another common head-scratcher that recently popped up in the community forums. We had a great discussion kicked off by a store owner, rachaelannewalker, who was scratching their head over why their Shopify search wasn't quite working as expected anymore. Specifically, products with SKUs like "JM-XL1" or "JM-XL2" used to pop right up when they searched for "jm-xl," but suddenly, nothing! It only worked if they typed the exact SKU. And the kicker? They hadn't even touched their Dawn theme. Sound familiar? You're definitely not alone if you've experienced this!

Understanding Shopify's Search Engines

First things first, as lumine wisely pointed out in the thread, it's super important to distinguish between the Shopify admin search and your storefront search. They actually run on different engines! Your admin search is usually pretty robust, but the storefront search, the one your customers use, is heavily influenced by your theme. So, if your admin search still finds 'JM-XL1' when you type 'jm-xl' but your website's search doesn't, that immediately tells us the issue is likely with your storefront indexing, not a broader data problem.

lumine also hit on a critical point: storefront search doesn't always guarantee partial or substring matching on variant SKUs. Plus, those handy hyphens? They can sometimes split your search terms into separate 'tokens,' meaning 'jm-xl' might not be treated as a single, cohesive search term anymore. This is a common culprit when search behavior suddenly changes without you touching your theme.

Why Your Predictive Search Might Be Missing SKUs

The core of the issue, and what tim_tairli elaborated on with some fantastic detail, is how Shopify's predictive search (that handy little autocomplete feature that shows suggestions as you type) works by default. Out of the box, it typically focuses on a few key fields: product title, product type, variant title, and vendor. Notice what's missing from that default list? Yep, variant SKUs!

This means if your customers are used to finding products by typing in part of an SKU, and your theme hasn't been explicitly told to look at SKUs for predictive search, those products simply won't show up in the suggestions. It's not that they're gone; they're just not being indexed for that specific search functionality.

Solution 1: The Quick Tag Fix (No Code Required!)

Before we dive into any code, lumine offered a simple, effective workaround that might be perfect for some of you, especially if you only have a few problem SKUs or prefer to avoid theme code edits:

Add the SKU as a Product Tag: If you want 'JM-XL1' to appear when someone types 'jm-xl,' simply add 'JM-XL' as a product tag to all relevant products. Since product tags are indexed by default for storefront search, this can often solve the problem immediately for general searches.

This is a great quick win, but if you have hundreds of SKUs or need more granular control, you might want to consider the next option.

Solution 2: Customizing Your Theme's Predictive Search to Include SKUs

This is where tim_tairli's insights really shine, offering a more robust, code-based solution for those comfortable with a little theme customization. The goal here is to tell your theme's predictive search script to also look at the variants.sku field.

Here's how you can modify your Dawn theme (or similar themes) to include SKUs in predictive search results. Remember, always test these changes in a duplicate or draft copy of your theme first! This ensures you don't break anything on your live store.

Step-by-Step for Dawn Theme:

Access Your Theme Code:
- From your Shopify admin, go to Online Store > Themes.
- Find your current theme, click Actions > Duplicate (to create a backup).
- On the duplicated theme, click Actions > Edit code.
Locate the predictive-search.js file:
- In the left-hand sidebar, under the 'Assets' directory, find predictive-search.js and click on it to open.

Identify the fetch call:

You'll be looking for a line that starts with fetch(`${routes.predictive_search_url}`.... In Dawn, as tim_tairli pointed out, this is often around line 179. It looks something like this (though line numbers can vary slightly with updates):

github.com/Shopify/dawn

assets/predictive-search.js

main


      
          
          getSearchResults(searchTerm) {
            const queryKey = searchTerm.replace(' ', '-').toLowerCase();
            this.setLiveRegionLoadingState();
          
            if (this.cachedResults[queryKey]) {
              this.renderSearchResults(this.cachedResults[queryKey]);
              return;
            }
          
            fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}§i {
              signal: this.abortController.signal,
            })
              .then((response) => {
                if (!response.ok) {
                  var error = new Error(response.status);
                  this.close();
                  throw error;
                }
          
                return response.text();

Modify the fetch call:
- You need to add a parameter to this URL that tells the predictive search API to include SKUs. The original line is:
```
fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}§i {
```
- You'll change it to something like this, effectively appending &resources[options][fields]=title,product_type,variants.title,vendor,variants.sku to the URL. This tells the API to expand its search scope.
- ```
fetch(`${routes.predictive_search_url}`
+`?q=${encodeURIComponent(searchTerm)}`
+`§i
+`&${encodeURIComponent("resources[options][fields]=title,product_type,variants.title,vendor,variants.sku")}`, {
```
Save and Test:
- Save your changes in the predictive-search.js file.
- Preview your duplicated theme and test the search functionality thoroughly. Try partial SKUs, hyphenated SKUs, and ensure other search terms still work correctly.
- Once you're confident, you can publish the duplicated theme.

This approach directly tells the Shopify Predictive Search API to broaden its scope, making your SKUs searchable in the autocomplete suggestions. It's a powerful way to enhance your customer's search experience, especially if they rely on product codes to find what they need.

Remember that link to the Predictive Search API reference that brisk_code shared at the start of the thread? It's a great resource if you want to dive deeper into what's possible with this API!

Ultimately, a smooth search experience is paramount for any online store. Whether you go with the simple tag fix or dive into theme code, making sure your customers can easily find their desired products (even by partial SKUs!) can significantly boost conversion rates and reduce frustration. It's all about making your store as intuitive and user-friendly as possible, just like rachaelannewalker was aiming for!

Shopify Search Not Working? How to Fix Predictive Search for SKUs (Dawn Theme & Beyond)