> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajouter ou mettre à jour une icône de cadenas sur votre bouton de paiement Upcart

<div id="introduction">
  # Introduction
</div>

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 !

<div id="getting-started-choose-a-lock-icon">
  ## Premiers pas : choisir une icône de cadenas
</div>

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.

<div id="here-are-lock-icons-we-have-available-for-you-to-select">
  ### Voici les icônes de cadenas que nous mettons à votre disposition :
</div>

HTML à ajouter :

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-white-solid-padlock.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=f503e3fad5399209c5a0147ee33be3da" alt="Icône de cadenas blanc plein à côté du texte Checkout sur un bouton sombre" width="200" data-path="images/upcart/checkout-lock-icon-white-solid-padlock.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/WhiteLock2.png?v=1683833338">
```

HTML à ajouter :

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-white-outline-padlock.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=ddc6bcd1c3d225dc819b17365b635501" alt="Icône de cadenas blanc en contour à côté du texte Checkout sur un bouton sombre" width="200" data-path="images/upcart/checkout-lock-icon-white-outline-padlock.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/Lock_White_4.png?v=1688577328">
```

HTML à ajouter :

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-white-padlock-keyhole.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=d21c4115964effe775c7560097e81d0d" alt="Cadenas blanc en contour avec trou de serrure à côté de Checkout sur un bouton sombre" width="200" data-path="images/upcart/checkout-lock-icon-white-padlock-keyhole.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/lock_icon_635ba3ed-7ec3-437e-8dce-cf53291aceb1.png?v=1681161869">
```

HTML à ajouter :

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-black-solid-padlock.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=e3338e8e88fe2167e33b2358311333ed" alt="Icône de cadenas noir plein à côté du texte Checkout sur un bouton bleu clair" width="200" data-path="images/upcart/checkout-lock-icon-black-solid-padlock.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/image_4.png?v=1694188629">
```

HTML à ajouter :

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-black-padlock-keyhole.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=3fe4792f993cd6480529b9222b071008" alt="Cadenas noir avec trou de serrure à côté de Checkout sur un bouton bleu clair" width="200" data-path="images/upcart/checkout-lock-icon-black-padlock-keyhole.png" />

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<img class="upcart-custom-lock-icon" src="https://cdn.shopify.com/s/files/1/0591/9670/2877/files/lock_icon_Black.png?v=1681162020">
```

<div id="placing-the-lock-icon">
  ## Placer l'icône de cadenas :
</div>

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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/checkout-lock-icon-button-copy-editor.gif?s=f19a8a94edb2380d2996fb44104397ac" alt="Modification du texte du bouton de paiement dans Upcart pour placer l'icône de cadenas" width="1016" height="1080" data-path="images/upcart/checkout-lock-icon-button-copy-editor.gif" />

<div id="accessing-custom-css-settings">
  ## **Accéder aux paramètres Custom CSS**
</div>

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 »**.

<div id="applying-custom-css-to-show-the-lock-icon">
  ### **Appliquer du CSS personnalisé pour afficher l'icône de cadenas :**
</div>

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

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.upcart-custom-lock-icon {  
  height: 12px;   
  margin-right: 6px;   
}   
  
.upcart-checkout-button {   
  display: flex !important;  
  align-items: center;   
  justify-content: center;   
}
```

<div id="conclusion">
  ## **Conclusion**
</div>

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.

<div id="still-need-help">
  ## Besoin d'aide supplémentaire ?
</div>

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](https://www.shopify.com/partners/directory)
