Skip to main content

​
Introduction

Ajouter une icône de cadenas à votre bouton de paiement est un moyen simple mais efficace de renforcer la confiance des clients en montrant que leurs informations de paiement sont sécurisées. Ce symbole familier rassure les clients quant à la protection de leurs données, les mettant plus à l’aise pendant le processus de paiement. Dans ce tutoriel, je vous guiderai sur la façon d’ajouter une icône de cadenas à votre bouton de paiement à l’aide de CSS, ce qui renforcera la sécurité et améliorera l’expérience utilisateur globale. Ces étapes sont parfaites pour les propriétaires de boutiques ou les développeurs ayant une compréhension de base du CSS. En ajoutant ce petit repère visuel percutant, vous pouvez harmoniser le bouton de paiement Upcart avec le design de votre site, contribuant ainsi à instaurer la confiance et à encourager les clients à finaliser leurs achats. C’est parti !

​
Premiers pas : choisir une icône de cadenas

Tout d’abord, vous devrez choisir une icône de cadenas à ajouter à votre boutique. Nous en proposons quelques-unes ci-dessous que vous pouvez utiliser, mais vous êtes libre d’utiliser la vôtre. Pour utiliser la vôtre, téléversez-la dans la section Files de votre boutique Shopify sous Settings > Files et copiez son URL. Il n’existe pas de champ d’icône dans Upcart pour le bouton de checkout. À la place, vous collez une balise d’image HTML dans le champ Checkout button text, qui interprète le HTML — prenez l’un des extraits ci-dessous et remplacez son src par votre propre URL.

​
Voici les icônes de cadenas que nous mettons à votre disposition :

HTML à ajouter : Icône de cadenas blanc plein à côté du texte Checkout sur un bouton sombre
HTML à ajouter : Icône de cadenas blanc en contour à côté du texte Checkout sur un bouton sombre
HTML à ajouter : Cadenas blanc en contour avec trou de serrure à côté de Checkout sur un bouton sombre
HTML à ajouter : Icône de cadenas noir plein à côté du texte Checkout sur un bouton bleu clair
HTML à ajouter : Cadenas noir avec trou de serrure à côté de Checkout sur un bouton bleu clair

​
Placer l’icône de cadenas :

Après avoir choisi l’icône de cadenas, accédez à Manage All Carts > Edit > Settings > Edit copy et repérez le champ Checkout button text. Vous pouvez la coller avant ou après le mot « Checkout ». C’est également à cet endroit que vous pouvez remplacer le mot « Checkout » par autre chose, comme « Secure Checkout » ou similaire. Modification du texte du bouton de paiement dans Upcart pour placer l'icône de cadenas

​
Accéder aux paramètres Custom CSS

Pour commencer à personnaliser le CSS de votre Upcart, suivez ces étapes :
  1. Ouvrez l’application Upcart dans votre tableau de bord.
  2. Accédez au Cart Editor.
  3. Ouvrez Settings et sélectionnez l’onglet Custom CSS. Settings est une rangée d’onglets plutôt qu’une longue page unique — si vous ne voyez pas Custom CSS, il se trouve derrière More settings.

​
Appliquer du CSS personnalisé pour afficher l’icône de cadenas :

Une fois dans la section Custom CSS, copiez et collez le code ci-dessous pour afficher et positionner votre icône de cadenas. Veuillez noter que plus la valeur de padding est grande, plus l’icône sera petite.
  1. Localisez la zone de saisie CSS.
  2. Copiez et collez le code suivant dans la zone de saisie CSS :
  3. Ajustez height sous .upcart-custom-lock-icon pour modifier la taille de l’icône. Nous recommandons 16px ou 20px pour une icône de cadenas plus grande

​
Conclusion

En suivant ces étapes, vous avez ajouté avec succès une icône de cadenas à votre bouton de paiement, ce qui permet à vos clients de se sentir plus en sécurité et plus confiants lors de leur achat. Ce petit changement peut faire une grande différence dans la perception de votre boutique, contribuant à instaurer la confiance et à améliorer l’expérience d’achat globale.

​
Besoin d’aide supplémentaire ?

Si vous avez besoin d’aide pour des personnalisations, nous vous recommandons de consulter un Shopify Expert pour l’ajout de HTML, de CSS et même de JavaScript à votre tiroir de panier. Voir les Shopify Experts