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
• Profil
• Chat (visas bara när Webbchatt är aktiverad)
  
  

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 använder du knappen Visa live för att se ändringarna som gjorts i hubbgränssnittet på din webbplats. Observera att om din Klaviyo Customer Hub är live publiceras sparade ändringar 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 Service - Klaviyo Customer Hub i Klaviyos vänstra navigering.
2. Klicka på Inställningar.
3. Under Välkomstmeddelanden kan du anpassa en uppmaning som visas ovanför knappen "logga in" för oautentiserade kunder. Du kan göra detta för varje flik i Klaviyo Customer Hub-panelen:
   • 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. Navigera till Klaviyo Customer Hub i Klaviyos vänstra navigeringsfält.
2. Välj Design.
3. Välj Hub längst upp i förhandsgranskningen.
   
   
   

4. 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
5. Du kan även använda avancerad styling med anpassad CSS. Se avsnittet Anpassad CSS nedan för mer information.
6. 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.
7. Klicka på Spara för att publicera dina ändringar.

Anpassa widgeten för Klaviyo Customer Hub

Förutom att designa själva Klaviyo Customer Hub kan du också anpassa hubbens widget, som är 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 feedback när de lägger till artiklar i sin lista över Favoriter. Vi rekommenderar att du aktiverar widgetens användargränssnitt för att skapa meningsfullt engagemang med kunder, särskilt när Webbchatt och Favoriter är aktiverade.

Så här anpassar du hubbwidgeten:

1. Välj Klaviyo Customer Hub i Klaviyos vänstra navigeringsfält.
2. Välj Design.
3. Välj widget längst upp i förhandsgranskningen.

4. I menyn Allmänt kan du justera vilka kunder som ska se widgeten och vilken vy i Klaviyo Customer Hub som ska öppnas när du klickar på widgeten.
   • 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.
5. I menyn Stil kan du justera inställningarna för färg och stil och förhandsgranska hur dessa justeringar kommer att se ut i gränssnittspanelen för Klaviyo Customer Hub-widgeten.
6. I menyn Layout kan du justera hur widgeten är placerad på din webbplats.
7. Klicka på Spara för att publicera dina ändringar.

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