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 ajouter une icône personnalisée, téléversez-la dans la section Files de votre boutique Shopify sous Settings > Files, puis copiez l’URL et collez-la dans le champ d’icône dans Upcart.

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

HTML à ajouter :
HTML à ajouter :
HTML à ajouter :
HTML à ajouter :
HTML à ajouter :

​
Placer l’icône de cadenas :

Après avoir choisi l’icône de cadenas, accédez à Manage All Carts > Edit > Settings > More Settings > Edit Copy. 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.

​
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. Cliquez sur Settings et faites défiler jusqu’en bas de la page jusqu’à trouver la section intitulée « Custom CSS ».

​
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