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
• Warenkorb (nur sichtbar, wenn aktiviert)
• Chat (nur sichtbar, wenn Web-Chat aktiviert ist)
• Profil

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 Vorschau, um die am Hub-Interface auf deiner Website vorgenommenen Änderungen zu sehen.

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 der linken Navigation von Klaviyo die Registerkarte Website > Klaviyo Customer Hub.
2. Öffne Design > Bearbeite deinen Hub
3. Passe in der Layout-Schublade auf der rechten Seite unter Festes Layout einen Call-to-Action an, der im Anmeldeblock angezeigt wird. Das kannst du für jeden Tab der Klaviyo Customer Hub-Schublade machen:
   • 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 zum Klaviyo Customer Hub unter dem Tab „Website“.
2. Wähle Design in der Navigation des Klaviyo Customer Hub aus.
3. Oben auf der Design-Seite siehst du eine Karte, die den Status deines Hubs anzeigt. Wähle die Schaltfläche Deinen Hub bearbeiten aus, um den Klaviyo Customer Hub Editor zu öffnen.
   

4. Wähle im Editor das Palettensymbol in der linken Seitenleisten-Navigation aus.
5. 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.

6. Du kannst optional erweitertes Styling mit Custom CSS anwenden. Weitere Informationen findest du unten im Abschnitt Benutzerdefiniertes CSS.
7. Weitere Informationen zum Auswählen einer anderen Sprache findest du im Artikel Sprach- und Gebietsschema-Unterstützung im Klaviyo Customer Hub.
8. Klicke auf Veröffentlichen, um deine Änderungen livezuschalten.

Das Klaviyo Customer Hub-Widget anpassen

Neben dem Design des Klaviyo Customer Hub selbst kannst du auch das Widget anpassen. Dabei handelt es sich um ein kleines, schwebendes Element auf deiner Website, das Besucher*innen anklicken können, um die Klaviyo Customer Hub-Oberfläche schnell zu öffnen. Das Widget zeigt Käufer*innen aktuelle Informationen wie eingehende Chat-Nachrichten und Feedback beim Hinzufügen von Artikeln zu ihrer Favoritenliste. Wir empfehlen, die Widget-UI zu aktivieren, um ein aussagekräftiges Kundenengagement zu fördern, aber sie ist nicht erforderlich, um den Hub live zu schalten.

So passt du das Hub-Widget an:

1. Öffne den Editorfür den Klaviyo Customer Hub.
2. Schalte im schwebenden Bedienfeld über deinem Hub den Status von Offen auf Geschlossen um. Dadurch sollte sich das Slide-out Widget bearbeiten öffnen.
3. Im Abschnitt „Widget-Einstellungen“ kannst du anpassen, welche Käufer*innen das Widget sehen sollen und welche Klaviyo Customer Hub-Ansicht geöffnet werden soll, wenn das Widget angeklickt 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.
4. Du kannst auch die Form, Farbe, das Symbol und das Layout deines Widgets konfigurieren.

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