Shopify Search Bar Not Working: Theme, App, and Predictive Search Fixes (2026)

Quick Fix with Thunder

First Check the Native Shopify Search Form

Start with the simplest test. Visit /search?q=test on your storefront. If the search results page loads, Shopify search itself works and the problem is likely your header form, search drawer, app, or theme JavaScript. If the results page is broken too, compare your live theme with a fresh Dawn preview.

A basic Shopify search form should submit a GET request to /search with an input named q. Custom header edits sometimes remove the input name or replace the submit button with JavaScript that never fires.

<form action="{{ routes.search_url }}" method="get" role="search">
  <input
    type="search"
    name="q"
    value="{{ search.terms | escape }}"
    placeholder="Search products"
    autocomplete="off">
  <button type="submit">Search</button>
</form>

In a real Shopify theme, keep Shopify's route helpers and make sure the input is inside the form. If you use a search drawer, verify the drawer contains the same valid form rather than a decorative input that depends entirely on JavaScript.

Debug Predictive Search Requests

Shopify's Predictive Search API can return products, collections, pages, articles, and query suggestions as shoppers type. When predictive search fails, open DevTools, type into the search box, and watch the Network tab for requests to /search/suggest.json or a locale-aware equivalent.

A healthy request returns JSON. A 404 often means the theme built the wrong URL. A 422 can mean the query parameters are malformed. A good response with no visible dropdown points back to rendering JavaScript or CSS.

const root = window.Shopify?.routes?.root || '/';
const url = root + 'search/suggest.json?q=' + encodeURIComponent(query)
  + '&resources[type]=product,collection';

const response = await fetch(url, { headers: { 'Accept': 'application/json' } });
const suggestions = await response.json();

Shopify's developer docs recommend locale-aware Ajax URLs, which matters for translated stores and Markets. If search only fails in one market or language, test the request path and available products in that market before editing the entire header.

Fix Mobile Search Drawers and Overlays

Mobile search failures are often visual. The search input opens behind the header, results appear under product images, or the shopper can type but cannot tap a result. Inspect the drawer after opening search and check z-index, pointer-events, overflow, and hidden parent containers.

Also test with popup apps, cookie banners, chat widgets, sticky announcement bars, and menu apps disabled in a duplicate theme. These tools can place invisible fixed elements above the search layer. For related header issues, use the Shopify mobile menu debugging guide and cart drawer checklist.

.search-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow-y: auto;
  background: #fff;
}

.search-drawer [type="search"] {
  min-height: 44px;
}

Check Search & Discovery Settings Before Blaming the Theme

If the search bar submits but the results are poor or empty, open Shopify's Search & Discovery app. Check product availability, filters, synonym groups, product boosts, and whether combined listings or hidden products are changing what appears. The issue may be configuration rather than broken code.

For stores with large catalogs, search can also feel broken when collection filters and search filters overload the page. Pair this guide with the collection filter troubleshooting guide, collection page speed guide, and complete Shopify speed optimization guide.

If an old search app was removed, run the app leftovers cleanup checklist. Search apps often leave snippets in theme.liquid, header sections, or predictive search templates.

Manual Fix vs Thunder Fix

For larger performance projects, compare Thunder pricing with professional Shopify speed optimization.

FAQ