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

# Come configurare i widget checkout

> Guida completa passo passo alla configurazione dei widget checkout in Aftersell, inclusi tutti i tipi di widget, le opzioni di posizionamento e le best practice di conversione per mobile e desktop

Questa guida ti mostra come configurare e posizionare i widget checkout in Aftersell, dall'attivazione dei widget all'ottimizzazione del posizionamento nel checkout di Shopify per massimizzare i tassi di conversione..

**Nota:** i widget checkout sono disponibili solo per i merchant Shopify Plus a causa delle restrizioni dell'API Checkout Extensibility di Shopify.

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## Passaggio 1: attiva il tuo widget in Aftersell
</div>

Prima di aggiungere i widget al tuo checkout, devi attivarli nel pannello di amministrazione di Aftersell.

1. Vai alla scheda **Checkout** nel tuo pannello di amministrazione di Aftersell
2. Seleziona il tipo di widget che vuoi configurare ([Upsell](#upsells), [Controlli carrello](#cart-controls), [Ricompense,](#rewards) [Badge di fiducia,](#trust-badges) [Testimonianze](#testimonials), [Note](#notes), [Immagini](#images) o [Testo](#text))
3. Fai clic su **Create** per creare un nuovo widget o seleziona un widget esistente da modificare
4. Configura le impostazioni del tuo widget (vedi [Tipi di widget e configurazione](#widget-types-and-configuration) qui sotto)
5. Fai clic sull'interruttore **Enable** nell'angolo in alto a destra delle impostazioni del widget
6. Per gli upsell con restrizioni o avanzati, assicurati di attivare i trigger personalizzati prima di procedere

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## Passaggio 2: apri l'editor del checkout di Shopify
</div>

Ci sono due modi per accedere all'editor del checkout di Shopify:

**Opzione 1: dal pannello di amministrazione di Shopify**

1. Vai su **Settings** nel tuo pannello di amministrazione di Shopify
2. Fai clic su **Checkout** nella navigazione a sinistra
3. Fai clic su **Customize** accanto al profilo di checkout desiderato

**Opzione 2: da Aftersell**

1. Fai clic sul pulsante **Open Shopify Checkout Editor** in basso a destra nella pagina dell'editor Checkout di Aftersell

💡 **Suggerimento:** l'Opzione 1 ti dà più controllo su quale profilo di checkout stai modificando. Ti consigliamo di testare prima su una versione in bozza prima di pubblicarla.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="Home del pannello di amministrazione di Shopify con il link Settings evidenziato per aprire l'editor del checkout" width="1844" height="1080" data-path="images/aftersell/checkout-widget-config-admin-settings-link.gif" />

***

<div id="step-3-add-the-app-block-to-your-checkout">
  ## Passaggio 3: aggiungi il blocco app al tuo checkout
</div>

1. Nell'editor del checkout di Shopify, fai clic su **Add app block**
2. Seleziona il widget Aftersell desiderato dall'elenco dei widget disponibili
3. Scegli il posizionamento corretto per il tuo widget (vedi [Posizionamenti disponibili](#available-placements) qui sotto)
4. Se vuoi che i tuoi widget vengano mostrati nel checkout di Shop Pay, spunta l'opzione [**Include app block in Shop Pay**](/it/aftersell/show_checkout_widgets_in_shop_pay)
5. Fai clic su **Save** nell'angolo in alto a destra

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-add-app-block-button.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=f6ba0d6ab535b750f8487c408e99ef69" alt="Editor del checkout di Shopify con una freccia che indica il pulsante Add block nella barra laterale" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## Passaggio 4: posiziona il tuo widget
</div>

1. Trascina e rilascia il blocco app nella posizione desiderata all'interno dell'area di posizionamento selezionata
2. Fai clic su **Save** nell'angolo in alto a destra

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Elenco dei blocchi dell'editor del checkout di Shopify accanto a un'anteprima live del checkout con i widget Aftersell" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## Tipi di widget e configurazione
</div>

<div id="placements">
  ## Posizionamenti
</div>

I posizionamenti vengono creati nell'editor Checkout di Aftersell e ti permettono di eseguire più widget dello stesso tipo sulla stessa pagina di checkout.

Ad esempio, se vuoi mostrare due offerte di upsell sulla stessa pagina, ciascuna deve essere assegnata a un posizionamento diverso.

<div id="available-placements">
  ### Posizionamenti disponibili
</div>

* **Default placement**: il posizionamento principale. Ogni tipo di widget parte da qui.
* **Additional placement 1**: un secondo slot di posizionamento per mostrare un altro widget dello stesso tipo sulla stessa pagina.
* **Additional placement 2**: un terzo slot di posizionamento per un'ulteriore separazione.

Puoi anche creare nuovi posizionamenti direttamente dal menu a tendina dei posizionamenti in Aftersell selezionando **+ Add new placement**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Editor Checkout di Aftersell che mostra il menu a tendina dei posizionamenti sopra l'elenco degli Upsell e l'anteprima" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### Quando usare più posizionamenti
</div>

Usa più posizionamenti quando vuoi:

* Mostrare più di un widget dello stesso tipo su una singola pagina di checkout
* Mostrare i widget in sezioni diverse della pagina
* Indirizzare offerte diverse a segmenti di pubblico diversi
* Eseguire widget con trigger simili o sovrapposti

Aftersell usa un sistema di priorità. Non puoi eseguire più widget con trigger identici all'interno dello stesso posizionamento. Se due widget condividono le stesse condizioni di trigger in un posizionamento, solo uno verrà mostrato in base alla priorità.

Per usare trigger simili, assegna ogni widget a un posizionamento diverso in modo che possano funzionare indipendentemente senza conflitti.

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## Far corrispondere i posizionamenti nell'editor del checkout di Shopify
</div>

Ogni posizionamento in Aftersell corrisponde a un blocco app separato nell'editor del checkout di Shopify. Il posizionamento selezionato in Shopify deve corrispondere a quello impostato in Aftersell.

Ad esempio, se un widget è assegnato ad **Additional placement 1** in Aftersell, anche il blocco app in Shopify deve essere impostato su **Additional placement 1**.

Se i posizionamenti non corrispondono, il widget potrebbe non comparire o essere mostrato nella posizione sbagliata.

**Importante:** una mancata corrispondenza dei posizionamenti è uno dei motivi più comuni per cui un widget non viene mostrato. Se un widget non compare, verifica che il posizionamento corrisponda sia in Aftersell che in Shopify prima di proseguire con la risoluzione dei problemi.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="Impostazioni del blocco Upsell Widget dell'editor del checkout di Shopify con il menu a tendina Placement impostato su un posizionamento aggiuntivo" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

<div id="upsells">
  ### Upsell
</div>

Offri prodotti ai clienti durante il checkout per aumentare il tuo valore medio dell'ordine (AOV).

**Opzioni di configurazione:**

**Modalità widget:**

* **Single Product Upsell:** mostra un prodotto con un pulsante Aggiungi al carrello
* **Multi-Product Upsell:** mostra più prodotti in un layout a pila o a carosello, consentendo ai clienti di accettare più offerte
* **Checkmark Upsell:** mostra un singolo prodotto con una casella di spunta invece di un pulsante Aggiungi al carrello (ideale per componenti aggiuntivi a basso costo come la protezione della spedizione)

**Metodi di selezione dei prodotti:**

* **Specific Products:** seleziona manualmente i singoli prodotti da proporre in upsell
* **Collection:** seleziona una collezione e mostra fino a 5 prodotti casuali (i prodotti già nel carrello vengono esclusi automaticamente)
* **Automatic upsell(s):** raccomanda automaticamente prodotti in base al contenuto del carrello
* **Most Expensive Product:** propone automaticamente in upsell il prodotto più costoso del carrello
* **Spend threshold:** raccomanda prodotti che aiutano i clienti a raggiungere le soglie di ricompensa (selezionabile solo una volta attivato **Show rewards bar** sullo stesso widget upsell)
* **Strategy:** seleziona dinamicamente un prodotto usando il targeting basato su regole. Mostrato solo sui negozi con le [Strategie](/it/aftersell/strategies_overview) attive

**Funzionalità aggiuntive:**

* Aggiungi sconti direttamente all'interno del widget
* Blocca i piani di abbonamento su opzioni specifiche
* Mostra le stelle delle recensioni dei prodotti (richiede un'app di recensioni compatibile)
* Imposta un numero massimo di offerte accettate per widget (solo tipi di upsell Single e Multi)

[Scopri di più sui widget upsell](/it/aftersell/checkout_widget_types#upsells)

***

<div id="cart-controls">
  ### Controlli carrello
</div>

Permetti ai clienti di modificare il carrello direttamente nella pagina di checkout.

**Controlli disponibili:**

* **Variant selector:** consente di passare a un'altra variante disponibile
* **Quantity selector:** consente di regolare le quantità dei prodotti
* **Remove item:** Show Remove Item Button rimuove i prodotti in upsell dal carrello. Un'impostazione associata, **Allow Removal of Non-Upsell Products** (disattivata per impostazione predefinita), estende la rimozione a tutto ciò che è nel carrello
* **Subscription selector:** consente di cambiare la frequenza dell'abbonamento
* **Subscription upgrade:** consente di trasformare gli acquisti una tantum in abbonamenti
* **Custom text:** aggiungi testo personalizzato sotto le righe d'ordine

**Targeting dei prodotti:**

* Applica a tutti i prodotti nel carrello
* Applica solo ai prodotti selezionati
* Applica a tutti i prodotti tranne quelli selezionati

**Funzionalità aggiuntive:**

* Mostra le stelle delle recensioni per i prodotti nel carrello

[Scopri di più sui controlli carrello](/it/aftersell/checkout_widget_types#cart-controls)

***

<div id="rewards">
  ### Ricompense
</div>

Mostra una barra di avanzamento che indica ai clienti quanto sono vicini a ottenere una ricompensa.

**Opzioni di configurazione:**

* Base della ricompensa: **Cart total** o **Item count**
* Base dell'importo (per Cart total): **Order total (includes shipping and tax)**, **Subtotal (before discounts)** o **Subtotal after discounts (excludes tax and shipping)**
* Messaggio e stile della ricompensa
* Colori e design della barra di avanzamento

**Best practice:**

* Abbinala ai widget upsell per aiutare i clienti a raggiungere le soglie di ricompensa
* Usa il tipo di prodotto spend threshold negli upsell per raccomandare automaticamente prodotti che colmano il divario
* Crea le ricompense in Shopify usando gli Automatic Discounts (per ricompense sconto) o le Shipping Rules (per la spedizione gratuita)
* Usa **Subtotal after discounts (excludes tax and shipping)** come base dell'importo quando offri la spedizione gratuita, così la barra corrisponde alla valutazione delle soglie di Shopify quando vengono applicati codici sconto

[Scopri di più sulle ricompense](/it/aftersell/checkout_widget_types#rewards)

***

<div id="trust-badges">
  ### Badge di fiducia
</div>

Costruisci fiducia con icone e testi personalizzati per aumentare i tassi di conversione del checkout.

**Opzioni di configurazione:**

* Layout dei badge: pila verticale o visualizzazione orizzontale
* Icone e testo personalizzati per ogni badge
* Opzioni di stile e spaziatura

**Best practice:**

* Evidenzia le funzionalità di sicurezza (checkout sicuro, crittografia SSL)
* Metti in mostra le garanzie (garanzia di rimborso, resi gratuiti)
* Mostra i vantaggi di spedizione (spedizione gratuita, consegna rapida)

[Scopri di più sui badge di fiducia](/it/aftersell/checkout_widget_types#trust-badges)

***

<div id="testimonials">
  ### Testimonianze
</div>

Mostra le recensioni dei clienti direttamente nel checkout per costruire fiducia.

**Opzioni di configurazione:**

* **Flex Testimonials (consigliato):** recupera automaticamente recensioni reali dalla tua app di recensioni (Judge.me, Klaviyo, Okendo o Yotpo)
* Modalità di selezione: Manuale (scegli recensioni specifiche) o Dinamica (recupera automaticamente le recensioni in base al contenuto del carrello)
* Tipo di visualizzazione: carosello orizzontale o pila verticale
* Filtro di valutazione minima

**Requisiti di configurazione:**

* Configura le credenziali dell'app di recensioni in Settings > Product Reviews
* Le recensioni si sincronizzano automaticamente entro 24 ore, poi settimanalmente

[Scopri di più sulle testimonianze](/it/aftersell/checkout_widget_types#testimonials)

***

<div id="notes">
  ### Note
</div>

Permetti ai clienti di aggiungere note al loro ordine.

**Opzioni di configurazione:**

* Note manuali: campo di testo libero per l'input del cliente
* Note precompilate: caselle di spunta per opzioni come il confezionamento regalo o il packaging ecologico

[Scopri di più sulle note](/it/aftersell/checkout_widget_types#notes)

***

<div id="images">
  ### Immagini
</div>

Carica e mostra immagini personalizzate nel tuo checkout.

**Opzioni di configurazione:**

* Caricamento immagine
* Cursore per regolare la larghezza
* Nessun requisito di dimensione minima

[Scopri di più sulle immagini](/it/aftersell/checkout_widget_types#images)

***

<div id="text">
  ### Testo
</div>

Inserisci un banner con testo personalizzato nel tuo checkout.

**Opzioni di configurazione:**

* **Container Style:** **Plain Text** (predefinito) o **Badge**. I colori del banner qui sotto compaiono solo quando scegli Badge
* **Banner Type** (solo Badge):
  * **Info (Blue):** sfondo blu con icona informativa
  * **Success (Green):** sfondo verde con icona di spunta
  * **Warning (Yellow):** sfondo giallo con icona a triangolo di avviso
  * **Critical (Red):** sfondo rosso con icona a punto esclamativo
* Dimensione del testo sul campo **Body** (Small o Base) — il campo Heading non ha controllo della dimensione
* Allineamento sia sul campo Heading che sul campo Body
* Spaziatura: None, Extra Tight, Tight, Base, Loose o Extra Loose

[Scopri di più sul testo](/it/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## Risoluzione dei problemi
</div>

<div id="widgets-not-displaying">
  ### I widget non vengono mostrati
</div>

Se i tuoi widget non compaiono dopo la configurazione:

1. Verifica che il widget sia attivato nel pannello di amministrazione di Aftersell
2. Controlla che il blocco app sia stato aggiunto nell'editor del checkout di Shopify
3. Conferma che il blocco app sia stato salvato nell'editor del checkout di Shopify
4. Verifica che sia selezionato il posizionamento corretto. Quando aggiungi un blocco app nell'editor del checkout di Shopify, devi scegliere il posizionamento corrispondente, come Default placement, Additional placement 1 o Additional placement 2. Se viene selezionato il posizionamento sbagliato, il widget potrebbe non comparire o essere mostrato nella posizione sbagliata. Rimuovi il blocco app e aggiungilo di nuovo, assicurandoti che sia selezionato il posizionamento desiderato.
5. Per Shop Pay: verifica che "Include app block in Shop Pay" sia spuntata
6. Svuota la cache del browser o prova la modalità in incognito
7. Attendi qualche minuto perché le modifiche si propaghino

<div id="shop-pay-widgets-not-showing">
  ### I widget in Shop Pay non compaiono
</div>

Per mostrare i widget nel checkout di Shop Pay:

1. Apri il widget nell'editor del checkout di Shopify
2. Spunta l'opzione **Include app block in Shop Pay** sotto Checkout behaviour
3. Salva le modifiche

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Barra laterale dell'editor del checkout di Shopify che mostra il blocco app Aftersell Upsell Widget sotto Main" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[Scopri di più sui widget in Shop Pay](/it/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## Prossimi passi
</div>

* [Scopri i trigger del checkout](/it/aftersell/checkout_triggers) per mostrare i widget in modo condizionale
* [Configura gli A/B test del checkout](/it/aftersell/checkout_a_b_testing) per ottimizzare i posizionamenti
* [Configura il branding del checkout](/it/aftersell/checkout_branding_settings) per abbinarlo al design del tuo negozio
* [Esplora strategie di upsell avanzate](/it/aftersell/best_practices) per massimizzare l'AOV