Skip to main content
⚠️ Avis important L’extrait de thème ci-dessous s’applique aux deux versions des modules de panier Upcart — il fait en sorte que Shopify affiche les boutons de paiement accéléré sur la page, ce dont Upcart a besoin quelle que soit la version du module. Le sélecteur .additional-checkout-buttons ci-dessous est la classe propre à Shopify sur le conteneur de paiement accéléré, et non une classe de module Upcart, il est donc identique sur l’une ou l’autre version du panier.

​
Aperçu

Il arrive que les boutons de paiement express ne soient pas cliquables ou n’apparaissent pas dans Upcart. C’est un problème courant causé par la façon dont Shopify contrôle le rendu des boutons de paiement express dans les thèmes. Ce guide explique pourquoi cela se produit et ce que vous pouvez faire pour y remédier.

​
Configuration requise pour le nouveau module

⚠️ Important : Ces étapes s’appliquent au nouveau module Express Payments d’Upcart, et non à la version héritée. Pour que les boutons de paiement express fonctionnent correctement dans Upcart, vous devez ajouter un petit extrait de code à votre thème Shopify. Sans cet extrait, Shopify ne chargera pas correctement les boutons de paiement dans le tiroir de panier. Avant d’effectuer ces modifications, vérifiez que les méthodes de paiement pertinentes (par ex. Shop Pay, PayPal, Apple Pay, Google Pay) sont activées dans les paramètres de votre compte Shopify Admin. Sans l’activation de ces méthodes, les boutons ne seront pas visibles. De plus, assurez-vous que l’extrait est placé directement sous la balise d’ouverture <body> dans votre fichier de thème (par ex. <body class="...">). S’il est mal placé, par exemple après la balise de fermeture </body>, les boutons de paiement express risquent de ne pas fonctionner correctement.

​
Comment corriger

  1. Allez dans votre interface administrateur Shopify.
  2. Naviguez vers Online Store > Themes > Edit Code.
  3. Ouvrez layout/theme.liquid, trouvez la ligne <body> et ajoutez l’extrait ci-dessous sur une nouvelle ligne directement en dessous. Il doit être placé là — pas dans cart-drawer.liquid ni ailleurs — car les boutons doivent exister sur chaque page où le panier peut s’ouvrir.
  1. Enregistrez vos modifications et actualisez votre boutique en ligne.
  2. Rouvrez le tiroir de panier pour vérifier que les boutons de paiement express (tels que Shop Pay, PayPal, Apple Pay ou Google Pay) apparaissent désormais et sont cliquables.
Consultez le guide du module Express Payments pour les instructions de configuration complètes.

​
Pourquoi cela se produit

Les boutons de paiement express sont entièrement gérés par Shopify, et non par Upcart. Cela signifie que :
  • Upcart n’affiche pas ses propres boutons. Il clone les boutons de paiement accéléré de Shopify depuis la page vers le tiroir de panier, c’est pourquoi ils doivent être présents sur la page en premier lieu — c’est ce que garantit l’extrait de thème ci-dessus.
  • Apple Pay ne s’affichera que sur les appareils Apple où Apple Pay est configuré.
  • Upcart ne contrôle pas quels boutons express apparaissent, car le contenu et la fonctionnalité sont gérés par Shopify.
🎨 Remarque :
Les boutons dans Upcart agissent comme des conteneurs visuels, tandis que Shopify contrôle leur affichage et leur comportement. Upcart ne peut pas modifier leur apparence ou leur fonctionnement.

​
Problèmes courants et solutions

​
1. Les boutons ne sont pas affichés sur la page

C’est la cause la plus fréquente. Upcart clone les boutons de Shopify depuis la page, donc si la page ne les affiche pas, il n’y a rien à cloner et le panier affiche un espace vide. Que faire :
  • Ajoutez l’extrait de thème de la section Comment corriger ci-dessus, directement sous la ligne <body> dans layout/theme.liquid.
Ne supprimez pas les boutons express de votre thème pour « éviter un conflit ». Upcart dépend de leur présence. Les supprimer du thème, ou les désactiver dans les paramètres du thème, supprime la source depuis laquelle Upcart les clone — ce qui aggrave ce problème au lieu de l’améliorer.

​
3. Le CSS bloque les boutons

Certains thèmes masquent les boutons express par défaut à l’aide de CSS. Par exemple :
Que faire :
  • Vérifiez le CSS de votre thème.
  • Demandez au développeur de votre thème de s’assurer qu’aucune règle CSS ne masque ni ne désactive les boutons dans le tiroir Upcart.

​
4. Des paramètres hérités interfèrent

Si vous avez utilisé l’ancienne version du module Express Payments, des paramètres enregistrés peuvent entrer en conflit avec la nouvelle configuration. Que faire :
  • Ouvrez l’ancien module Express Payments (s’il est encore visible).
  • Décochez toutes les options précédentes et enregistrez.
  • Testez à nouveau en utilisant le nouveau module.

​
Vous rencontrez toujours des problèmes ?

​
Désactiver le Shadow DOM dans Upcart

Dans certains cas, les boutons de paiement express peuvent ne pas se charger ou se mettre à jour parce que le Shadow DOM est activé dans Upcart. Qu’est-ce que le Shadow DOM ?
Le Shadow DOM isole Upcart du reste du code de votre boutique afin d’améliorer la stabilité. Cependant, dans de rares cas, cette séparation peut empêcher les boutons express de Shopify de se mettre à jour correctement. Comment désactiver le Shadow DOM :
  1. Allez dans Upcart > Cart Editor > Settings > Cart settings, puis développez Advanced Settings.
  2. Décochez Render Cart in Shadow DOM.
  3. Enregistrez et testez à nouveau.
⚠️ Important :
Testez toujours votre panier après avoir désactivé le Shadow DOM, car cela peut affecter la façon dont d’autres applications ou éléments du thème interagissent avec Upcart. 💡 Remarque : Désactiver le Shadow DOM peut résoudre ce problème mais peut introduire des conflits CSS avec votre thème. Consultez la documentation sur le paramètre Shadow DOM pour connaître le compromis complet.

​
Besoin d’aide supplémentaire ?

Si le problème persiste après avoir suivi ces étapes :
  • Contactez le développeur de votre thème pour vous aider à supprimer le code ou les paramètres en conflit.
  • Vous pouvez également contacter un Shopify Expert pour des modifications de thème avancées ou une assistance à l’intégration.

​
Références

  • Aide Shopify – Paiements accélérés
  • Documentation développeur Shopify – Boutons de paiement express