La barre de recherche Shopify ne fonctionne pas : correctifs de thèmes, d'applications et de recherche prédictive (2026)

Solution rapide avec Thunder

Vérifiez d'abord le formulaire de recherche natif Shopify

Commencez par le test le plus simple. Visite /search?q=test sur votre vitrine. Si la page de résultats de recherche se charge, la recherche Shopify elle-même fonctionne et le problème vient probablement de votre formulaire d'en-tête, de votre tiroir de recherche, de votre application ou de votre thème JavaScript. Si la page de résultats est également cassée, comparez votre thème en direct avec un nouvel aperçu de Dawn.

Un formulaire de recherche Shopify de base doit soumettre une demande GET à /search avec une entrée nommée q. Les modifications d'en-tête personnalisées suppriment parfois le nom de l'entrée ou remplacent le bouton de soumission par du JavaScript qui ne se déclenche jamais.

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

Dans un vrai thème Shopify, conservez les assistants d'itinéraire de Shopify et assurez-vous que la saisie se trouve à l'intérieur du formulaire. Si vous utilisez un tiroir de recherche, vérifiez que le tiroir contient le même formulaire valide plutôt qu'une entrée décorative qui dépend entièrement de JavaScript.

Déboguer les requêtes de recherche prédictive

L'API de recherche prédictive de Shopify peut renvoyer des produits, des collections, des pages, des articles et des suggestions de requêtes selon la saisie des acheteurs. Lorsque la recherche prédictive échoue, ouvrez DevTools, tapez dans la zone de recherche et surveillez l'onglet Réseau pour les demandes de /search/suggest.json ou un équivalent compatible avec les paramètres régionaux.

Une requête saine renvoie JSON. Un 404 signifie souvent que le thème a créé la mauvaise URL. Un 422 peut signifier que les paramètres de la requête sont mal formés. Une bonne réponse sans liste déroulante visible renvoie au rendu JavaScript ou 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();

Les documents destinés aux développeurs de Shopify recommandent des URL Ajax tenant compte des paramètres régionaux, ce qui est important pour les magasins et les marchés traduits. Si la recherche échoue uniquement sur un marché ou une langue, testez le chemin de la demande et les produits disponibles sur ce marché avant de modifier l'intégralité de l'en-tête.

Correction des tiroirs et des superpositions de recherche mobile

Les échecs de recherche mobile sont souvent visuels. L'entrée de recherche s'ouvre derrière l'en-tête, les résultats apparaissent sous les images du produit ou l'acheteur peut taper mais ne peut pas appuyer sur un résultat. Inspectez le tiroir après avoir ouvert la recherche et vérifiez indice z, événements de pointeur, débordementet les conteneurs parents cachés.

Testez également avec les applications contextuelles, les bannières de cookies, les widgets de chat, les barres d'annonces collantes et les applications de menu désactivées dans un thème en double. Ces outils peuvent placer des éléments fixes invisibles au-dessus du calque de recherche. Pour les problèmes d'en-tête associés, utilisez le Guide de débogage du menu mobile Shopify Liste de contrôle du tiroir du chariot et .

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

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

Vérifiez les paramètres de recherche et de découverte avant de blâmer le thème

Si la barre de recherche est soumise mais que les résultats sont médiocres ou vides, ouvrez l'application Search & Discovery de Shopify. Vérifiez la disponibilité des produits, les filtres, les groupes de synonymes, les améliorations de produits et si les listes combinées ou les produits masqués modifient ce qui apparaît. Le problème peut être lié à la configuration plutôt qu'à un code défectueux.

Pour les magasins disposant de catalogues volumineux, la recherche peut également sembler interrompue lorsque les filtres de collection et les filtres de recherche surchargent la page. Associez ce guide au Guide de dépannage du filtre de collecte , , et guide complet d'optimisation de la vitesse Shopify.

Si une ancienne application de recherche a été supprimée, exécutez le Liste de contrôle de nettoyage des restes d'application. Les applications de recherche laissent souvent des extraits de code thème.liquide, sections d'en-tête ou modèles de recherche prédictive.

Correction manuelle vs Thunder Fix

Pour des projets de performances plus importants, comparez Tarification Thunder avec optimisation de la vitesse Shopify professionnelle.

FAQ