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

# CSS personalizzato

> Aggiungi CSS personalizzato per perfezionare il tuo Aftersell Cart oltre le impostazioni di design integrate.

Quando le [impostazioni di design](/it/aftersell/cart/design-settings) integrate non bastano, aggiungi il tuo **CSS personalizzato** per stilizzare il carrello.

<div id="where-to-add-it">
  ## Dove aggiungerlo
</div>

Nel cart editor, apri **Cart settings → Custom CSS**. Il tuo CSS **si applica all'intero carrello** e viene caricato **dopo** gli stili di base del carrello, quindi le tue regole hanno la precedenza.

<div id="target-public-classes-only">
  ## Punta solo alle classi pubbliche
</div>

Stilizza il carrello usando le sue **classi pubbliche `cart-external-*`**. L'editor le suggerisce in autocompletamento e ti mette in guardia dalle altre:

* **`cart-external-*`**: il target pubblico e supportato. Usa queste. Non portano alcuno stile proprio, quindi esistono solo perché il tuo CSS possa agganciarvisi.
* **`cart-internal-*`**: la struttura interna del carrello, dove risiede tutto il suo stile integrato. L'editor segnala come errori i selettori che le usano. Non vengono cambiate alla leggera, dato che ogni carrello esistente dipende da esse, ma sono di proprietà del carrello, non un contratto con te. Ristilizza invece attraverso la gemella `cart-external-*`.
* Altre classi `cart-*` che l'editor non riconosce vengono segnalate come avvisi.

<Note>
  Vedrai classi `cart-internal-*` nel markup, incluso il [template personalizzato](/it/aftersell/cart/custom-templates) predefinito di ogni blocco. È normale: sono ciò che dà a un blocco il suo aspetto integrato. La regola qui riguarda i **selettori che scrivi** in questo pannello, non i nomi di classe che il carrello renderizza.

  Se stai scrivendo un template personalizzato che cambia la struttura DOM di un blocco, consulta [Stilizzare un template personalizzato](/it/aftersell/cart/custom-templates#styling-a-custom-template) per sapere quali nomi di classe mantenere e quali eliminare.
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM: il carrello è autonomo
</div>

Sul negozio, l'intero carrello viene renderizzato dentro il proprio **shadow DOM**. Questo significa che:

* Il CSS del tuo tema non può penetrare nel carrello, e il CSS del carrello non può uscirne, quindi il tuo CSS personalizzato è automaticamente limitato al carrello e non entrerà in conflitto con il resto del tuo sito.
* I tuoi selettori devono fare riferimento a elementi e classi **dentro il carrello**. I selettori mirati a elementi della pagina fuori dal carrello non possono raggiungerlo.

Lo stesso confine vale per JavaScript: nemmeno `document.querySelector` può vedere dentro il drawer. Uno script che vuole raggiungere un elemento del carrello deve passare da [`shadowRoot`](/it/aftersell/cart/sdk-overview#shadowroot), e punta a queste stesse classi `cart-external-*`.

<div id="when-to-use-design-settings-instead">
  ## Quando usare invece le impostazioni di design
</div>

Per colori, raggi, spaziature e larghezza, le [impostazioni di design](/it/aftersell/cart/design-settings) integrate sono più semplici e sicure, quindi ricorri al CSS personalizzato solo per ciò che non coprono.

<div id="where-to-go-next">
  ## Dove andare dopo
</div>

* **[Impostazioni di design](/it/aftersell/cart/design-settings)**: i controlli di stile integrati, la prima cosa da provare.
* **[Template personalizzati](/it/aftersell/cart/custom-templates)**: sostituisci completamente il markup di un blocco quando il solo CSS non basta.
* **[Cart SDK](/it/aftersell/cart/sdk-overview)**: per il comportamento anziché per l'aspetto.