Élément de bouton de paiement dynamique

À propos du bouton de paiement dynamique

Le Bouton de paiement dynamique sert d'alternative au bouton « Ajouter au panier », permettant aux clients de contourner l'étape du panier et d'effectuer des achats directs.

Lorsque le bouton de paiement dynamique est placé à l'intérieur d'un Module produit, il utilise seul le produit et la variante sélectionnés dans ce module pour commencer le paiement.

Dans la pratique, cela signifie:

• Les clients ne peuvent acheter qu'une seule variante sélectionnée du produit.
• Lorsque l'on clique sur le bouton, le système n'utilise pas du tout le panier.
• Tous les produits précédemment ajoutés au panier sont complètement ignorés et supprimés du processus de paiement.
• Les clients sont redirigés directement vers la page de paiement Shopify avec uniquement la variante de produit sélectionnée dans le module Produit actuel.

Par exemple, si un client a déjà ajouté le produit A à son panier, puis consulte un autre produit et clique sur le bouton de paiement dynamique, seul le produit affiché dans le module « Produit » actuel apparaîtra lors du paiement. Le produit A ne sera pas inclus.

Deux principaux types de boutons de paiement dynamiques

Bouton de marque

Des boutons personnalisés apparaissent lorsque les méthodes de paiement accélérées tierces prises en charge par Shopify sont activées dans votre boutique. Ces boutons affichent les logos officiels des fournisseurs, permettant aux clients de reconnaître et de finaliser plus facilement leur commande avec leur service préféré.

Les fournisseurs pris en charge incluent :

• Amazon Pay
• Apple Pay
• Google Pay
• PayPal
• Boutique Pay
• Venmo

Si vous voyez un Boutique Pay, Apple Pay, ou un bouton de marque similaire sur votre page en ligne, il s'agit du bouton de paiement dynamique qui affiche automatiquement la méthode de paiement accélérée disponible pour le client.

Pour plus d'informations, vous pouvez consulter ceci Article sur Shopify.

Bouton sans marque 

Les boutons sans marque affichent le texte "Achetez-le maintenant" Lorsqu'aucune passerelle de paiement n'est activée, un client clique sur le lien pour ignorer le panier et accéder directement à la page de paiement Shopify.

L'affichage des boutons sans marque peut varier en fonction de plusieurs facteurs, tels que :

• Paramètres de paiement dans votre interface administrateur Shopify
• Appareil et navigateur du client
• Historique de paiement précédent du client

Ajoutez un élément de bouton de paiement dynamique à votre page

Pour ajouter le bouton de paiement dynamique à votre page, veuillez suivre ces étapes :

Étape 1: Aller sur le site web de Tableau de bord GemPages > Pages et sélectionnez la page sur laquelle vous souhaitez travailler pour entrer dans l'éditeur.

Étape 2 : Dans la barre latérale gauche, entrez Paiement dynamique dans la barre de recherche, puis faites glisser et déposez l'élément dans un Module produit, en le plaçant à l'endroit de votre choix.

Étape 3 : Cliquez sur l'élément pour ouvrir ses paramètres. Vous pourrez ensuite le personnaliser à votre guise dans la section Paramètres Avancé onglets.

Configurer l'onglet Paramètres

Le Paramètres L'onglet vous propose une gamme d'options pour configurer et personnaliser le comportement et l'apparence du bouton de paiement dynamique.

Origine du produit

Comme cet élément est imbriqué dans le module Produit, la source du produit sera automatiquement synchronisée avec le module.

Cependant, si vous préférez un autre produit, cliquez sur le produit actuel pour le gérer dans l'élément Produit.

Taille

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Taille section, ajustez la largeur, la hauteur et le remplissage du bouton :

• Largeur: Choisissez parmi les options du menu déroulant, notamment : Ajuster le contenu (Auto), Plein (100 %), Petit (100 px), Moyen (116 px) et Grand (132 px). Vous pouvez également saisir le pourcentage exact souhaité dans le champ.
• La taille: Personnalisez la hauteur ou sélectionnez parmi les options disponibles : Ajuster le contenu (Auto), Petit (28 px), Moyen (36 px) et Grand (44 px).
• Rembourrage: Cliquez sur la case « + Ajouter… » pour ouvrir le panneau des paramètres du remplissage. 

Présentation

GemPages vous permet de définir l'arrière-plan du bouton en choisissant une couleur ou en utilisant une image :

• Couleur : Ouvrez le panneau des paramètres pour sélectionner la couleur de votre bouton. Vous pouvez utiliser un fond uni ou dégradé.

