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

# Corriger les flèches de carrousel manquantes dans le module d'upsell V1.0 d'Upcart

> Cet article explique comment corriger les flèches de carrousel manquantes sur la boutique en ligne alors qu'elles apparaissent dans l'aperçu de l'éditeur.

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

Si vous rencontrez un problème où les flèches de carrousel sont manquantes dans le module d'upsell d'Upcart, cela est généralement dû à un problème de compatibilité avec le thème de votre boutique.

Pour y remédier, vous pouvez ajouter manuellement les flèches en appliquant une personnalisation à l'aide de HTML personnalisé dans les paramètres de l'éditeur d'Upcart.

**Pour accéder aux champs de code personnalisé dans Upcart :**

**Cart Editor** > **Settings**, puis les onglets **Custom HTML** et **Custom CSS**. Settings est une rangée d'onglets — tout ce qui ne rentre pas se trouve derrière **More settings**.

***

<div id="html">
  ## HTML
</div>

Pour cette correction, ouvrez le menu déroulant HTML et sélectionnez **« Scripts (before load) »**, puis collez le code suivant dans cette section :

```
<script>
  window.upcartSubscribeCartOpened(() => {
    setTimeout(() => {
      // The cart may render inside a shadow root, where document.querySelector
      // cannot reach it. Search the shadow root when there is one.
      const host = document.getElementById('upCart');
      const scope = host?.shadowRoot ?? document;

      const buttonLeft = scope.querySelector('.control-arrow.control-prev');
      if (buttonLeft) buttonLeft.innerText = "<";

      const buttonRight = scope.querySelector('.control-arrow.control-next');
      if (buttonRight) buttonRight.innerText = ">";
    }, 300);
  });
</script>
```

<Warning>
  **N'utilisez pas un simple `document.querySelector` ici.** Upcart s'affiche dans un shadow root sur la plupart des boutiques (c'est le comportement par défaut pour les installations récentes), et `document.querySelector` ne peut pas voir à l'intérieur — le script ne trouverait rien et, sans les gardes `if`, générerait une erreur sur `null`. La ligne `host?.shadowRoot ?? document` ci-dessus fonctionne dans les deux cas.
</Warning>

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

Voici à quoi devraient ressembler vos paramètres HTML personnalisés dans Upcart :

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/upsell-carousel-arrows-custom-html-script.gif?s=56a99321312a0b59c77d3ce059a72dbb" alt="Paramètres Custom HTML d'Upcart avec le script des flèches de carrousel dans Scripts Before Load" width="2052" height="1080" data-path="images/upcart/upsell-carousel-arrows-custom-html-script.gif" />

<div id="css">
  ## CSS
</div>

Si vous rencontrez toujours des problèmes avec la position des flèches de carrousel, essayez d'appliquer la correction CSS suivante :

```
.carousel.carousel-slider .control-next {  
  right: -34px !important;  
}
```

***

<div id="explanation">
  ## Explication
</div>

Nous utilisons souvent des pseudo-éléments CSS (`::before`) contenus à l'intérieur des boutons pour afficher les flèches de carrousel. Cependant, certains thèmes de boutique choisissent de bloquer le rendu des pseudo-éléments, ce qui fait disparaître les flèches de carrousel du tiroir de panier.

Cela crée un problème où les flèches du carrousel d'upsell apparaissent correctement dans l'aperçu de l'éditeur mais pas sur la boutique en ligne réelle.