> ## 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. # Blocco Empty cart > Il blocco Empty cart — il contenuto mostrato quando un acquirente non ha articoli. > Il blocco **Empty cart** è il contenuto mostrato quando il carrello non ha articoli, in genere un messaggio e un pulsante per continuare lo shopping, in modo che un drawer vuoto resti comunque utile e coerente con il tuo brand. Appare solo nello **stato vuoto** del carrello; altri blocchi (come Header) possono affiancarlo in quello stesso stato. Blocco Empty cart che mostra un messaggio di stato vuoto e una call-to-action per continuare lo shopping
## Comportamento
* Il blocco appare solo quando il carrello è vuoto. Non appena un acquirente aggiunge un articolo, il carrello passa allo stato pieno e questo blocco viene sostituito dal layout del carrello pieno. * Nell'editor, il link della CTA è inerte, quindi cliccarlo non ti porta altrove mentre stai progettando.
## Impostazioni
| Impostazione | Cosa controlla | Predefinito | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | | **Empty cart text** | Il messaggio di stato vuoto. Rich text. | `Your cart is empty.` | | **Button text** | L'etichetta del pulsante. Supporta la formattazione HTML inline. | `Continue shopping` | | **Button link** | Dove punta il pulsante. | `/collections/all` | | **Background color** | Colore di sfondo del blocco. Se vuoto resta trasparente, così traspare lo sfondo del carrello. | `transparent` | | **Alignment** | Come vengono allineati il testo e il pulsante del blocco — **Left** o **Center**. | Center | | **Fit to height** | Se il blocco riempie l'altezza rimanente del corpo del carrello centrandosi verticalmente, oppure occupa solo l'altezza del contenuto — **Fill remaining height** o **Fit content**. | Fill remaining height |
## Posizionamento e limiti
* **Regione:** body. * **Massimo:** 1 per stato del carrello. * **Stato:** solo carrello vuoto. Questo blocco non appare nello stato pieno. I nuovi carrelli includono anche un Header nello stato vuoto per impostazione predefinita; vedi [Come funzionano i carrelli?](/it/aftersell/cart/how-carts-work). * Aggiunto ai nuovi carrelli per impostazione predefinita. Non bloccato — puoi rimuoverlo o nasconderlo.
## Template personalizzato
Supporta un [template personalizzato](/it/aftersell/cart/custom-templates) dalla sua scheda Code, che sostituisce il markup integrato di questo blocco con il tuo JSX. Queste sono le props che riceve. | Prop | Tipo | A cosa serve | | --------- | -------- | ------------------------------------------------------------------------------------------------------ | | `text` | `string` | Il messaggio di carrello vuoto come HTML sanificato. | | `cta` | `string` | Etichetta del pulsante call-to-action, come testo semplice. | | `ctaHtml` | `string` | Etichetta del pulsante call-to-action come HTML sanificato — ciò che renderizza il markup predefinito. | | `href` | `string` | Dove punta la call-to-action. | Questo blocco viene renderizzato solo quando il carrello è vuoto, quindi non c'è alcun oggetto cart nelle props. Renderizza `href` come un vero `` invece di una navigazione via script, e `text` con `dangerouslySetInnerHTML`, dato che è già HTML sanificato.
## Design
Personalizza lo stile di questo blocco con la sua sezione **Design** nel pannello delle impostazioni. Si tratta di override per singolo blocco che si sovrappongono al tuo design globale e vi ricadono quando sono vuoti.
### Text
La sezione **Text** in Design ti consente di controllare la tipografia di due elementi. Usa il selettore **Text element** per passare da uno all'altro. **Message** — il testo del messaggio dello stato vuoto. Il grassetto e il colore del testo si impostano nel Rich Text Editor sopra (nella scheda Settings), non qui. | Impostazione | Cosa controlla | Predefinito | | ------------------ | --------------------------------------- | ------------------ | | **Font** | Famiglia di font per il messaggio. | Ereditato dal tema | | **Size** | Dimensione del font. | `18px` | | **Line height** | Moltiplicatore dell'altezza della riga. | `1.3` | | **Letter spacing** | Spaziatura tra i caratteri. | Normal | **Button label** — il testo sul pulsante continua lo shopping. Il colore del testo si imposta nella sezione Button di Design. | Impostazione | Cosa controlla | Predefinito | | ------------------ | -------------------------------------------------------- | -------------- | | **Size** | Dimensione del font. | `15px` | | **Weight** | Peso del font — Light, Regular, Medium, Semibold o Bold. | Semibold (600) | | **Line height** | Moltiplicatore dell'altezza della riga. | `1.47` | | **Letter spacing** | Spaziatura tra i caratteri. | Normal |
### Pulsante
La sezione **Button** ti consente di personalizzare lo stile del pulsante CTA indipendentemente dal design globale dei pulsanti. Usa il toggle **Default / Hover** per passare da uno stato all'altro. | Impostazione | Stato | Cosa controlla | | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------ | | **Background color** | Default | Riempimento del pulsante nel suo stato a riposo. Ricade sul colore di sfondo globale dei pulsanti. | | **Text color** | Default | Colore dell'etichetta del pulsante nel suo stato a riposo. Ricade sul colore del testo globale dei pulsanti. | | **Background color** | Hover | Riempimento del pulsante quando un cliente ci passa sopra. Ricade sul colore di sfondo predefinito. | | **Text color** | Hover | Colore dell'etichetta del pulsante in hover. Ricade sul colore del testo predefinito. | | **Border color** | — | Colore del bordo del pulsante (entrambi gli stati). Ricade sul colore del bordo globale dei pulsanti. | | **Border radius** | — | Arrotondamento degli angoli del pulsante. Ricade sul border radius globale dei pulsanti. | Cosa sono le impostazioni di design? Scopri di più qui: [Impostazioni di design](/it/aftersell/cart/design-settings).