So gestaltest du den Klaviyo Customer Hub

Übersicht

Erfahre mehr über Designoptionen zum Gestalten deines Klaviyo Customer Hub-Drawers und wie du ihn passend zu deiner Marke designen kannst. Da die Oberfläche des Klaviyo Customer Hub fest in das Kund*innenerlebnis eingebunden ist, ist es Best Practice, sie so zu gestalten, dass sie wie eine Erweiterung deiner Website wirkt.

Bevor du anfängst

In diesem Leitfaden wird erklärt, wie du den Stil deiner Klaviyo Customer Hub-Oberfläche anpassen kannst. Bevor du fortfährst, stell sicher, dass die Klaviyo Customer Hub-Funktion aktiviert ist.

Mehr über den Klaviyo Customer Hub erfahren.

Designoptionen für Klaviyo Customer Hub

Der Drawer im Klaviyo Customer Hub hat mehrere anpassbare Tabs:

• Für dich
• Bestellungen
• Profil
• Chat (nur sichtbar, wenn Web-Chat aktiviert ist)
  
  

Du hast verschiedene Optionen, um das Design in jedem dieser Tabs anzupassen, darunter das Bearbeiten von Text, Farben, Schriftarten und mehr. Ausgewählte Anpassungen des Stils werden auf jeden Tab in der Klaviyo Customer Hub-Schublade übernommen, um ein konsistentes Markenerlebnis für die Besucher*innen deiner Website zu gewährleisten.

Wenn du die Designeinstellungen für deinen Klaviyo Customer Hub in Klaviyo bearbeitest, verwende die Schaltfläche Live ansehen, um die Änderungen an der Hub-Oberfläche auf deiner Website zu sehen. Beachte, dass, wenn dein Klaviyo Customer Hub live ist, gespeicherte Änderungen auf deiner Website veröffentlicht werden.

Passe für jeden Tab einen primären Call-to-Action an

Standardmäßig zeigt Klaviyo „Willkommen, first.name“ an, wenn Kund*innen sich in ihrem Konto anmelden als Hauptüberschrift auf dem Tab Für dich der Klaviyo Customer Hub-Schublade. Dieser Text kann nicht bearbeitet werden.

Für nicht authentifizierte Shopper*innen kannst du jedoch eine eigene Call-to-Action-Überschrift schreiben, die vor dem Button „Anmelden“ angezeigt wird, bevor sie sich einloggen. Das kann hilfreich sein, um nicht authentifizierte Besucher*innen dazu zu motivieren, sich anzumelden und mit deiner Klaviyo Customer Hub-Oberfläche zu interagieren.

Im folgenden Beispiel lautet der wichtigste Call-to-Action „Verdiene Prämien, verfolge Bestellungen und speichere deinen Einkaufsverlauf.“

Hinweis: Der Indikator „verfügbare Belohnungen“ wird automatisch angezeigt, wenn Folgendes zutrifft:

1. Ein im Klaviyo Customer Hub eingerichteter allgemeingültiger Gutschein ODER
2. Wenn du eine Integration für Treueprogramme aktiviert hast (z. B. Smile).

So aktualisierst du den Haupt-Call-to-Action für deine Klaviyo Customer Hub-Oberfläche:

1. Öffne in Klaviyos Navigation auf der linken Seite die Registerkarte Service - Klaviyo Customer Hub.
2. Klicke auf Einstellungen.
3. Unter Willkommensnachrichten kannst du einen Call-to-Action anpassen, der über der Schaltfläche „Anmelden“ für nicht authentifizierte Shopper*innen angezeigt wird. Das kannst du für jeden Tab des Klaviyo Customer Hub-Drawers tun:
   • Für dich
   • Bestellungen
   • Profil
     

4. Klicke auf Speichern.

Gestalte deinen Klaviyo Customer Hub

Für Designoptionen zum Anpassen deiner Klaviyo Customer Hub-Oberfläche:

1. Navigiere in Klaviyos linker Navigation zu Klaviyo Customer Hub.
2. Wähle Design aus.
3. Wähle oben in der Vorschau Hub aus.
   
   
   

4. Im Menü Style kannst du Einstellungen für Anzeigesprache, Schriftarten, Farbe und Stil anpassen und in der Canvas der Oberfläche von Klaviyo Customer Hub eine Vorschau anzeigen, wie diese Anpassungen aussehen werden.
5. Du kannst optional erweitertes Styling mit Custom CSS anwenden. Weitere Informationen findest du unten im Abschnitt Benutzerdefiniertes CSS.
6. Weitere Informationen zum Auswählen einer anderen Sprache findest du im Artikel Sprach- und Gebietsschema-Unterstützung im Klaviyo Customer Hub.
7. Klicke auf Speichern, um deine Änderungen livezuschalten.

Das Klaviyo Customer Hub-Widget anpassen

