Le tiroir du panier Shopify ne s'ouvre pas : correctifs AJAX, thèmes et applications (2026)

Solution rapide : réduire la pression des scripts autour du panier

Identifiez d'abord quel chemin de panier échoue

Ne commencez pas par éditer Liquid. Reproduisez le problème à quatre endroits : page du produit, grille de collection, produit vedette de la page d'accueil et modal d'affichage rapide. De nombreuses boutiques Shopify ont un code d'ajout au panier distinct pour chaque surface. Le tiroir peut travailler sur le modèle de produit tandis que les cartes de collecte sont toujours publiées directement sur la page du panier.

Ouvrez DevTools, cliquez sur Ajouter au panier et regardez l'onglet Réseau. Un flux AJAX sain publie généralement sur /cart/add.js, obtient une réponse positive, récupère les sections de panier mises à jour ou /cart.js, et ouvre le tiroir. Une redirection vers /cart signifie que le formulaire utilise une soumission HTML normale ou que le gestionnaire AJAX ne s'est pas joint.

Si l'ajout au panier fonctionne mais que les achats disparaissent toujours plus tard, comparez-le avec le Shopify ajouter au panier mais pas de liste de contrôle de vente Guide de débogage du bouton de paiement et le .

Vérifiez les paramètres du panier de thème avant de toucher le code

Dans de nombreux thèmes de la boutique en ligne 2.0, le tiroir est contrôlé par un paramètre de thème. Accédez à Boutique en ligne, Personnaliser, Paramètres du thème, Panier, puis confirmez que le type de panier est défini sur tiroir ou notification au lieu de page. Enregistrez, prévisualisez et testez dans une fenêtre de navigation privée.

Ensuite, dupliquez le thème live et prévisualisez un thème Dawn non modifié. Si Dawn ouvre le tiroir et que votre thème en direct ne le fait pas, le problème vient du code du thème ou d'une application de vitrine installée. Si Dawn redirige également vers le panier, recherchez les paramètres, la disponibilité du produit ou un bouton de création de page qui redirige intentionnellement.

Les magasins qui ont installé et supprimé plusieurs outils de panier doivent également exécuter le Liste de contrôle de nettoyage des restes d'application. Les anciens extraits peuvent continuer à écouter les événements du panier longtemps après la disparition de l'application.

Correction du flux d'ajout au panier et d'actualisation du tiroir AJAX

Un tiroir nécessite deux tâches distinctes : ajouter l'élément, puis restituer le tiroir mis à jour. Les développeurs corrigent souvent le premier travail et oublient le second. Le résultat est un nombre de paniers qui ne change qu'après l'actualisation, un tiroir qui s'ouvre vide ou une fiche produit qui renvoie les acheteurs vers la page du panier.

async function addToCart(form) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    body: new FormData(form),
    headers: { Accept: 'application/json' },
  });

  if (!response.ok) throw new Error('Add to cart failed');

  const cart = await fetch('/cart.js').then((res) => res.json());
  document.dispatchEvent(new CustomEvent('cart:refresh', { detail: { cart } }));
  document.dispatchEvent(new CustomEvent('cart:open'));
}

Votre thème peut utiliser différents noms d'événements. Les thèmes basés sur Dawn ont souvent leur propre notification de panier ou classe de tiroir de panier. Recherchez votre thème pour panier :actualiser Panier, :ouvert, chariot-tiroir, notification de panier, et /cart/add.js, puis conservez un chemin d'événement cohérent.

Les constructeurs de pages et les intégrations d'applications peuvent contourner le tiroir

GemPages, PageFly, les pages de destination personnalisées, les sections d'achat rapide et les widgets groupés peuvent afficher leur propre bouton d'ajout au panier. Ces boutons peuvent être configurés pour rediriger vers le panier, ouvrir un mini panier ou appeler un script d'aide. Si seules les pages du générateur de pages échouent, corrigez d'abord le paramètre de l'élément avant de réécrire le code du thème.

Désactivez l'intégration de l'application dans un thème en double, puis testez à nouveau. Réactivez-les un par un, en commençant par les tiroirs du panier, les cadeaux gratuits, les offres groupées, les abonnements, les ventes incitatives, la recherche, la personnalisation, le chat et les pixels. Le même flux de débogage dans le Les scripts d'application ralentissent le guide Shopify s'applique ici.

Pour un nettoyage de script plus large, utilisez le Guide d'impact des scripts tiers, guide de nettoyage du code inutilisé, et guide complet d'optimisation de la vitesse Shopify.

Liste de contrôle manuelle de débogage du tiroir du panier Shopify

Google Interaction avec le guide Next Paint est utile ici car un tiroir de chariot retardé est souvent un problème de réactivité. Si les appels mobiles sont en retard, lisez le Guide Shopify INP et testez à nouveau après le nettoyage du script.

Lorsque le tiroir fait partie d'une fuite de revenus plus large, utilisez optimisation de la vitesse Shopify professionnelle ou Actifs Tarification Thunder pour décider si l'automatisation des applications ou le nettoyage expert est la voie la plus rapide.

FAQ