Så formger du din Klaviyo Customer Hub

Du kommer att lära dig

Läs mer om designalternativ för att formge din Klaviyo Customer Hub-drawer och hur du kan designa den så att den matchar ditt varumärke. Eftersom gränssnittet i Klaviyo Customer Hub är en integrerad del av kundupplevelsen är det bästa praxis att formge det så att det känns som en förlängning av din webbplats.

Innan du börjar

Den här guiden förklarar hur du anpassar stilen för ditt Klaviyo Customer Hub-gränssnitt. Innan du fortsätter ska du se till att funktionen Klaviyo Customer Hub är aktiverad.

Läs mer om Klaviyo Customer Hub.

Designalternativ för Klaviyo Customer Hub

Klaviyo Customer Hub-panelen har flera anpassningsbara flikar:

• För dig
• Beställningar
• Kundvagn (syns bara när den är aktiverad)
• Chatt (visas endast när Webbchatt är aktiverat)
• Profil

Du har olika alternativ för att anpassa designen på var och en av dessa flikar, inklusive att redigera text, färger, teckensnitt med mera. Valen för stilanpassning tillämpas i kaskad över varje flik i Klaviyo Customer Hub-panelen för att säkerställa en konsekvent och varumärkesanpassad upplevelse för dina webbplatsbesökare.

När du redigerar designinställningarna för din Klaviyo Customer Hub i Klaviyo kan du använda knappen Förhandsgranska för att se ändringarna som gjorts i navets gränssnitt på din webbplats.

Anpassa en huvudsaklig uppmaning för varje flik

Som standard visar Klaviyo ”Welcome, first.name” när en kund loggar in på sitt kundkonto som huvudrubrik på fliken För dig i Klaviyo Customer Hub-panelen. Den här texten går inte att redigera.

För oautentiserade kunder kan du dock skriva din egen rubrik för uppmaningen som ska visas ovanför knappen ”Logga in” innan de loggar in. Det kan vara användbart för att uppmuntra oautentiserade besökare att logga in och engagera sig i ditt gränssnitt i Klaviyo Customer Hub.

I exemplet nedan lyder den primära uppmaningen ”Tjäna belöningar, spåra beställningar och spara din shoppinghistorik.”

Obs: indikatorn ”belöningar tillgängliga” visas automatiskt om du har antingen:

1. En statisk kupong som är konfigurerad i Klaviyo Customer Hub, ELLER
2. Om du har en lojalitetsintegration aktiverad (som Smile).

Så här uppdaterar du Huvuduppmaning för ditt gränssnitt i Klaviyo Customer Hub:

1. Öppna fliken Website > Klaviyo Customer Hub i Klaviyos vänstra navigeringsfält.
2. Öppna Design > Edit your Hub
3. I layoutpanelen till höger, under Fast layout, anpassar du en uppmaning som ska visas i inloggningsblocket. Du kan göra detta för varje flik i lådan Klaviyo Customer Hub:
   • För dig
   • Beställningar
   • Profil
4. Klicka på Spara.

Designa din Klaviyo Customer Hub

För designalternativ för att anpassa gränssnittet i Klaviyo Customer Hub:

1. Gå till Klaviyo Customer Hub under fliken Webbplats.
2. Välj Design i navigeringen i Klaviyo Customer Hub.
3. Högst upp på sidan Design ser du ett kort som visar statusen för din hubb. Välj knappen Redigera din hubb för att öppna redigeraren för Klaviyo Customer Hub.
   

4. I redigeraren väljer du palettikonen i navigeringen i vänsterspalten.
5. I menyn Style kan du justera inställningarna för visningsspråk, teckensnitt, färg och stil samt förhandsgranska hur dessa justeringar kommer att se ut i gränssnittscanvasen för Klaviyo Customer Hub

6. Du kan även använda avancerad styling med anpassad CSS. Se avsnittet Anpassad CSS nedan för mer information.
7. Se artikeln Språk- och språkområdesstöd i Klaviyo Customer Hub för mer information om hur du väljer ett annat språk.
8. Klicka på Publicera för att göra dina ändringar aktiva.

