Aspetto e template dei widget
Personalizza l'aspetto dei widget, le modalità di visualizzazione e le opzioni di visibilità, e gestisci i template HTML/CSS per ogni tipo di widget.
Aspetto e template dei widget
Controlla l’aspetto e il comportamento di ogni widget Umbrella nel tuo negozio online. Seleziona un tipo di widget dalla barra laterale, quindi usa le tre schede per configurarlo:
- Impostazioni — attiva funzionalità, scegli le modalità di visualizzazione, controlla la visibilità
- Template — modifica HTML e CSS con l’editor di codice
- Lingue — gestisci le stringhe di traduzione per il supporto multilingua
Tipi di widget
Pagina prodotto (PDP)
- Widget PDP — la scheda principale dell’offerta di garanzia nelle pagine prodotto
- Widget OEM PDP — informazioni sulla garanzia del produttore
- Modale di selezione — popup per scegliere le opzioni di garanzia
- Modale informativa — popup con i dettagli della protezione in garanzia
Carrello
- Carrello protetto — scheda di stato per gli articoli con protezione in garanzia
- Carrello non protetto — scheda di upsell per gli articoli senza protezione in garanzia
Stato dell’ordine
- Widget di stato dell’ordine — dettagli della garanzia nelle pagine di conferma/stato dell’ordine
- Modale di stato dell’ordine — modale dettagliata della garanzia dalla pagina di stato dell’ordine
Post-acquisto
- Scheda post-acquisto — upsell della garanzia nelle pagine di stato dell’ordine per i prodotti non coperti
- Modale post-acquisto — modale di selezione per gli upsell post-acquisto
Protezione spedizione
- Widget di protezione spedizione — offerta di protezione spedizione nella pagina del carrello
- Modale di protezione spedizione — modale informativa con i dettagli della protezione spedizione
Impostazioni del widget PDP
L’offerta di garanzia principale nelle pagine di dettaglio del prodotto. Attiva o disattiva Abilita scheda PDP per mostrarla o nasconderla.
Modalità di visualizzazione
| Modalità | Descrizione |
|---|---|
| In linea | Le opzioni di garanzia compaiono direttamente nella pagina come schede selezionabili |
| Modale | Un pulsante/banner apre una modale con le opzioni di garanzia |
| Individuale | Ogni opzione di garanzia viene mostrata come scheda autonoma |
Opzioni solo per la modalità In linea
- Scelta obbligatoria — obbliga i clienti a selezionare un’opzione di garanzia prima di aggiungere al carrello
- Seleziona automaticamente la prima opzione — preseleziona il primo piano (i clienti possono cambiarlo o rinunciare)
- Mostra opzione Nessuna copertura — mostra un’opzione “No, grazie” per rifiutare esplicitamente
Opzioni aggiuntive
- Apri la modale all’aggiunta al carrello — se non è selezionata alcuna garanzia, mostra una modale prima che l’articolo venga aggiunto
- Selettore di inserimento personalizzato — selettore CSS per controllare dove viene posizionato il widget nella pagina
- Posizione di inserimento personalizzata — Fuori sopra, Dentro in alto, Dentro in basso o Fuori sotto
- Usa template personalizzato — usa il tuo HTML/CSS al posto del design predefinito
- Nascondi il marchio Umbrella — rimuove il piè di pagina “Powered by Umbrella”
Impostazioni del widget OEM PDP
Mostra le informazioni sulla garanzia del produttore (OEM) nelle pagine prodotto, separate dalle offerte di garanzia estesa.
- Abilita widget OEM — mostra/nasconde il widget OEM
- Nascondi i dettagli della copertura — nasconde la descrizione dettagliata della copertura
- Nascondi la durata della garanzia — nasconde la durata della garanzia
- Usa template personalizzato / Nascondi il marchio Umbrella
Impostazioni della modale di selezione
Popup che mostra le opzioni di garanzia. Si apre dal widget PDP, dal carrello o all’aggiunta al carrello.
- Abilita modale di selezione
- Modalità di visualizzazione — In linea (schede selezionabili) o Individuale (schede autonome)
- Scelta obbligatoria — obbliga a scegliere prima di chiudere
- Seleziona automaticamente la prima opzione — preseleziona la prima opzione (solo modalità In linea)
- Usa template personalizzato / Nascondi il marchio Umbrella
Impostazioni della modale informativa
Mostra informazioni dettagliate sulla protezione in garanzia quando i clienti fanno clic sul pulsante informazioni/dettagli.
- Abilita modale informativa
- Usa template personalizzato / Nascondi il marchio Umbrella
Impostazioni del widget Carrello protetto
Compare sugli articoli del carrello che hanno già una protezione in garanzia.
- Abilita scheda carrello protetto
- Mostra pulsante modale informativa — consente ai clienti di vedere i dettagli della garanzia
- Mostra pulsante Rimuovi protezione — consente ai clienti di rimuovere la protezione in garanzia
- Nascondi la voce di garanzia estesa — mostra i dettagli della garanzia solo all’interno della scheda prodotto
- Nascondi fascia di prezzo della voce di garanzia — nasconde la fascia di prezzo nella riga della garanzia
- Nascondi i dettagli della voce di garanzia — nasconde le informazioni dettagliate sulla garanzia nella riga
- Aggiungi al totale della riga protetta — somma il prezzo della garanzia al totale mostrato del prodotto
- Disattiva le interazioni con la riga della garanzia — impedisce di modificare la quantità della riga della garanzia
- Usa template personalizzato / Nascondi il marchio Umbrella
Impostazioni del widget Carrello non protetto
Compare sugli articoli del carrello senza protezione in garanzia, offrendo ai clienti la possibilità di aggiungere una copertura.
- Abilita scheda carrello non protetto
- Modalità di visualizzazione — Modale, In linea o Individuale
- Solo In linea: Scelta obbligatoria, Seleziona automaticamente la prima opzione, Mostra opzione Nessuna copertura
- Mostra pulsante modale informativa
- Usa template personalizzato / Nascondi il marchio Umbrella
Impostazioni del widget di stato dell’ordine
Mostra le informazioni sulla polizza di garanzia nelle pagine di conferma e di stato dell’ordine.
- Abilita widget di stato dell’ordine
- Nascondi pulsante informazioni / Nascondi il pulsante del sinistro / Nascondi indicatore di stato / Nascondi il periodo di garanzia / Nascondi le informazioni sul periodo utile per i sinistri
- Usa template personalizzato / Nascondi il marchio Umbrella
Impostazioni della modale di stato dell’ordine
Modale dettagliata con tutti i dettagli della polizza di garanzia, accessibile dal widget di stato dell’ordine.
- Abilita modale di stato dell’ordine
- Nascondi ID polizza / Nascondi data di inizio / Nascondi data di fine / Nascondi il pulsante Visualizza polizza / Nascondi il pulsante Apri un sinistro
- Usa template personalizzato / Nascondi il marchio Umbrella
Impostazioni della scheda e della modale post-acquisto
Scheda post-acquisto — upsell della garanzia nelle pagine di stato dell’ordine per i prodotti non coperti. Attiva Abilita widget post-acquisto.
Modale post-acquisto — modale di selezione che si apre dalla scheda di upsell. Attiva Abilita modale post-acquisto.
Entrambe supportano Usa template personalizzato e Nascondi il marchio Umbrella.
Impostazioni del widget di protezione spedizione
Offerta di protezione spedizione nella pagina del carrello.
- Abilita widget di protezione spedizione
- Modalità di visualizzazione — Scelta a pulsanti (due pulsanti: aggiungi/rifiuta) o Casella di spunta (un unico interruttore)
- Opzioni della Scelta a pulsanti: HTML personalizzato del pulsante di checkout (supporta
{{{total}}}e{{{price}}}) e Testo personalizzato “Continua senza” - Usa template personalizzato / Nascondi il marchio Umbrella
Modale di protezione spedizione — modale informativa con i dettagli della protezione spedizione. Attiva Abilita modale di protezione spedizione.
Editor dei template
Ogni widget ha il proprio template HTML e CSS. Vi accedi dalla scheda Template.
- Editor HTML — usa la sintassi Handlebars (
{{variable}}per il testo con escape,{{{variable}}}per l’HTML grezzo). Le variabili disponibili sono elencate nel pannello Istruzioni. - Editor CSS — stili circoscritti al widget selezionato per evitare conflitti con il tuo tema.
- Pannello di anteprima — rendering in tempo reale con dati fittizi. Puoi alternare modalità chiara/scura, numero di opzioni, stato selezionato e stati di scadenza.
Fai clic su Ripristina predefinito per ripristinare il template originale se le tue personalizzazioni causano problemi.
Scheda Lingue
Gestisci le stringhe di traduzione di ciascun widget per supportare i negozi multilingua. Puoi visualizzare, aggiungere e modificare le chiavi di traduzione per ogni lingua supportata.
Correlati
- Impostazioni generali — valuta e restrizioni per paese
- Notifiche — avvisi email per gli eventi di garanzia
- Template email — personalizza il design delle email transazionali


