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

> Il blocco Image di Aftersell Cart — mostra un'immagine o un preset ospitato come le icone di pagamento dentro il drawer.

> Il blocco **Image** mostra una singola immagine dentro il drawer del carrello (un badge di fiducia, una grafica promozionale o un preset ospitato come una striscia di icone di pagamento) per aggiungere rassicurazione visiva o promozione al carrello, caricando una tua immagine oppure inserendo un preset già pronto.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-image-block-hosted-preset-asset.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=373a75d9fe7c6ed7d7a39950b57662bb" alt="Blocco Image che renderizza un'immagine ospitata o un asset preset dentro il drawer del carrello" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

<div id="behavior">
  ## Comportamento
</div>

* Se non sono impostati né un'immagine né un preset, il blocco non renderizza **nulla** sul carrello live. Nell'editor mostra un placeholder "Add an image" così il blocco resta selezionabile.

<div id="settings">
  ## Impostazioni
</div>

| Impostazione   | Cosa controlla                                                                                                  | Predefinito |
| -------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
| **Image**      | L'immagine da mostrare (caricamento).                                                                           | Nessuno     |
| **Alt text**   | Descrizione accessibile dell'immagine. Traducibile.                                                             | Nessuno     |
| **Max height** | Limita l'altezza dell'immagine in pixel. L'immagine si rimpicciolisce per adattarsi e non viene mai ritagliata. | Nessuno     |
| **Full width** | Estende l'immagine da bordo a bordo lungo il carrello.                                                          | Off         |
| **Preset**     | Un set di immagini ospitato che sovrascrive il tuo caricamento. Attualmente l'unico preset è **payment icons**. | Nessuno     |

Quando selezioni un preset, questo prende il posto di qualsiasi immagine caricata, e viene usato l'alt text del preset stesso se lasci vuoto il campo Alt text.

<div id="placement-and-limits">
  ## Posizionamento e limiti
</div>

* **Regione:** qualsiasi (top, body o bottom).
* **Massimo:** 3 per stato del carrello — il carrello pieno e il carrello vuoto hanno ciascuno la propria quota.
* **Stato:** sia carrello pieno che vuoto.
* Non aggiunto per impostazione predefinita. Non bloccato — puoi rimuoverlo o nasconderlo.

<div id="custom-template">
  ## Template personalizzato
</div>

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                                                                                                  |
| ----------- | -------------------- | ------------------------------------------------------------------------------------------------------------- |
| `imageUrl`  | `string`             | Il file caricato o il preset selezionato. Vuoto quando non ne è impostato nessuno.                            |
| `altText`   | `string`             | Alt text per l'immagine.                                                                                      |
| `maxHeight` | `number` (opzionale) | Altezza massima in pixel. Le immagini più alte si rimpiccioliscono per adattarsi, preservando le proporzioni. |
| `fullWidth` | `boolean`            | Da bordo a bordo: l'immagine occupa l'intera larghezza del carrello, senza padding orizzontale.               |

<Note>
  `altText` può essere vuoto. Renderizza `alt=""` invece di omettere l'attributo, così l'immagine viene trattata come decorativa. `maxHeight` e `fullWidth` sono valori che devi applicare tu nei tuoi stili; il template non li applica per te.
</Note>

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

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.

Cosa sono le impostazioni di design? Scopri di più qui: [Impostazioni di design](/it/aftersell/cart/design-settings).