Empire Theme by Pixel Union is unable to include SKU in Predictive Search in the Header

Store Design
, ,

Topic summary

A user is attempting to modify the Empire theme’s predictive search functionality to include product SKU (variant.sku) in search results, similar to what they successfully implemented in the Dawn theme.

Current Challenge:

  • Empire theme doesn’t have a dedicated predictive-search.js file like Dawn
  • Need to locate and modify the fetch request that calls Shopify’s Predictive Search API

Solution Provided:

  • Another user suggested finding the JavaScript file (likely theme.js or search.js) in the assets folder
  • Modify the fetch request to add variants.sku to the resources[options][fields] parameter
  • Use browser Developer Tools (F12) to monitor network requests if the search code is difficult to locate

Progress:

  • Original poster found the fetch request in empire.js and updated it to include the SKU field in the parameters
  • Implementation appears to follow the same pattern as the Dawn theme modification

The discussion demonstrates a technical customization requiring direct theme file editing to extend search functionality beyond default capabilities.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Has anyone been able to modify the fetch request in the Empire theme to include variants.sku in the resources[options][fields] parameter?

I was able to do this in Dawn via the predictive-search.js file:

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;
        }

But apparently the Empire them doesn’t even have the predictive-search.js asset.

Does anyone know how the Empire theme utlilizes the Predictive Search API?
https://shopify.dev/docs/api/ajax/reference/predictive-search

Thanks!

2

Hello @AutoPartsAAA ,

  1. Find the JavaScript File:

    • Open the assets folder and search for JavaScript files like theme.js or search.js.

  2. Locate the Fetch Request:

    • Look for fetch requests related to predictive search. They might use URLs like ${routes.predictive_search_url}.

  3. Modify the Fetch Request:

    • Add variants.sku to the resources[options][fields] parameter. It should look similar to this:
      javascript
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;
  }
  return response.json();
})
.then((data) => {
  // Handle the data
})
.catch((error) => {
  console.error('Error:', error);
});

  • Test Your Changes:

    • Ensure the search functionality works and variants.sku is included in the results.

If the predictive search is hard to find, use your browser’s Developer Tools (F12) to monitor network requests while searching.

Thanks!

3

Thank you, I found the Fetch Request within empire.js and updated it to:

fetch(`${window.Theme.routes.predictive_search_url}?q=${encodeURIComponent(terms)}§ion_id=predictive-search&resources[options][fields]=title,variants.title,variants.sku,product_type`).then(response => {
        if (!response.ok) {
          throw new Error(response.status);
        }