Anpassa widgeten för Klaviyo Customer Hub

Förutom att utforma själva Klaviyo Customer Hub kan du även anpassa hubbens widget, ett litet, flytande element på din webbplats som besökare kan klicka på för att snabbt öppna gränssnittet för Klaviyo Customer Hub. Widgeten visar aktuell information för din kund, till exempel inkommande chattmeddelanden och återkoppling när de lägger till varor i sin lista med Favoriter. Vi rekommenderar att du aktiverar widgetens UI för att driva meningsfullt engagemang med kunder, men det krävs inte för att ha Hub live.

Så här anpassar du hubbwidgeten:

1. Gå till Klaviyo Customer Hub- redigeraren.
2. I den flytande kontrollpanelen ovanför din Hub växlar du status från Öppen till Stängd. Detta bör öppna utfällningspanelen Redigera widget .
3. I avsnittet Widget-inställningar kan du justera vilka kunder som ska se widgeten och vilken Klaviyo Customer Hub-vy som ska öppnas när widgeten klickas på.
   • Välj vilka kunder som ska se widgeten på din webbplats:
     • Alla shoppare (igenkända, inloggade och utloggade) – Widgeten visas för alla.
     • Igenkända eller inloggade shoppare – Widgeten visas bara om Klaviyo känner igen personen (identifierad) eller om personen är inloggad (autentiserad). Det här är perfekt för att minska röran för helt nya besökare, samtidigt som du behåller en upplevelse med hög grad av personlig service för återkommande besökare.
     • Endast inloggade kunder – widgeten visas bara för personer med en aktiv Shopify-session.
4. Du kan också konfigurera formen, färgen, ikonen och layouten för din widget.

Anpassa ytterligare widgetstatusar

Du kan anpassa fler widgettillstånd genom att välja nedåtpilen bredvid Icon och navigera till ett annat widgettillstånd.

• Tillståndet Lägg till i varukorgen är synligt på produktsidor. Den anpassningsbara widgeten uppmuntrar kunder att genomföra ett köp eller spara en produkt till senare när de har rullat ned under toppen av produktsidan och den vanliga knappen Lägg till i varukorgen inte längre syns. Läs mer om så här konfigurerar du widgeten Lägg till i varukorgen i Klaviyo Customer Hub.

Anpassad CSS för Klaviyo Customer Hub

Om dina varumärkesbehov inte uppfylls av designalternativen i Klaviyo Customer Hub kan du använda avancerad styling med anpassad CSS.

Även om Klaviyo Customer Hub använder CSS-återställningar för att undvika krockar med din webbplats CSS kan du behöva lägga till anpassad CSS för att hantera specialfall eller tillämpa unik styling, till exempel en flytande drawer eller anpassade värden för kantradie.

Använd anpassad CSS

Lägg till anpassad CSS direkt i avsnittet Custom CSS i dina designinställningar för Klaviyo Customer Hub och se till att spara ändringarna.

Alla grundläggande element i Klaviyo Customer Hub har klassnamn med prefixet kl-hub-:

• Alla textelement har klassen kl-hub-text, medan rubriker har klassen kl-hub-heading
• Knappar har klassen kl-hub-button och inkluderar även deras variationer (t.ex. kl-hub-button-primary, kl-hub-button-secondary osv.)
• Själva Klaviyo Customer Hub-lådan har klassen kl-hub-drawer
• Textinmatningar har klassen kl-hub-input
• Alla innehållsblock har klassen kl-hub-content-block och inkluderar även blockets internt namn (t.ex. kl-hub-content-block-reward-program för ett innehållsblock som heter "Belöningsprogram")

Det här är ingen fullständig lista; du kan hitta fler genom att granska Klaviyo Customer Hub med webbläsarens debugger. Om ett element har en klass som börjar med kl-hub- är det säkert att använda för anpassad CSS.

CSS-exempel

Om du vill göra alla knappar och rubriker i Klaviyo Customer Hub till versaler kan du skriva följande anpassade CSS:

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

    text-transform: uppercase;
}

Ytterligare resurser