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
• Carrello (visibile solo se abilitato)
• Chat (visibile solo quando la web chat è abilitata)
• Profilo

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.

Quando modifichi le impostazioni di design per il tuo Customer Hub in Klaviyo, usa il pulsante Anteprima per vedere le modifiche apportate all'interfaccia dell'hub sul tuo sito web.

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 Sito web > Customer Hub nel menu di navigazione a sinistra di Klaviyo.
2. Apri Design > Modifica il tuo hub
3. Nel pannello del layout a destra, in Layout fisso, personalizza un call-to-action da mostrare nel blocco Accesso. Puoi farlo per ogni scheda del pannello 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 nella scheda Sito web.
2. Seleziona Design nella navigazione di Customer Hub.
3. Nella parte superiore della pagina Progettazione, vedrai una scheda che mostra lo stato del tuo Customer Hub. Seleziona il pulsante Modifica il tuo Customer Hub per accedere al Customer Hub Editor.
   

4. Nell'editor, seleziona l'icona della tavolozza dal menu di navigazione a sinistra.
5. 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

6. Facoltativamente, puoi applicare uno stile avanzato con CSS personalizzato. Consulta la sezione CSS personalizzato qui sotto per maggiori dettagli.
7. Per maggiori informazioni su come selezionare un’altra lingua, consulta l’articolo Supporto per lingua e impostazioni internazionali in Customer Hub.
8. Fai clic su Pubblica per pubblicare le modifiche.

Personalizza il widget di Customer Hub

Oltre a progettare Customer Hub, puoi anche personalizzare il widget dell’hub, un piccolo elemento mobile sul tuo sito web su cui i visitatori possono fare clic per aprire rapidamente l’interfaccia di Customer Hub. Il widget mostra informazioni tempestive a chi acquista, come i messaggi di chat in arrivo e il feedback quando aggiunge articoli alla lista Preferiti. Ti consigliamo di abilitare l’interfaccia utente del widget per favorire un coinvolgimento degli utenti significativo con i clienti, ma non è obbligatorio per avere l’Hub attivo.

Per personalizzare il widget dell'hub:

1. Apri l’ editor di Customer Hub.
2. Nel pannello di controllo mobile sopra il tuo Hub, cambia lo stato da Aperto a Chiuso. Questo dovrebbe aprire il pannello a comparsa Modifica widget .
3. Nella sezione Impostazioni widget puoi modificare quali acquirenti dovrebbero vedere il widget e quale vista di Customer Hub dovrebbe 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.
4. Puoi anche configurare la forma, il colore, l'icona e il layout del tuo widget.

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