Skip to main content

Aperçu

Cette fonctionnalité vous permet d’afficher les options de paiement express de Shopify (telles que Shop Pay, Apple Pay ou Google Pay) pour une expérience de paiement plus rapide utilisant les moyens de paiement enregistrés de l’acheteur. Les boutons de paiement express ou accéléré aident les clients récurrents à finaliser leurs achats plus rapidement en évitant la saisie manuelle des informations de paiement et de livraison. Ces boutons apparaissent sous le bouton Checkout principal dans le panier et sont pilotés par Shopify. Upcart prend en charge ces boutons visuellement et structurellement, mais Shopify contrôle leur comportement et leur visibilité. 📘 En savoir plus dans la documentation Shopify sur les paiements accélérés et les notes de version Shopify sur les boutons de paiement accéléré. Boutons express Shop Pay, PayPal et Google Pay sous le bouton de paiement Upcart

Faire apparaître les paiements express

Pour afficher les boutons de paiement accéléré dans Upcart, votre thème Shopify doit déjà les inclure sur la boutique en ligne. Vous pouvez le faire en :
  1. Ajoutant un extrait à votre code de thème
    • Allez dans Online Store > Themes > Edit Code
    • Ouvrez le fichier layout/theme.liquid
    • Trouvez la balise d’ouverture <body> (et non </body>)
    • Sous cette balise, collez le code suivant :
  2. Enregistrez le fichier
Voici un exemple de ce à quoi cela devrait ressembler : L'extrait Liquid des boutons de paiement supplémentaires ajouté sous la balise body dans theme.liquid Une fois cela fait, Upcart pourra détecter et afficher vos options de paiement express. 💡 Si vous préférez ne pas modifier le code, contactez votre développeur ou un Shopify Expert.

Passerelles de paiement

La carte Payment gateways appartient à la version héritée du module de paiements express — vous ne la voyez que si votre boutique utilise encore l’ancienne version. Elle liste les passerelles express qu’Upcart peut afficher dans le panier et vous permet d’activer ou de désactiver chacune d’elles et de définir leur ordre d’affichage. Six passerelles sont listées :
  • Shop Pay
  • PayPal
  • Apple Pay
  • Amazon Pay
  • Meta Pay
  • Google Pay — listée mais marquée Coming Soon et non sélectionnable
Google Pay est délibérément mise de côté : elle ne se rafraîchit pas lorsque le panier change et afficherait donc un prix obsolète à quiconque modifie son panier avant de cliquer dessus. Les cinq autres peuvent être activées et réorganisées — les passerelles activées figurent dans une liste ordonnée, utilisez les flèches haut et bas à côté de chaque ligne pour changer l’ordre, et les passerelles désactivées se trouvent en dessous, où un clic les réintègre.
Activer une passerelle ici ne garantit pas son affichage. Une passerelle est masquée dans le panier réel si elle n’est pas activée sur votre boutique Shopify, ou si l’acheteur n’y est pas éligible — un bouton Apple Pay, par exemple, ne s’affiche que sur un appareil et un navigateur pris en charge. Consultez la documentation Shopify sur les paiements accélérés pour savoir comment activer les passerelles et connaître les règles d’éligibilité de chacune.

Design des boutons de paiement accéléré

Une fois vos boutons configurés, vous pouvez personnaliser leur apparence dans Upcart.

Hauteur des boutons

  • Default button height et Mobile button height se définissent séparément, chacun de 25 px à 55 px
  • Chacun dispose d’un champ numérique et d’un curseur reliés à la même valeur — utilisez celui qui vous convient le mieux

Alignement du bouton de paiement

  • Choisissez comment les boutons express sont alignés :
    • Left
    • Right
    • Center
    • Space Between

Espacement des lignes

  • Définissez l’espacement vertical entre les boutons empilés, de 0 px à 40 px

Options d’affichage avancées

Lorsqu’elle est activée, cette option masque le message de consentement de l’acheteur habituellement affiché lorsqu’un produit avec abonnement se trouve dans le panier. Elle peut aider à réduire l’encombrement visuel si vous fournissez déjà les informations connexes ailleurs.

Afficher le panier dans le Shadow DOM

Activez cette option pour empêcher le CSS de votre thème Shopify d’interférer avec le style d’Upcart.
Cela garantit un design cohérent sur tous les navigateurs et appareils.
L’activer applique également le même paramètre depuis Settings > Cart settings > Advanced Settings.

Remarques sur la compatibilité des thèmes

  • Shopify applique désormais des règles de style strictes pour les boutons de paiement accéléré.
  • La nouvelle version d’Upcart prend entièrement en charge ces règles et suivra le comportement de style de Shopify.
⚠️ Sur le module actuel, une bannière Revert To Old Version apparaît en haut avec un bouton Revert To Legacy Express Payments. Elle n’est nécessaire que pour les thèmes obsolètes — revenir en arrière vous ramène au comportement antérieur aux règles de style de Shopify, alors n’y touchez pas à moins que votre thème ne l’exige vraiment. Si vous revenez à l’ancienne version, décochez toutes les options de style enregistrées du module précédent pour qu’elles n’interfèrent pas avec la nouvelle version.