• Image: Téléchargez une nouvelle image ou sélectionnez-en une dans votre galerie multimédia. Modifiez ensuite l'image selon vos préférences dans les paramètres.

Forme

Pour améliorer l'apparence du bouton, vous pouvez ajouter une forme, ajuster le rayon du coin et ajouter un effet d'ombre dans le Forme section:

• Frontière: Choisissez la couleur, l'épaisseur et le contour de la bordure (ligne, tiret ou point)

• Coin: Ajuster le rayon du coin de la bordure
  • Des valeurs plus élevées = des coins plus arrondis
  • 0 valeur = coins pointus et carrés
  • Vous pouvez lier ou dissocier les coins pour appliquer le même rayon à tous les côtés ou définir chaque coin individuellement.

Par exemple, nous avons défini le rayon du coin à 100 pour créer un aspect de bouton en forme de pilule.

• Shadow:Ajoutez de la profondeur à votre bouton en appliquant une ombre portée, ce qui fait ressortir le bouton et assure un aspect plus dynamique.

Texte

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Texte section, vous pouvez personnaliser le texte du bouton à votre façon. Cliquez sur Afficher plus pour voir tous les paramètres de texte.

Effect

Ajoutez ensuite un effet de survol à votre bouton. Personnalisez l'apparence du bouton lorsque les visiteurs le survolent.

Aligner

Si la largeur de votre bouton est inférieure à 100 %, vous pouvez modifier l'alignement du bouton : aligné à gauche, aligné au centre ou aligné à droite.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Avancé onglet et suivez les instructions dans cet article.

Vous pouvez également trouver d'autres conseils utiles et des didacticiels vidéo sur Académie GemPages.

FAQ concernant le bouton de paiement dynamique

1. Quelle est la différence entre « Ajouter au panier » (rediriger vers la page de paiement) et le bouton de paiement dynamique ?

Les deux boutons Passer le panier de différentes manières.

• Ajouter au panier → Rediriger vers la page de paiement Le panier est toujours utilisé. Seule la page du panier est ignorée visuellement ; tous les articles du panier sont donc inclus dans la commande.
• Bouton de paiement dynamique Cette fonction ignore complètement le panier. Elle envoie directement à la page de paiement uniquement le produit affiché dans le module Produit actuel et ignore tous les autres articles du panier.

Exemple :

Un acheteur a déjà ajouté Produit A au panier.
Ils vont ensuite à produit B Cliquez ensuite sur le bouton d'appel à l'action pour accéder à la page de paiement.

• Si la page utilise Ajouter au panier → Paiement, le produit A et le produit B apparaîtra sur la page de paiement.
• Si la page utilise le Bouton de paiement dynamique, Produit B uniquement apparaîtra au moment du paiement. Le produit A est ignoré et n'est pas inclus.

2. Quelle est la différence entre un bouton de paiement dynamique de marque et un bouton de paiement dynamique sans marque ?

• Boutons de marque Afficher les logos officiels des systèmes de paiement (Shop Pay, Apple Pay, PayPal, etc.) lorsque ces passerelles de paiement sont activées dans votre boutique Shopify.
• Boutons sans marque afficher le texte "Achetez-le maintenant" lorsque aucune méthode de paiement accélérée n'est disponible.

3. Où dois-je placer le bouton de paiement dynamique dans ma mise en page ?

Le Bouton de paiement dynamique doit être imbriqué dans un Module produit Pour que cela fonctionne correctement, si vous n'avez pas encore d'élément Produit sur votre page, ajoutez-en un, puis glissez-déposez le bouton à l'intérieur.

4. Puis-je personnaliser le style et la taille du bouton de paiement dynamique ?

Oui. Vous pouvez régler le largeur, hauteur, marge intérieure, couleur de fond, rayon des coins et ombre sous l'onglet Paramètres. Pour ajouter des animations au survol ou des effets avancés, ouvrez le Onglet Avancé pour des options de personnalisation plus détaillées.

5. Pourquoi le bouton « Payer en magasin » apparaît-il au lieu du bouton « Ajouter au panier » ?

Cela se produit lorsque le Bouton de paiement dynamique est actif. Ensuite, Shopify affiche automatiquement un processus de paiement accéléré personnalisé (comme Boutique Pay or Apple Pay) à la place du bouton standard Ajouter au panier.

Pour afficher uniquement « Ajouter au panier », désactivez Boutique Pay sous Paramètres Shopify › Paiements › Paiements accélérés ou supprimez l'élément Bouton de paiement dynamique de votre mise en page GemPages.