Bouton Ajouter au panier Shopify qui ne fonctionne pas : 7 solutions

Un bouton « Ajouter au panier » en panne est le bug le plus coûteux d'une boutique : aucun visiteur ne peut acheter, et rien ne vous prévient.

La bonne nouvelle, c'est que la cause est presque toujours l'une des sept ci-dessous. Le principe est de tester dans l'ordre, en changeant une seule chose à la fois, pour savoir exactement ce qui a réglé le problème.

Avant de commencer, notez précisément ce que vous voyez : le bouton est-il grisé, cliquable sans rien faire, ou remplacé par « Épuisé » ? Le symptôme oriente vers la bonne cause.

1Le produit est-il vraiment disponible ?

C'est la cause la plus banale, et celle qu'on oublie de vérifier. Un bouton grisé ou un « Épuisé » signifie souvent que Shopify considère la variante comme indisponible.

• Dans l'administration, ouvrez le produit et vérifiez le stock de chaque variante (une taille ou une couleur peut être à zéro alors que les autres sont disponibles).
• Si le stock est à zéro, regardez l'option « Continuer à vendre quand le produit est en rupture de stock » : décochée, elle bloque l'achat.
• Vérifiez que le produit est bien disponible sur le canal « Boutique en ligne » (bloc « Publication » à droite de la fiche produit).

2Une application interfère avec le bouton

Les applications de pop-up, de vente additionnelle, de personnalisation de produit ou de variantes modifient le fonctionnement du bouton. Une mise à jour d'application peut suffire à le casser du jour au lendemain.

• Repérez les applications installées récemment, ou mises à jour juste avant que le problème apparaisse.
• Désactivez-en une à la fois (dans le thème, section « Intégrations d'applications »), puis retestez après chacune.
• Une fois le coupable trouvé, contactez son support : une application qui casse le bouton est un vrai défaut de leur côté.

3Une variante n'est pas sélectionnée

Si la fiche propose plusieurs tailles ou couleurs sans en présélectionner aucune, le bouton peut rester inactif tant que le visiteur n'a rien choisi. Certains thèmes l'expliquent clairement, d'autres non, et le visiteur croit simplement que le bouton est cassé.

• Testez en choisissant explicitement chaque option, puis en cliquant.
• Vérifiez qu'aucune combinaison n'est manquante (par exemple « Bleu / M » qui n'existe pas alors que « Bleu » et « M » sont proposés).
• Sur un produit sans variante, la variante s'appelle « Default Title » : c'est normal, ne la supprimez pas.

4Une erreur JavaScript bloque le clic

Quand le bouton est cliquable mais ne fait rien, c'est très souvent une erreur de script. Elle peut venir d'une application, ou d'un bout de code ajouté à la main dans le thème.

• Ouvrez la fiche produit, appuyez sur F12 (ou clic droit, puis « Inspecter »), et allez dans l'onglet « Console ».
• Cliquez sur le bouton : si une ligne rouge apparaît, c'est le signe d'une erreur de script. Son nom cite généralement le fichier fautif.
• Si vous avez récemment collé un extrait de code dans le thème, retirez-le et retestez.

5Le thème lui-même est en cause

Pour savoir si le problème vient de votre thème ou de ce que vous y avez ajouté, comparez avec un thème neuf.

• Dans « Boutique en ligne », « Thèmes », ajoutez un thème gratuit de Shopify (Dawn, par exemple) sans le publier.
• Ouvrez son aperçu sur la même fiche produit et testez le bouton.
• Si le bouton fonctionne sur le thème neuf, le défaut vient de votre thème actuel ou d'une modification qu'il contient.

Avant de retoucher un thème existant, dupliquez-le : c'est la sauvegarde qui permet de revenir en arrière sans stress.

6Un problème de navigateur ou de cache

Il arrive que le bug n'existe que chez vous. Un ancien fichier gardé en mémoire par le navigateur peut afficher un comportement que vos clients ne voient pas, ou l'inverse.

• Testez en navigation privée, puis avec un autre navigateur.
• Testez depuis votre téléphone en 4G, sans le Wi-Fi de la maison.
• Si le bouton ne marche qu'avec un seul navigateur, cherchez une extension (bloqueur de publicité, par exemple) qui gêne l'affichage.

7Le produit n'est pas vendable là où se trouve le visiteur

Avec les marchés Shopify, un produit peut être disponible pour certains pays et pas pour d'autres. Un visiteur situé dans un pays non couvert voit parfois un bouton désactivé alors que vous, depuis la France, le voyez normalement.

• Dans « Paramètres », « Marchés », vérifiez que le produit est bien inclus dans chaque marché où vous voulez vendre.
• Vérifiez aussi que vous n'avez pas oublié un mot de passe de boutique actif (« Boutique en ligne », « Préférences »), qui bloque les visiteurs.

David : e-commerçant depuis 2009, sur Shopify depuis 2018, plus de 77 000 clients servis sur mes propres boutiques. Ces vérifications sont celles que j'applique sur mes propres boutiques.