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

# Impostazione Render cart in shadow DOM

> Questo articolo spiega cosa fa l'impostazione Render Cart in Shadow DOM e come risolvere i problemi legati a conflitti di stile o di integrazione tra il tuo tema Shopify e Upcart.

<div id="what-shadow-dom-does">
  ## Cosa fa lo Shadow DOM
</div>

Quando l'impostazione **Render Cart in Shadow DOM** è **attiva**, Upcart crea uno spazio autonomo che mantiene i suoi stili e script separati dal resto del tuo negozio.

Questo significa che:

* Il CSS globale del tuo tema non può sovrascrivere il design di Upcart.
* Anche gli stili di Upcart non interferiranno con il tuo tema.
* Il carrello rimane coerente su dispositivi e temi diversi.

Puoi immaginare lo Shadow DOM come una "bolla protettiva" attorno al tuo carrello che lo aiuta ad apparire e funzionare come previsto.

***

<div id="how-this-happens">
  ## Come succede
</div>

Shopify e i temi di terze parti spesso includono CSS e JavaScript globali che possono influire involontariamente sull'aspetto o sul comportamento di Upcart.

L'impostazione **Render Cart in Shadow DOM** aiuta a prevenire questi conflitti isolando il cart drawer di Upcart all'interno di un ambiente protetto dedicato. Quando è abilitata, lo Shadow DOM mantiene coerenti il design e il layout del tuo carrello, indipendentemente da aggiornamenti del tema o modifiche al codice personalizzato.

Tuttavia, se il tuo tema o un'app di terze parti ha bisogno di accesso diretto agli elementi del carrello, questo isolamento può talvolta creare difficoltà di integrazione.

***

<div id="technical-considerations">
  ## Considerazioni tecniche
</div>

Se tu o uno sviluppatore dovete modificare elementi all'interno di Upcart usando JavaScript, è importante usare i riferimenti al documento corretti:

* Usa `upcartDocumentOrShadowRoot` quando selezioni elementi **all'interno** di Upcart.
* Usa `document` quando selezioni elementi **all'esterno** di Upcart (ad esempio, l'header o il footer del tuo tema Shopify).

Anche se lo Shadow DOM è isolato, Upcart offre comunque modi per interagire con il tuo tema e altre app tramite la sua **API pubblica** e le funzioni helper.

***

<div id="troubleshooting-and-limitations">
  ## Risoluzione dei problemi e limitazioni
</div>

Nella maggior parte dei casi, abilitare lo Shadow DOM risolverà automaticamente i conflitti di CSS e layout.\
Tuttavia, possono sempre esserci scenari in cui potresti ancora riscontrare problemi:

* **App di pricing:** se un'altra app deve modificare direttamente i prezzi o il comportamento del checkout all'interno del carrello, lo Shadow DOM può renderlo difficile poiché nasconde la struttura interna di Upcart agli script esterni.
* **JavaScript a livello di tema:** gli script personalizzati che usano `document.querySelector()` potrebbero non trovare gli elementi del carrello mentre lo Shadow DOM è abilitato.

Se devi testare il comportamento del tuo negozio per queste integrazioni, puoi disabilitarlo temporaneamente: apri il cart editor, vai su **Settings → Cart settings**, espandi **Advanced Settings** e deseleziona **Render cart in shadow DOM**.