Come definire lo stile del tuo Customer Hub

Cosa imparerai

Scopri le opzioni di design per lo stile del drawer di Customer Hub e come puoi progettarlo in modo che rispecchi il tuo brand. Poiché l'interfaccia di Customer Hub è parte integrante dell'esperienza del cliente, la best practice è applicarne lo stile in modo che appaia come un'estensione del tuo sito web.

Prima di iniziare

Questa guida spiega come personalizzare lo stile dell'interfaccia di Customer Hub. Prima di procedere, assicurati che la funzionalità Customer Hub sia abilitata.

Scopri di più sul Customer Hub.

Opzioni di progettazione del Customer Hub

Il riquadro a scomparsa di Customer Hub ha più schede personalizzabili:

• Per te
• Ordini
• Profilo
• Chat (visibile solo quando la web chat è abilitata)
  
  

Hai diverse opzioni per personalizzare il design in ciascuna di queste schede, inclusa la modifica di testo, colori, caratteri e altro. Le selezioni di personalizzazione dello stile si applicano in modo a cascata in ciascuna scheda del pannello laterale di Customer Hub per garantire un'esperienza coerente e in linea con il brand per i visitatori del tuo sito.

Mentre modifichi le impostazioni di design del tuo Customer Hub in Klaviyo, usa il pulsante Visualizza live per vedere le modifiche apportate all'interfaccia dell'hub sul tuo sito web. Tieni presente che, se il tuo Customer Hub è live, le modifiche salvate vengono pubblicate sul tuo sito.

Personalizza un call-to-action principale per ogni scheda

Per impostazione predefinita, quando un acquirente accede al proprio account cliente, Klaviyo mostra “Ti diamo il benvenuto, first.name”. come intestazione principale nella scheda Per te del pannello a scomparsa di Customer Hub. Questo testo non è modificabile.

Per gli acquirenti non autenticati, però, puoi scrivere un'intestazione call-to-action personalizzata da mostrare sopra il pulsante "Accedi" prima che effettuino l'accesso. Questo può essere utile per incentivare i visitatori non autenticati ad accedere e interagire con la tua interfaccia Customer Hub.

Nell’esempio seguente, il call-to-action principale riporta “Guadagna premi, traccia gli ordini e salva la tua cronologia degli acquisti”.

Nota: l'indicatore "premi disponibili" viene visualizzato automaticamente se hai uno dei seguenti:

1. Un coupon statico configurato in Customer Hub, OPPURE
2. Se hai un’integrazione fedeltà abilitata (come Smile).

Per aggiornare la call-to-action principale per l'interfaccia del tuo Customer Hub:

1. Apri la scheda Servizio - Customer Hub nel menu di navigazione a sinistra di Klaviyo.
2. Fai clic su Impostazioni.
3. In Messaggi di benvenuto, personalizza una call-to-action da visualizzare sopra il pulsante "accedi" per i visitatori non autenticati. Puoi farlo per ogni scheda del drawer di Customer Hub:
   • Per te
   • Ordini
   • profilo
     

4. Clicca su Salva.

Progetta il tuo Customer Hub

Per le opzioni di design per personalizzare l’interfaccia di Customer Hub:

1. Vai a Customer Hub nel menu di navigazione a sinistra su Klaviyo.
2. Seleziona Design.
3. Seleziona Hub nella parte superiore dell'anteprima.
   
   
   

4. Dal menu Stile puoi modificare le impostazioni di lingua di visualizzazione, font, colore e stile e visualizzare in anteprima come appariranno queste modifiche nell’area di disegno dell’interfaccia di Customer Hub
5. Facoltativamente, puoi applicare uno stile avanzato con CSS personalizzato. Consulta la sezione CSS personalizzato qui sotto per maggiori dettagli.
6. Per maggiori informazioni su come selezionare un’altra lingua, consulta l’articolo Supporto per lingua e impostazioni internazionali in Customer Hub.
7. Fai clic su Salva per pubblicare le modifiche.

Personalizza il widget di Customer Hub

