Le bouton Ajouter au panier de Shopify ne fonctionne pas : correctifs de variantes, d'applications et de thèmes (2026)

Solution rapide : gardez les pages de produits réactives pendant le débogage

Commencez par le mode de défaillance exact

« L'ajout au panier ne fonctionne pas » peut signifier cinq choses différentes. Le bouton pourrait ne pas répondre. Cela pourrait afficher un spinner pour toujours. Cela pourrait ajouter la mauvaise variante. Une erreur peut s'afficher uniquement après avoir modifié la taille. Ou il peut ajouter l'article mais ne pas mettre à jour le tiroir du panier.

Ouvrez la page produit en mode navigation privée, choisissez un produit simple en stock et regardez DevTools en cliquant. Si aucune requête n’est déclenchée, le gestionnaire de clics ou le formulaire est défectueux. Si /cart/add.js renvoie un 400, la charge utile n'est pas valide. Si la demande aboutit mais que l'interface utilisateur du panier ne se met pas à jour, lisez le Guide de non-ouverture du tiroir du panier Shopify.

Si les acheteurs peuvent ajouter au panier mais n'achètent pas, continuez avec ajouter au panier mais pas de vente Trafic et mais pas de ventes Diagnostic .

Vérifiez les identifiants de variantes avant de blâmer le paiement

Un formulaire de produit doit soumettre un identifiant de variante valide. Lorsqu'un acheteur change de taille ou de couleur, le message caché L'entrée doit être mise à jour. S'il reste bloqué sur la première variante, l'ajout au panier peut échouer pour les variantes épuisées, ajouter la mauvaise option ou renvoyer une demande invalide.

<form method="post" action="/cart/add" data-product-form>
  <input type="hidden" name="id" value="{{ selected_or_first_available_variant.id }}">
  <input type="number" name="quantity" value="1" min="1">
  <button type="submit">Ajouter au panier</button>
</form>

Dans le contenu Astro, cet exemple Liquid est affiché sous forme de code. Dans votre thème Shopify, assurez-vous que la valeur est mise à jour lorsque la variante sélectionnée change. Ajoutez un journal de console temporaire si nécessaire :

document.addEventListener('variant:change', (event) => {
  const input = document.querySelector('[data-product-form] input[name="id"]');
  if (input && event.detail?.variant?.id) {
    input.value = event.detail.variant.id;
    console.log('Selected variant', input.value);
  }
});

Balisage du formulaire de produit d'audit et champs obligatoires

Les thèmes personnalisés interrompent souvent l'ajout au panier lors du déplacement des boutons vers des barres collantes, des accordéons de produits ou des sections de création de pages. Le bouton doit être à l'intérieur du formulaire correct ou explicitement lié à celui-ci avec un Formulaire Attribut . Les champs de personnalisation obligatoires doivent avoir des valeurs avant la soumission.

Vérifiez également l'inventaire et les plans de vente. Les produits par abonnement, les applications en précommande, les offres groupées et les options personnalisées peuvent nécessiter un identifiant de plan de vente ou des propriétés d'élément de campagne. Si le widget de l'application se charge lentement ou plante, le bouton natif peut soumettre une demande de panier incomplète.

Pour les performances de la page produit, utilisez le Liste de contrôle d'optimisation des vidéos de produits , , et guide complet d'optimisation de la vitesse Shopify.

Rechercher les conflits JavaScript et d'applications

A single uncaught JavaScript error can stop the add-to-cart handler from binding. Look for red console errors before the click and immediately after the click. Then disable recently added apps in a duplicate theme: subscriptions, bundles, size charts, personalization, reviews, sticky carts, urgency timers, and pixels.

Si le problème disparaît lorsque les intégrations d'applications sont désactivées, réactivez-les une à la fois. L’ancien code compte aussi. Une application supprimée peut laisser des extraits de code thème.liquide, modèles de produits ou sections de panier. Utilisez le Guide de correction du script d'application et .

Les taps lents constituent un mode de défaillance distinct. Google Documentation INP explique pourquoi une interaction retardée semble toujours interrompue. Thunder peut gérer la couche de vitesse automatisée, et le Guide de correction de Shopify INP Guide des auditeurs d'événements passifs montre l'itinéraire manuel le plus profond.

Manuel Shopify Ajouter au panier Liste de contrôle de débogage

Si vous avez besoin d'une correction plus rapide que le débogage manuel, comparez Tarification Thunder avec services personnalisés d'optimisation de la vitesse Shopify.

FAQ