> ## 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.

# Premiers pas avec les personnalisations Upcart

> Apprenez à utiliser HTML, CSS et JavaScript pour créer des fonctionnalités et des styles personnalisés dans votre tiroir de panier.

⚠️ **Avis important**

L'exemple de personnalisation de ce document ne fonctionne qu'avec la V1.0 des modules de panier Upcart. Si vous avez récemment mis à niveau votre panier vers la version 2, ces codes de personnalisation ne fonctionneront pas. Vous devrez utiliser les nouveaux sélecteurs fournis pour la version 2 dans le [guide de migration.](/fr/upcart/upcart_v20_migration_guide)

Veuillez consulter les autres documentations de personnalisation pour les solutions V2.0.

<div id="overview">
  # Aperçu
</div>

Upcart vous donne un contrôle total pour modifier l'apparence et le comportement du panier à l'aide de **Custom HTML**, **Custom CSS** et **JavaScript**. Ces outils vous permettent d'ajouter de nouvelles fonctionnalités, de styliser votre panier pour qu'il corresponde à votre marque, ou d'introduire de la logique pour améliorer le fonctionnement de votre panier.

Ce guide couvre les bases de chacun et montre comment démarrer. Chaque section comprend un exemple visuel rapide pour vous aider à comprendre à quoi ressemblent les modifications en pratique.

***

Avant de commencer, assurez-vous de consulter [la politique de personnalisation d'Upcart](/fr/upcart/upcart_customization_policy) afin de savoir ce qui est pris en charge ou non par notre équipe.

<div id="add-content-with-html">
  ## Ajouter du contenu avec HTML
</div>

Le HTML est utilisé pour ajouter du contenu statique comme du texte, des bannières ou des boutons dans votre panier. Vous pouvez choisir parmi plusieurs emplacements HTML dans l'éditeur **Custom HTML** (par ex. au-dessus du bouton de paiement, en bas du panier, entre les articles).

Cas d'utilisation courants :

* Ajouter des messages personnalisés
* Insérer des mentions légales ou des liens vers des politiques
* Mettre en avant des dates limites d'expédition ou des informations de livraison

**Exemple :**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Éditeur Custom HTML d'Upcart ajoutant un message de remerciement au-dessus du bouton de paiement" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Ajouter de la logique avec JavaScript
</div>

JavaScript contrôle le comportement et la logique du panier. Vous pouvez l'utiliser pour afficher ou masquer des éléments, appliquer des styles de manière conditionnelle, ou réagir aux changements du panier en temps réel.

Vous devrez encadrer votre code dans une balise `<script>` et le placer dans **Custom HTML > Scripts (Before Load)** ou **Above Announcements**, selon le moment où il doit s'exécuter.

**Exemple : [Limiter le panier à un upsell à la fois](/fr/upcart/limit_the_cart_to_one_upsell_at_a_time) :**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **Note sur l'héritage :** les callbacks `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell` et `window.upcartOnCartLoaded` fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart` et `upcartSubscribeCartLoaded` pour tous les nouveaux scripts.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Éditeur Scripts Before Load de Custom HTML d'Upcart avec du JavaScript masquant le module d'upsells" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Note pour les développeurs :**\
Upcart fournit une [documentation complète de l'API publique](https://rokt.notion.site/upcart-public-api) qui liste toutes les fonctions, variables et bonnes pratiques disponibles pour les personnalisations avancées. Nous vous recommandons de la consulter lorsque vous créez des scripts ou des intégrations plus complexes.

***

<div id="style-your-cart-with-css">
  ## Styliser votre panier avec CSS
</div>

Le CSS contrôle l'apparence des éléments de votre panier. Utilisez-le pour ajuster les espacements, les couleurs, les tailles de police ou masquer des éléments indésirables. **Custom CSS** est l'un des onglets sous **Settings** (derrière **More settings** si la rangée d'onglets déborde).

Cas d'utilisation courants :

* Changer la couleur des titres de produit ou des boutons
* Ajuster la taille ou l'alignement de la police
* Ajouter de l'espacement entre les sections

**Exemple : Changer la couleur du titre d'upsell en V1.0 :**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Éditeur Custom CSS d'Upcart stylisant la couleur du titre d'upsell avec une confirmation de modifications enregistrées" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Ressources supplémentaires
</div>

Vous souhaitez améliorer vos compétences en HTML, CSS ou JavaScript ? Consultez ces outils gratuits :

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Support pour les personnalisations
</div>

L'équipe de support d'Upcart ne peut pas vous aider à implémenter du code personnalisé. Pour des modifications plus avancées, nous vous recommandons d'engager un [Shopify Expert](https://www.shopify.com/ca/partners/directory).