Neben dem Design von Klaviyo Customer Hub selbst kannst du auch das Widget des Hubs anpassen. Dabei handelt es sich um ein kleines, schwebendes Element auf deiner Website, auf das Besucher*innen klicken können, um die Klaviyo Customer Hub-Oberfläche schnell zu öffnen. Das Widget zeigt Shopper*innen relevante Informationen zum richtigen Zeitpunkt an, z. B. eingehende Chat-Nachrichten und Feedback beim Hinzufügen von Artikeln zu ihrer Favoritenliste. Wir empfehlen, die Widget-UI zu aktivieren, um sinnvolles Kundenengagement mit Kund*innen zu fördern, besonders wenn Web-Chat und Favoriten aktiviert sind.

So passt du das Hub-Widget an:

1. Wähle Klaviyo Customer Hub im linken Navigationsbereich von Klaviyo aus.
2. Wähle Design aus.
3. Wähle oben in der Vorschau Widget aus.

4. Im Menü Allgemein kannst du anpassen, welche Shopper*innen das Widget sehen sollen und welche Klaviyo Customer Hub-Ansicht geöffnet werden soll, wenn auf das Widget geklickt wird.
   • Wähle aus, welche Shopper*innen das Widget auf deiner Website sehen sollen:
     • Alle Shopper*innen (wiedererkannt, eingeloggt und ausgeloggt) – Das Widget wird allen angezeigt.
     • Erkannte oder angemeldete Shopper*innen – Das Widget wird nur angezeigt, wenn Klaviyo die Person erkennt (Identifiziert) oder wenn sie angemeldet ist (Authentifiziert). Dies ist ideal, um den Aufwand für brandneue Besucher*innen zu reduzieren und gleichzeitig ein High-Touch-Erlebnis für wiederkehrende Besucher*innen zu gewährleisten.
     • Nur eingeloggte Shopper*innen – Das Widget wird nur denjenigen angezeigt, die eine aktive Shopify-Session haben.
5. Im Menü Stil kannst du die Einstellungen für Farbe und Stil anpassen und in der Benutzeroberfläche des Klaviyo Customer Hub Widgets in der Leinwand eine Vorschau anzeigen, wie diese Anpassungen aussehen werden.
6. Im Menü Layout kannst du anpassen, wie das Widget auf deiner Website positioniert wird.
7. Klicke auf Speichern, um deine Änderungen livezuschalten.

Zusätzliche Widget-Zustände anpassen

Du kannst zusätzliche Widget-Status anpassen, indem du das Caret neben Icon auswählst und zu einem anderen Widget-Status navigierst.

• Der Status Add to Cart ist auf Produktdetailseiten sichtbar. Das anpassbare Widget ermutigt Käufer*innen dazu, einen Kauf zu tätigen oder ein Produkt für später zu speichern, wenn sie unter den oberen Bereich der Produktdetailseite gescrollt haben und die herkömmliche Schaltfläche „In den Warenkorb“ nicht mehr sichtbar ist. Weitere Informationen findest du unter So richtest du das Add to Cart Widget in Klaviyo Customer Hub ein.

Benutzerdefiniertes CSS für Klaviyo Customer Hub

Wenn deine Branding-Anforderungen durch die Designoptionen im Klaviyo Customer Hub nicht erfüllt werden, kannst du mit benutzerdefiniertem CSS erweitertes Styling anwenden.

Während Klaviyo Customer Hub CSS-Resets verwendet, um Kollisionen mit dem CSS deiner Website zu vermeiden, musst du möglicherweise benutzerdefiniertes CSS hinzufügen, um Edge Cases zu beheben oder ein einzigartiges Styling anzuwenden, z. B. eine schwebende Schublade oder benutzerdefinierte Rahmenradiuswerte.

Benutzerdefiniertes CSS anwenden

Füge beliebiges benutzerdefiniertes CSS direkt im Abschnitt Benutzerdefiniertes CSS in deinen Klaviyo Customer Hub-Designeinstellungen hinzu und achte darauf, deine Änderungen zu speichern.

Alle grundlegenden Elemente im Klaviyo Customer Hub haben Klassennamen, denen kl-hub- vorangestellt ist:

• Alle Textelemente haben die Klasse kl-hub-text, während Überschriften die Klasse haben kl-hub-heading
• Buttons haben die Klasse kl-hub-button und umfassen auch ihre Varianten (z. B. kl-hub-button-primary, kl-hub-button-secondary usw.).
• Der Klaviyo Customer Hub-Drawer selbst hat die Klasse kl-hub-drawer
• Texteingaben haben die Klasse kl-hub-input
• Alle Inhaltsblöcke haben die Klasse kl-hub-content-block und enthalten außerdem ihren Internen Namen (z. B. kl-hub-content-block-reward-program für einen Inhaltsblock mit dem Namen „Reward program“).

Dies ist keine vollständige Liste; du findest mehr, indem du den Klaviyo Customer Hub mit dem Debugger deines Browsers untersuchst. Wenn ein Element eine Klasse hat, die mit kl-hub- beginnt, kannst du sie sicher für benutzerdefiniertes CSS verwenden.

CSS-Beispiel

Wenn du alle Schaltflächen und Überschriften im Klaviyo Customer Hub in Großbuchstaben darstellen möchtest, könntest du das folgende benutzerdefinierte CSS schreiben:

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

    text-transform: uppercase;
}

Weitere Ressourcen