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

# Impostazioni di design

> Impostazioni di design globali e per blocco per l'Aftersell Cart: colori, pulsanti, layout e come gli override dei blocchi si sovrappongono.

Il design di Aftersell Cart funziona su due livelli: impostazioni **globali** che stilizzano l'intero carrello e override **per blocco** che perfezionano un singolo blocco.

<div id="global-design-settings">
  ## Impostazioni di design globali
</div>

Apri **Cart settings** dalla barra laterale dell'editor per raggiungere il design globale del carrello. Le impostazioni sono raggruppate in Design, Buttons e Layout.

<div id="design">
  ### Design
</div>

| Impostazione             | Cosa controlla                                                                  | Predefinito |
| ------------------------ | ------------------------------------------------------------------------------- | ----------- |
| **Background color**     | Lo sfondo del carrello.                                                         | `#ffffff`   |
| **Text color**           | Il testo principale.                                                            | `#000000`   |
| **Secondary text color** | Testo attenuato / secondario.                                                   | `#a8a8a8`   |
| **Accent color**         | Badge, divisori e prezzi barrati.                                               | `#f2f2f2`   |
| **Border radius**        | Arrotondamento degli angoli per contenitori, schede, immagini e campi di testo. | `8px`       |

<div id="buttons">
  ### Pulsanti
</div>

| Impostazione         | Cosa controlla                                                                    | Predefinito |
| -------------------- | --------------------------------------------------------------------------------- | ----------- |
| **Background color** | Riempimento del pulsante.                                                         | `#000000`   |
| **Text color**       | Etichetta del pulsante.                                                           | `#ffffff`   |
| **Border color**     | Bordo del pulsante.                                                               | `#000000`   |
| **Border radius**    | Arrotondamento degli angoli per pulsanti, menu a tendina e controlli di quantità. | `8px`       |

<div id="layout">
  ### Layout
</div>

| Impostazione           | Cosa controlla                                     | Predefinito |
| ---------------------- | -------------------------------------------------- | ----------- |
| **Horizontal padding** | Padding sinistro/destro dentro il carrello.        | `24px`      |
| **Desktop width**      | La larghezza del drawer su desktop (minimo 320px). | `440px`     |

<div id="per-block-design-overrides">
  ## Override di design per blocco
</div>

Ogni blocco tranne [**Custom code**](/it/aftersell/cart/custom-code-blocks) ha i propri override di design per blocco in fondo al suo pannello delle impostazioni — con l'intestazione **Design** su tutti i blocchi tranne **Express payments**, i cui override si trovano in sezioni Style e Spacing senza etichetta. (Custom code non ha affatto un pannello di impostazioni — il blocco *è* il codice, quindi mostra solo una scheda Code.) Controllano cose come stile, spaziatura e altre impostazioni di design specifiche del blocco. Queste **impostazioni di design per blocco**, quando vuote, ricadono sull'impostazione globale per quella proprietà.

Molti blocchi includono anche una sezione **Text** all'interno del loro pannello Design, dove puoi impostare la tipografia per specifici elementi di testo di quel blocco — famiglia di font, dimensione, altezza della riga e spaziatura dei caratteri. I blocchi con più elementi di testo (come Notes ed Empty cart) mostrano un selettore **Text element** così puoi stilizzare ciascuno in modo indipendente.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="Anteprima animata del pannello delle impostazioni di Design per blocco nel cart editor" title="Anteprima animata del pannello delle impostazioni di Design per blocco nel cart editor" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## Font e posizione del drawer
</div>

* **Font:** il carrello eredita il **font del tuo tema** per impostazione predefinita. Puoi impostare una famiglia di font personalizzata per alcuni elementi di testo (come il titolo del prodotto e l'intestazione degli upsell) dalla sezione **Text** nelle impostazioni di Design di ogni blocco — vedi [Blocco Cart items](/it/aftersell/cart/cart-items-block) e [Blocco Upsells](/it/aftersell/cart/upsells-block) per i dettagli.
* **Posizione del drawer:** la **larghezza** del drawer è regolabile (Desktop width, vedi sopra); non c'è un'impostazione di posizione sinistra/destra.

<div id="behavior-settings">
  ## Impostazioni di comportamento
</div>

Oltre allo stile, **Cart settings** contiene anche opzioni di comportamento — l'apertura del drawer all'aggiunta al carrello e i selettori del tema che mantengono sincronizzato il tuo negozio. Consulta [Impostazioni del carrello](/it/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## Quando usare invece il CSS personalizzato
</div>

Le impostazioni integrate coprono i casi comuni. Per tutto ciò che va oltre — puntare a un elemento specifico, spaziature personalizzate, ritocchi responsive — usa il [CSS personalizzato](/it/aftersell/cart/custom-css).