> ## 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 Upsells
> Il blocco Upsells dell'Aftersell Cart — offerte di prodotti scelte da una Strategy mostrate nel drawer.
> Il blocco **Upsells** mostra offerte di prodotti nel cart drawer, scelte da una **Strategy** che selezioni tu. Quando un acquirente apre il carrello, il blocco fa emergere i prodotti che la tua Strategy restituisce in base al contenuto attuale del carrello e a eventuali regole di targeting che hai configurato.
Aumenta il valore medio degli ordini facendo emergere offerte di prodotti pertinenti nel momento in cui gli acquirenti aprono il carrello, usando una Strategy che sceglie cosa mostrare in base al contenuto del carrello e alle tue regole di targeting.
A differenza del blocco [**Product add-on**](/it/aftersell/cart/product-add-on-block), che mostra sempre un prodotto scelto da te, Upsells è guidato da una Strategy che decide cosa mostrare.
## Comportamento
* I prodotti vengono recuperati in tempo reale in base al carrello attuale dell'acquirente, quindi le offerte riflettono ciò che è effettivamente nel carrello.
* **L'intera sezione si nasconde quando nessun prodotto viene risolto** — nessuna Strategy collegata, la Strategy non restituisce nulla, oppure nessuno dei prodotti restituiti è acquistabile. Gli acquirenti non vedono mai una sezione Upsells vuota.
* Se un'offerta restituita porta uno sconto, l'acquirente vede un prezzo barrato onesto e un badge di sconto, e lo sconto viene applicato al checkout.
## Impostazioni
| Impostazione | Cosa controlla | Default |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| **Title** | Intestazione in rich text sopra le offerte. Supporta grassetto, corsivo, allineamento e colore. | `You may also like` |
| **Add button text** | L'etichetta sul pulsante di aggiunta di ogni prodotto. | `Add` |
| **Strategy** | La Strategy che sceglie quali prodotti mostrare. | Una strategia Shopify AI, assegnata per te |
| **Layout** | **Carousel** o **List**. | Carousel |
| **Maximum products** | Quanti prodotti mostrare al massimo. Accetta `1`–`12`. | `4` |
| **Show compare-at price** | Se mostrare un prezzo comparativo barrato. | Attivo |
| **Show product reviews** | Se mostrare valutazioni a stelle e conteggi delle recensioni su ogni card di upsell. Le valutazioni provengono dai metafield di prodotto della tua app di recensioni e appaiono solo quando esistono dati di recensione validi. | Disattivo |
### App di recensioni supportate
Sono supportate le seguenti app di recensioni basate su metafield: Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo e Vitals. Yotpo non è supportata perché usa un'API separata invece dei metafield di prodotto.
## Design
Il blocco Upsells ha override di design per singolo blocco nel suo pannello **Design**. Questi sovrascrivono le impostazioni di design globali del carrello solo per questo blocco. Lasciare un valore vuoto eredita l'impostazione globale.
### Stile del testo
Il blocco Upsells include una sezione **Text** nelle sue impostazioni di Design. Usala per controllare la tipografia dei singoli elementi di testo su ogni card di upsell. Seleziona un elemento di testo dal selettore per regolarne le impostazioni:
| Impostazione | Cosa controlla |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Text color** | Colore dell'elemento di testo selezionato. |
| **Font** | **Theme font** (eredita il font del tuo tema) o **Custom font** (inserisci il nome di un font che il tuo tema carica già). Disponibile solo per **Heading**. |
| **Size** | Dimensione del font in pixel. |
| **Weight** | Peso del font: Light, Regular, Medium, Semibold o Bold. |
| **Line height** | Interlinea come moltiplicatore della dimensione del font (per esempio, `1.4`). |
| **Letter spacing** | Spaziatura tra le lettere in pixel. I valori negativi comprimono il testo. |
Gli elementi di testo che puoi stilizzare sono raggruppati per categoria:
**Heading**
* **Heading** — l'intestazione della sezione sopra le card di upsell (per esempio, *You may also like*). Supporta anche una famiglia di font personalizzata. Grassetto e colore si impostano nel Rich Text Editor sopra.
**Product**
* **Product title** — il nome del prodotto su ogni card di upsell.
* **Review count** — il conteggio delle recensioni mostrato quando **Show product reviews** è abilitato.
**Pricing**
* **Price** — il prezzo attuale su ogni card.
* **Compare-at price** — il prezzo originale barrato.
* **Discount** — l'etichetta dello sconto (per esempio, *20% off*).
Lasciare un campo vuoto mantiene il valore predefinito dell'elemento.
Cliccando un elemento di testo direttamente nell'anteprima del carrello lo si evidenzia e si aprono automaticamente i suoi controlli nel pannello.
### Colori delle tile
| Impostazione | Cosa controlla | Default |
| ------------------------- | --------------------------------------------------------- | ----------- |
| **Tile background color** | Il riempimento di sfondo di ogni card di prodotto upsell. | Trasparente |
| **Tile border color** | Il colore del bordo di ogni card di prodotto upsell. | `#F6F6F7` |
### Recensioni
Quando **Show product reviews** è abilitato, puoi personalizzare i colori delle stelle dalla sezione **Reviews** del pannello Design.
| Impostazione | Cosa controlla | Default |
| -------------------- | ---------------------------------------- | --------- |
| **Star color** | La porzione riempita di ogni stella. | `#FDCC0D` |
| **Empty star color** | La porzione non riempita di ogni stella. | `#D1D5DB` |
## Posizionamento e limiti
* **Regione:** body o bottom.
* **Massimo:** 1 per stato del carrello — il carrello pieno e il carrello vuoto ne hanno ciascuno uno proprio.
* **Stato:** sia carrello pieno che vuoto.
* Non aggiunto di default. Non bloccato — puoi rimuoverlo o nasconderlo.
## Selezionare una strategia
Un blocco Upsells non arriva vuoto: se nessuna Strategy è impostata, Aftersell risolve la strategia Shopify AI del tuo negozio — creandola se non ne hai ancora una — e la inserisce, così il blocco funziona subito. Apri il selettore **Strategy** per cambiarla. Il selettore ha due gruppi:
**Quick start**
* **Create strategy from selected products** — scegli direttamente prodotti specifici e una Strategy viene creata per te automaticamente.
* **Create strategy from scratch** — apre l'editor delle Strategy così puoi costruire regole senza lasciare il cart editor.
**Strategies**
* **Shopify AI recommendations** — crea una Strategy basata sulle raccomandazioni di Shopify stesso, chiamata **Shopify AI recommended products** ovunque appaia in seguito. Questa voce scompare una volta che ne hai una, dato che un negozio ha bisogno di una sola strategia Shopify AI.
* Le tue Strategy esistenti, elencate per nome. Digita nel campo di ricerca per filtrarle.
Una volta selezionata una Strategy, il suo nome appare sulla riga della strategia dentro il blocco.
## Gestire una strategia selezionata
Dopo che una Strategy è collegata, un pulsante **•••** (ellissi) appare sulla riga della strategia. Cliccalo per aprire il menu delle azioni:
* **Edit strategy** — apre l'editor delle Strategy in una nuova scheda, così la tua sessione del cart editor ed eventuali modifiche non salvate restano intatte. Questa opzione non è disponibile per la strategia Shopify AI-recommended, che è gestita automaticamente e non ha regole modificabili.
* **Remove from upsell** — scollega la Strategy da questo blocco. La Strategy stessa non viene eliminata; resta disponibile nella tua lista di Strategy.
Modificare una Strategy in una nuova scheda non influisce sulla sessione del cart editor — puoi tornare alla scheda del cart editor e continuare a configurare senza perdere il tuo lavoro.
## 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.
### Contenuto del blocco
| Prop | Tipo | A cosa serve |
| --------------- | ---------------------- | ----------------------------------------------------------------------------------------------------- |
| `title` | `string` | Intestazione della sezione. |
| `addButtonText` | `string` | Etichetta del pulsante di aggiunta al carrello. |
| `layout` | `'carousel' \| 'list'` | Scorrimento orizzontale o a capo. Ramifica il tuo markup su questo. |
| `upsells` | `UpsellCard[]` | I prodotti pronti per la visualizzazione. Vedi [la struttura della card](#the-upsell-card) qui sotto. |
| `isLoading` | `boolean` | `true` mentre i prodotti di upsell sono ancora in fase di recupero. |
### Aggiungere al carrello
| Prop | Tipo | A cosa serve |
| ----------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| `selectVariant` | `(productId: string, variantId: number) => void` | Seleziona una variante per un prodotto. |
| `handleAdd` | `(productId: string) => void` | Aggiunge al carrello la variante selezionata di quel prodotto. |
| `addingProductId` | `string \| null` | Il prodotto attualmente in fase di aggiunta, così puoi disabilitare solo il suo pulsante. `null` quando inattivo. |
### Controlli del carosello
Rilevanti solo quando `layout` è `'carousel'`.
| Prop | Tipo | A cosa serve |
| -------------- | ------------------------------------- | ------------------------------------------------------------------------------------------ |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Allegalo al tuo scroller con `ref={props.trackRef}` così le frecce possono farlo scorrere. |
| `atStart` | `boolean` | `true` quando la traccia è al suo bordo iniziale. Disabilita la freccia sinistra. |
| `atEnd` | `boolean` | `true` quando la traccia è al suo bordo finale. Disabilita la freccia destra. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Fa scorrere la traccia di una card a sinistra (`-1`) o a destra (`1`). |
### La card di upsell
Ogni voce in `upsells`:
| Campo | Tipo | A cosa serve |
| ------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId` | `string` | GID del prodotto. Usalo come chiave React e come target dell'aggiunta al carrello. |
| `title` | `string` | Titolo del prodotto. |
| `description` | `string` | Descrizione in testo semplice. `''` quando il prodotto non ne ha. |
| `url` | `string \| null` | URL della pagina prodotto. `null` quando non disponibile. |
| `imageUrl` | `string \| null` | Immagine in evidenza. `null` quando il prodotto non ne ha. |
| `selectedVariantImageUrl` | `string \| null` | L'immagine propria della variante selezionata. `null` quando la variante non ne ha — ripiega su `imageUrl`. |
| `variantTitle` | `string \| null` | I valori delle opzioni della variante selezionata (es. `Medium / Blue`), già risolti. `null` quando la variante non ha un titolo reale — vuoto o il segnaposto `Default Title` di Shopify. Un prodotto con una singola variante nominata restituisce comunque quel nome, quindi proteggi con `{upsell.variantTitle && …}` invece di basarti su `hasMultipleVariants`. |
| `priceLabel` | `string` | Prezzo da mostrare, già formattato. Il prezzo scontato quando in sconto, altrimenti il prezzo della variante. |
| `compareAtLabel` | `string \| null` | Originale barrato, già formattato. `null` quando non c'è nulla da barrare. |
| `discountLabel` | `string \| null` | Etichetta di sconto inline come `(20% off)`. `null` quando non scontato. |
| `review` | `object \| null` | `{ rating, count, stars }`, dove `stars` sono 5 URL di immagini pre-renderizzate con riempimento frazionario incorporato. Renderizza ciascuna come elemento immagine. `null` quando le recensioni sono disattivate o il prodotto non ne ha. |
| `options` | `Array<{ name, values }>` | Gruppi di opzioni, per costruire selettori o swatch. |
| `variants` | `array` | Le combinazioni di varianti. Vedi sotto. |
| `selectedVariantId` | `number` | La variante attualmente selezionata. Passala a `selectVariant`. |
| `hasMultipleVariants` | `boolean` | Se renderizzare del tutto un selettore di varianti. |
| `vendor` | `string` | Il vendor del prodotto. |
Ogni voce in `variants` porta `id`, `title`, `price` e `compareAtPrice` (grezzi, non formattati, nell'unità principale della valuta come stringhe), `availableForSale`, `imageUrl`, `sku` e `selectedOptions` (`[{ name, value }]`).
**La disponibilità è per combinazione, non per opzione.** `options` ti dà i gruppi da renderizzare, ma se una data selezione è acquistabile sta nella voce corrispondente in `variants`. Risolvi la combinazione scelta dall'acquirente rispetto a `variants` e condiziona sull'`availableForSale` di quella voce, invece di dare per scontato che ogni valore in `options` sia ordinabile.
`priceLabel` e `compareAtLabel` sono già formattati per la visualizzazione, mentre `variants[].price` e `variants[].compareAtPrice` sono stringhe grezze nell'unità principale della valuta. Non mescolare i due: mostra le etichette, e usa i valori grezzi solo per i confronti.
## Design
Definisci 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 ricadono su di esso quando sono vuoti.
Cosa sono le impostazioni di design? Scopri di più qui: [Impostazioni di design](/it/aftersell/cart/design-settings).