Übersicht
Erfahre mehr über die Designoptionen für deine Klaviyo Customer Hub Schublade und wie du sie passend zu deiner Marke gestalten kannst. Da die Klaviyo Customer Hub-Oberfläche fest in das Kundenerlebnis integriert ist, ist es am besten, sie so zu gestalten, dass sie wie eine Erweiterung deiner Website aussieht.
Klaviyo Customer Hub ist Teil von Klaviyo Service und der Zugang zur Beta-Version wird schrittweise ausgerollt. Wenn du noch keinen Zugriff auf die Registerkarte Klaviyo Customer Hub in der Hauptnavigation von Klaviyohast, nimm an der Klaviyo Customer Hub Beta teil. Beachte, dass du ein bezahltes Klaviyo E-Mail-Abonnement haben musst, um zugelassen zu werden. Die Teilnahme an dieser Beta ist derzeit nur in englischer Sprache für diejenigen möglich, die einen Shopify Online-Shop betreiben.
Da sich das Produkt noch in der Beta-Phase befindet, ist der Funktionsumfang noch nicht vollständig und kann während der Beta-Phase noch häufig geändert werden. Wenn du Klaviyo Customer Hub über den Onboarding-Workflow aktivierst, erklärst du dich mit den Beta-Bedingungen einverstanden. Während diese Funktionen während der Beta-Phase kostenlos sind, werden sie zum Start der allgemeinen Verfügbarkeit separat verkauft.
Wenn du uns Feedback zu den Funktionen des Klaviyo Customer Hub geben möchtest, sende eine E-Mail an customerhub@klaviyo.com.
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, stelle sicher, dass die Klaviyo Customer Hub Funktionen aktiviert sind.
Erfahre mehr über den Klaviyo Customer Hub.
Styling Klaviyo Customer HubStyling Klaviyo Customer Hub
Die Schublade des Klaviyo Customer Hub hat mehrere anpassbare Registerkarten:
- Für dich
- Bestellungen
- Profil
- Chat (nur sichtbar, wenn der Webchat aktiviert ist)
Du hast verschiedene Möglichkeiten, das Design auf jeder dieser Registerkarten anzupassen, z. B. Text, Farben, Schriftarten und mehr. Die Auswahl der Stilanpassung wird auf alle Registerkarten im Klaviyo Customer Hub übertragen, um ein konsistentes, markengerechtes Erlebnis für deine Website-Besucher zu gewährleisten.
Das Aussehen der meisten Elemente in der Klaviyo Customer Hub Schublade kann angepasst werden, ihre Position jedoch nicht. Derzeit sind nur allgemeine Layout-Optionen verfügbar.
Wenn du die Design-Einstellungen für deinen Klaviyo Customer Hub auf Klaviyo bearbeitest, kannst du die Änderungen an der Hub-Oberfläche auf deiner Website über die Schaltfläche Live ansehen. Wenn dein Klaviyo Customer Hub live ist, werden gespeicherte Änderungen auf deiner Website veröffentlicht.
Anpassen einer Haupt-Call-to-ActionAnpassen einer Haupt-Call-to-Action
Wenn sich ein Kunde bei seinem Kundenkonto anmeldet, zeigt Klaviyo standardmäßig "Willkommen, Vorname" an. als Hauptüberschrift auf der Registerkarte Für dich im Klaviyo Customer Hub. Dieser Text ist nicht editierbar.
Für nicht-authentifizierte Kunden kannst du jedoch eine eigene Call-to-Action-Überschrift schreiben, die über der Schaltfläche "Los geht's" angezeigt wird, bevor sie sich anmelden. Dies kann hilfreich sein, um unauthentifizierte Besucher dazu zu bewegen, sich anzumelden und mit deiner Klaviyo Customer Hub Oberfläche zu interagieren.
Im folgenden Beispiel lautet der Haupt-Call-to-Action: "Verdiene Prämien, verfolge deine Bestellungen und speichere deinen Einkaufsverlauf."
So aktualisierst du die Haupt-Call-to-Action für dein Klaviyo Customer Hub Interface:
- Öffne den Reiter Klaviyo Customer Hub in der linken Navigation von Klaviyo.
- Wähle die Einstellungen in der oberen rechten Ecke.
- Inhalt auswählen.
- Passe unter Hauptaufruf eine Aufforderung zur Handlung an, die über der Schaltfläche Erste Schritte für nicht authentifizierte Kunden angezeigt wird.
- Klicke auf Speichern.
Design Einstellungen
Für Designoptionen zur Anpassung deiner Klaviyo Customer Hub-Oberfläche:
- Navigiere in der linken Navigation von zu Klaviyo Customer Hub. Klaviyo
- Gehe zu Einstellungen.
- Öffne das Menü Design.
Du kannst die folgenden Farb- und Stileinstellungen vornehmen:
-
Schriftarten
-
Schriftart für Überschriften
Wird für Überschriften auf jeder Registerkarte des Klaviyo Customer Hub verwendet. Wähle " Von Website übernehmen", um die Schriftart, die in anderen Überschriften auf deiner Website verwendet wird, automatisch zu übernehmen. -
Farbe der Überschrift
Wird für den Überschriftentext auf jeder Registerkarte des Klaviyo Customer Hub verwendet. -
Absatzschriftart
Wird für den Text in den einzelnen Abschnitten, dem Inhaltsblock und der Schaltfläche verwendet. Wähle " Von Website übernehmen", um die in anderen Absätzen auf deiner Website verwendete Schriftart automatisch zu übernehmen. -
Absatzfarbe
Wird für alle Schaltflächen, Inhaltsblöcke und Abschnittstexte im Klaviyo Customer Hub verwendet.
-
Schriftart für Überschriften
-
Buttons
-
Buttonfarbe
Die Hintergrundfarbe für alle Buttons im Klaviyo Customer Hub. -
Textfarbe der Schaltflächen
Die Farbe des Textes auf allen Schaltflächen im Klaviyo Customer Hub.
-
Buttonfarbe
-
Layout
-
Stil
Die Form der Ränder von Inhaltsblöcken, Schaltflächen und Abschnitten im Klaviyo Customer Hub. -
Position auf dem Desktop
Von wo aus die Klaviyo Customer Hub Schublade herausgleitet (linke oder rechte Seite des Ansichtsfensters). Wenn deine Marke eine Warenkorbschublade verwendet, solltest du eine linksbündige Positionierung wählen, damit sie sich nicht mit dem Klaviyo Customer Hub überschneidet. -
Hintergrundfarbe
Die Grundfarbe von Klaviyo Customer Hub unter dem Text, dem Inhaltsblock und den Erweiterungen.
-
Stil
Hub Launcher Widget
Du kannst nicht nur den Klaviyo Customer Hub selbst gestalten, sondern auch ein Hub Launcher Widget, ein kleines, schwebendes Element auf deiner Website, auf das Besucher klicken können, um den Klaviyo Customer Hub schnell zu öffnen. Dies wird oft in Verbindung mit der Web-Chat-Funktion von Klaviyo Customer Hub verwendet. Ein Hub Launcher Widget funktioniert ähnlich wie ein Formular-Teaser, der die Besucher auf ihrer Reise auf deiner Website begleitet.
Du kannst das Widget des Hub Launcher anpassen:
-
Sichtbarkeit
- Welche Website-Besucher das Widget sehen und anklicken können
-
Widget-Form
- Die Form der Kanten des Widgets
-
Standort der Seite
- Wo auf einer Webseite das Widget schwebt
-
Abstände
- Abstand von der linken/rechten und oberen/unteren Ecke, je nach Position des Widgets
-
Widget-Hintergrundfarbe
- Grundfarbe des Widgets
Benutzerdefiniertes CSS für Klaviyo Customer Hub
Wenn die Designoptionen des Klaviyo Customer Hub nicht ausreichen, kannst du mit Custom CSS ein erweitertes Styling anwenden.
Während Klaviyo Customer Hub CSS-Rückstellungen verwendet, um Kollisionen mit dem CSS deiner Website zu vermeiden, musst du eventuell benutzerdefiniertes CSS hinzufügen, um Randfälle zu lösen oder ein einzigartiges Styling anzuwenden, wie z. B. fließende Schubladen oder benutzerdefinierte Randradiuswerte.
Um benutzerdefinierte CSS für deinen Klaviyo Customer Hub zu implementieren, musst du den Code deiner Website bearbeiten. Dies wird nur für technisch versierte Marketer empfohlen oder für diejenigen, die Zugang zu einem Entwickler haben. Unser Produkt unterstützt zwar benutzerdefinierte CSS, aber unser Support-Team kann dir nicht dabei helfen, benutzerdefinierte CSS zu Klaviyo Customer Hub hinzuzufügen, die über die allgemeine Anleitung in dieser Dokumentation hinausgehen. Um die Sicherheit deiner Daten zu gewährleisten, kann das Support-Team von Klaviyo deine HTML-Dateien nicht öffnen.
Benutzerdefiniertes CSS anwenden
Füge alle benutzerdefinierten CSS direkt in den Abschnitt " Benutzerdefinierte CSS" in den Designeinstellungen deines Klaviyo Customer Hub ein und speichere deine Änderungen.
Alle Basiselemente im Klaviyo Customer Hub haben Klassennamen mit dem Präfix kl-hub-
:
- Alle Textelemente haben die Klasse
kl-hub-text
, während Überschriften die Klassekl-hub-heading
haben - Schaltflächen haben die Klasse
kl-hub-button
und umfassen auch ihre Varianten (z. B.kl-hub-button-primär
,kl-hub-button-sekundär
, usw.) - Die Klaviyo Customer Hub Schublade selbst hat die Klasse
kl-hub-drawer
- Texteingaben haben die Klasse
kl-hub-input
Diese Liste ist nicht vollständig; du kannst mehr finden, wenn du den Klaviyo Customer Hub mit dem Debugger deines Browsers untersuchst. Wenn ein Element eine Klasse hat, die mit kl-hub-
beginnt, kann es sicher für benutzerdefiniertes CSS verwendet werden.
CSS-Beispiel
Wenn du alle Schaltflächen und Überschriften im Klaviyo Customer Hub in Großbuchstaben schreiben möchtest, könntest du das folgende benutzerdefinierte CSS schreiben:
.kl-hub-button, .kl-hub-heading {Weitere Ressourcen
text-transform: uppercase;
}