La barra di ricerca di Shopify non funziona: correzioni di temi, app e ricerca predittiva (2026)

Correzione rapida con Thunder

Controlla innanzitutto il modulo di ricerca nativo di Shopify

Inizia con il test più semplice. Visita /search?q=test sulla tua vetrina. Se la pagina dei risultati di ricerca viene caricata, la ricerca di Shopify funziona automaticamente e il problema è probabilmente dovuto al modulo di intestazione, al cassetto di ricerca, all'app o al JavaScript del tema. Se anche la pagina dei risultati è danneggiata, confronta il tuo tema live con una nuova anteprima di Dawn.

Un modulo di ricerca Shopify di base dovrebbe inviare una richiesta GET /search con un input denominato q. Le modifiche personalizzate dell'intestazione a volte rimuovono il nome immesso o sostituiscono il pulsante di invio con JavaScript che non si attiva mai.

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

In un vero tema Shopify, mantieni gli helper del percorso di Shopify e assicurati che l'input sia all'interno del modulo. Se utilizzi un cassetto di ricerca, verifica che contenga lo stesso modulo valido anziché un input decorativo che dipende interamente da JavaScript.

Debug delle richieste di ricerca predittiva

L'API Predictive Search di Shopify può restituire prodotti, raccolte, pagine, articoli e suggerimenti di query in base al tipo di acquirenti. Quando la ricerca predittiva fallisce, apri DevTools, digita nella casella di ricerca e controlla le richieste nella scheda Rete /search/suggest.json o un equivalente compatibile con la locale.

Una richiesta integra restituisce JSON. Un 404 spesso significa che il tema ha creato l'URL sbagliato. Un 422 può significare che i parametri della query non sono corretti. Una buona risposta senza menu a discesa visibile rimanda al rendering di JavaScript o 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();

I documenti per gli sviluppatori di Shopify consigliano URL Ajax compatibili con le impostazioni locali, che sono importanti per i negozi e i mercati tradotti. Se la ricerca fallisce solo in un mercato o in una lingua, testa il percorso della richiesta e i prodotti disponibili in quel mercato prima di modificare l'intera intestazione.

Correggi i cassetti e gli overlay di ricerca mobile

Gli errori di ricerca mobile sono spesso visivi. L'input di ricerca si apre dietro l'intestazione, i risultati vengono visualizzati sotto le immagini del prodotto oppure l'acquirente può digitare ma non può toccare un risultato. Ispezionare il cassetto dopo aver aperto la ricerca e controllare z-indice, eventi puntatore, traboccamentoe contenitori principali nascosti.

Prova anche con app popup, banner di cookie, widget di chat, barre di annunci permanenti e app di menu disabilitate in un tema duplicato. Questi strumenti possono posizionare elementi fissi invisibili sopra il livello di ricerca. Per problemi di intestazione correlati, utilizzare il file Guida al debug del menu mobile di Shopify e Lista di controllo del cassetto del carrello.

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

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

Controlla le impostazioni di ricerca e rilevamento prima di incolpare il tema

Se la barra di ricerca invia ma i risultati sono scadenti o vuoti, apri l'app Search & Discovery di Shopify. Controlla la disponibilità dei prodotti, i filtri, i gruppi di sinonimi, i potenziamenti dei prodotti e se elenchi combinati o prodotti nascosti stanno modificando ciò che appare. Il problema potrebbe essere la configurazione piuttosto che il codice non funzionante.

Per i negozi con cataloghi di grandi dimensioni, la ricerca può anche sembrare interrotta quando i filtri di raccolta e di ricerca sovraccaricano la pagina. Abbina questa guida al Guida alla risoluzione dei problemi del filtro di raccolta , guida rapida alla pagina di raccoltae guida completa all'ottimizzazione della velocità di Shopify.

Se una vecchia app di ricerca è stata rimossa, esegui il file Elenco di controllo per la pulizia degli avanzi dell'app. Le app di ricerca spesso lasciano degli snippet tema.liquid, sezioni di intestazione o modelli di ricerca predittiva.

Correzione manuale vs. Correzione Thunder

Per progetti con prestazioni più grandi, confrontare Prezzi tempestosi con Ottimizzazione della velocità professionale di Shopify.

FAQ