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.

Dashboard → Impostazioni → Aspetto

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 lineaLe opzioni di garanzia compaiono direttamente nella pagina come schede selezionabili
ModaleUn pulsante/banner apre una modale con le opzioni di garanzia
IndividualeOgni 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.

Attenzione Il ripristino di un template non può essere annullato. Salva il codice personalizzato che vuoi conservare prima del ripristino.

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

Prenota una demo

Scopri come myUmbrella può trasformare il tuo programma di garanzie

Scegli un orario

Scegli l'orario più comodo per la tua demo personalizzata

ESC

Inizia a digitare per cercare in tutti i contenuti

Nessun risultato trovato

Prova con un altro termine di ricerca