Oltre a progettare Customer Hub, puoi anche personalizzare il widget dell'hub, che è un piccolo elemento mobile e flottante sul tuo sito web su cui i visitatori possono fare clic per aprire rapidamente l'interfaccia di Customer Hub. Il widget presenta informazioni tempestive al tuo acquirente, come messaggi di chat in arrivo e feedback quando aggiunge articoli alla lista dei Preferiti. Consigliamo di abilitare l'interfaccia utente del widget per aumentare il coinvolgimento degli utenti con i clienti, soprattutto quando web chat e Preferiti sono abilitati.

Per personalizzare il widget dell'hub:

1. Seleziona Customer Hub nel menu di navigazione a sinistra di Klaviyo.
2. Seleziona Design.
3. Seleziona Widget nella parte superiore dell'anteprima.

4. Dal menu Generale puoi regolare quali acquirenti devono vedere il widget e quale vista di Customer Hub deve aprirsi quando si fa clic sul widget.
   • Scegli quali acquirenti devono vedere il widget sul tuo sito:
     • Tutti gli acquirenti (riconosciuti, con accesso effettuato e senza accesso effettuato) – Il widget viene visualizzato per tutti.
     • Acquirenti riconosciuti o con accesso effettuato – Il widget viene visualizzato solo se Klaviyo riconosce la persona (Identified) o se ha effettuato l'accesso (Authenticated). È l'ideale per ridurre il disordine per i visitatori del tutto nuovi, mantenendo al contempo un'esperienza ad alto contatto per quelli di ritorno.
     • Solo acquirenti che hanno effettuato l’accesso – Il widget appare solo per chi ha una sessione Shopify attiva.
5. Dal menu Stile puoi regolare le impostazioni di colore e stile e vedere in anteprima come appariranno queste modifiche nell’area di disegno dell’interfaccia del widget di Customer Hub
6. Dal menu Layout puoi regolare la posizione del widget sul sito web.
7. Fai clic su Salva per pubblicare le modifiche.

Personalizza stati aggiuntivi del widget

Puoi personalizzare altri stati del widget selezionando il cursore a discesa accanto a Icona e andando a un altro stato del widget.

• Lo stato Aggiungi al carrello è visibile nelle pagine dei dettagli del prodotto. Il widget personalizzabile incoraggia gli acquirenti a effettuare un acquisto o a salvare un prodotto per dopo quando hanno scorso sotto la parte superiore della pagina dei dettagli del prodotto, quando il pulsante tradizionale Aggiungi al carrello non è più visibile. Scopri di più su come configurare il widget Aggiungi al carrello in Customer Hub.

CSS personalizzato per Customer Hub

Se le opzioni di design di Customer Hub non soddisfano le tue esigenze di branding, puoi applicare uno stile avanzato con CSS personalizzato.

Anche se Customer Hub utilizza reset CSS per evitare conflitti con i CSS del tuo sito, potresti dover aggiungere CSS personalizzati per gestire casi limite o applicare uno stile unico, ad esempio un cassetto flottante o valori personalizzati di raggio del bordo.

Applica CSS personalizzato

Aggiungi qualsiasi CSS personalizzato direttamente alla sezione Custom CSS nelle impostazioni di design di Customer Hub e assicurati di salvare le modifiche.

Tutti gli elementi di base all’interno del Customer Hub hanno nomi di classe con il prefisso kl-hub-:

• Tutti gli elementi di testo hanno la classe kl-hub-text, mentre le intestazioni hanno la classe kl-hub-heading
• I pulsanti hanno la classe kl-hub-button e includono anche le rispettive varianti (ad es. kl-hub-button-primary, kl-hub-button-secondary e così via).
• Il cassetto di Customer Hub ha la classe kl-hub-drawer
• Gli input di testo hanno la classe kl-hub-input
• Tutti i blocchi di contenuto hanno la classe kl-hub-content-block e includono anche il loro Nome interno del blocco (ad es. kl-hub-content-block-reward-program per un blocco di contenuto denominato "Reward program")

Questo elenco non è esaustivo; puoi trovarne altri ispezionando Customer Hub con il debugger del browser. Se un elemento ha una classe che inizia con kl-hub-, è sicuro usarla per i CSS personalizzati.

Esempio di CSS

Se vuoi rendere maiuscoli tutti i pulsanti e le intestazioni nel Customer Hub, puoi scrivere il seguente CSS personalizzato:

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}

Risorse aggiuntive