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

# Correggere le frecce del carosello mancanti nel modulo upsell V1.0 di Upcart

> Questo articolo spiega come correggere le frecce del carosello mancanti sul negozio live quando appaiono nell'anteprima dell'editor.

<div id="overview">
  # Panoramica
</div>

Se stai riscontrando un problema per cui le frecce del carosello mancano nel modulo upsell di Upcart, di solito è dovuto a un problema di compatibilità con il tema del tuo negozio.

Per risolverlo, puoi aggiungere manualmente le frecce applicando una personalizzazione con HTML personalizzato nelle impostazioni dell'editor di Upcart.

**Per accedere ai campi di codice personalizzato in Upcart:**

**Cart Editor** > **Settings**, poi le schede **Custom HTML** e **Custom CSS**. Settings è una fila di schede — tutto ciò che non ci sta si trova dietro **More settings**.

***

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

Per questa correzione, apri il menu a tendina HTML e seleziona **"Scripts (before load)"**, poi incolla il seguente codice in quella sezione:

```
<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>
  **Non usare un semplice `document.querySelector` qui.** Upcart viene renderizzato all'interno di uno shadow root sulla maggior parte dei negozi (è l'impostazione predefinita per le installazioni più recenti) e `document.querySelector` non può vedere al suo interno — lo script non troverebbe nulla e, senza le protezioni `if`, genererebbe un errore su `null`. La riga `host?.shadowRoot ?? document` qui sopra funziona in entrambi i casi.
</Warning>

<Note>
  **Nota legacy:** le callback `window.upcartOnCartOpened` funzionano ancora, ma sono deprecate e registrano avvisi in console. Usa `upcartSubscribeCartOpened` per tutti i nuovi script.
</Note>

Ecco come dovrebbero apparire le tue impostazioni Custom HTML in Upcart:

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/upsell-carousel-arrows-custom-html-script.gif?s=56a99321312a0b59c77d3ce059a72dbb" alt="Impostazioni Custom HTML di Upcart con lo script delle frecce del carosello in Scripts Before Load" width="2052" height="1080" data-path="images/upcart/upsell-carousel-arrows-custom-html-script.gif" />

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

Se hai ancora problemi con la posizione delle frecce del carosello, prova ad applicare la seguente correzione CSS:

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

***

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

Spesso usiamo pseudo-elementi CSS (`::before`) contenuti all'interno dei pulsanti per visualizzare le frecce del carosello. Tuttavia, alcuni temi di negozio scelgono di bloccare il rendering degli pseudo-elementi, il che fa scomparire le frecce del carosello dal cart drawer.

Questo crea un problema per cui le frecce del carosello degli upsell appaiono correttamente nell'anteprima dell'editor ma non sul negozio live effettivo.