Hoe je je Klaviyo Customer Hub kunt stylen

Wat je leert

Leer meer over de ontwerpopties voor het stylen van je Klaviyo Customer Hub-lade en hoe je deze kunt aanpassen aan je merk. Omdat de Klaviyo Customer Hub interface ingebakken zit in de klantervaring, is het de beste gewoonte om deze zo te stylen dat hij lijkt op een uitbreiding van je website.

Voordat je van start gaat

In deze handleiding wordt uitgelegd hoe je de stijl van je Klaviyo Customer Hub interface kunt aanpassen. Controleer voordat u verder gaatof de Klaviyo Customer Hub functies zijn ingeschakeld.

Meer informatie over Klaviyo Customer Hub.

Ontwerpopties voor de Customer Hub

De Klaviyo Customer Hub-lade heeft meerdere aanpasbare tabbladen:

• Voor jou
• Bestellingen
• Profiel
• Chat (alleen zichtbaar als webchat is ingeschakeld)
  
  

Je hebt verschillende opties om het ontwerp van elk van deze tabbladen aan te passen, waaronder het bewerken van tekst, kleuren, lettertypen en meer. Selectie van stijlaanpassingen worden doorgevoerd op elk tabblad in de Klaviyo Customer Hub lade om een consistente, merkeigen ervaring voor uw websitebezoekers te garanderen. 

Terwijl je de ontwerpinstellingen voor je Klaviyo Customer Hub bewerkt in Klaviyo, gebruik je de knop Bekijk live om de wijzigingen in de hub-interface op je website te zien. Merk op dat als je Klaviyo Customer Hub live is, opgeslagen wijzigingen worden gepubliceerd op je site. 

Pas een primaire call-to-action aan voor elk tabblad.

Wanneer een shopper zich aanmeldt bij zijn klant account, wordt op Klaviyo standaard "Welkom, voornaam" weergegeven. als hoofdkop op het Voor jou tabblad van de Klaviyo Customer Hub lade. Deze tekst kan niet worden bewerkt.

Voor niet-geauthenticeerde shoppers kun je echter je eigen call-to-action kop schrijven die boven de knop "Aanmelden" wordt weergegeven voordat ze inloggen. Dit kan handig zijn om niet-geauthenticeerde bezoekers te stimuleren om zich aan te melden en te betrekken bij je Klaviyo Customer Hub interface.

In het onderstaande voorbeeld luidt de belangrijkste call-to-action "Verdien beloningen, volg bestellingen en bewaar je winkelgeschiedenis".

Naar update de belangrijkste call-to-action voor je Klaviyo Customer Hub interface:

1. Open Service - Klaviyo Customer Hub tab in Klaviyo's linker navigatie.
2. Klik op Instellingen.
3. Pas onder Welkomstberichten een call-to-action aan die wordt weergegeven boven de knop "sign in" voor niet-geauthenticeerde shoppers. Je kunt dit doen voor elk tabblad van de Klaviyo Customer Hub lade:
   • Voor jou
   • Bestellingen
   • profiel
     
4. Klik op Opslaan. 

Ontwerp uw Customer Hub

Voor ontwerpopties om je Klaviyo Customer Hub interface aan te passen:

1. Navigeer naar Klaviyo Customer Hub in Klaviyo's linker navigatie.
2. Selecteer Ontwerp.
3. Selecteer Hub bovenaan het voorbeeld.
   
   
   
   
4. Vanuit het Style menu kun je de instellingen voor Display Language, Fonts, Color en Style aanpassen en een voorbeeld bekijken van hoe deze aanpassingen eruit zullen zien in het Klaviyo Customer Hub interface canvas.
5. U kunt optioneel geavanceerde styling toepassen met Custom CSS. Zie het gedeelte Aangepaste CSS hieronder voor meer details.
6. Zie het artikel Taal en locale ondersteuning in Klaviyo Customer Hub voor meer informatie over het selecteren van een andere taal.
7. Klik op Opslaan om je wijzigingen live te zetten.

De widget Klantenhub aanpassen

Naast het ontwerpen van Klaviyo Customer Hub zelf, kun je ook de hub widget aanpassen. Dit is een klein, zwevend element op je website waarop bezoekers kunnen klikken om snel de interface van Klaviyo Customer Hub te openen. De widget geeft tijdig informatie aan je shopper, zoals inkomende chatberichten en feedback bij het toevoegen van items aan hun favorietenlijst. We raden aan om de widget UI in te schakelen om zinvolle betrokkenheid bij klanten te stimuleren, vooral wanneer webchat en favorieten zijn ingeschakeld.

Om de hub-widget aan te passen:

1. Selecteer Klantenservice in het navigatiemenu aan de linkerkant van Klaviyo.
2. Selecteer Ontwerp.
3. Selecteer widget bovenaan het voorbeeld.
   
   

   

4. In het menu Algemeen kun je instellen welke shoppers de widget moeten zien en welke Klaviyo Customer Hub View moet worden geopend wanneer op de widget wordt geklikt.
5. In het Style menu kun je de kleur- en stijlinstellingen aanpassen en een voorbeeld bekijken van hoe deze aanpassingen eruit zullen zien in het Klaviyo Customer Hub widget interface canvas.
6. In het menu Layout kun je aanpassen hoe de widget op je website wordt geplaatst.
7. Klik op Opslaan om je wijzigingen live te zetten.

Extra widgetstaten aanpassen

Je kunt extra widget toestanden aanpassen door het kruisje naast Pictogram te selecteren en naar een andere widget toestand te navigeren.

• De Toevoegen aan winkelwagentje-status is zichtbaar op productdetailpagina's. De aanpasbare widget moedigt shoppers aan om een aankoop te doen of een product op te slaan voor later wanneer ze onder de bovenkant van de Product Detail Page zijn gescrolld en de traditionele Add to Cart knop niet meer zichtbaar is. Lees meer over Hoe je de Add to Cart widget instelt in Klaviyo Customer Hub.

Aangepaste CSS voor Klaviyo Customer Hub

Als de ontwerpopties van Klaviyo Customer Hub niet voldoen aan je behoeften op branding, kun je geavanceerde styling toepassen met Custom CSS.

Hoewel Klaviyo Customer Hub CSS-resets gebruikt om botsingen met de CSS van uw site te voorkomen, kan het nodig zijn om aangepaste CSS toe te voegen om edge cases aan te pakken of unieke styling toe te passen, zoals zwevende lade of aangepaste randradiuswaarden.

Aangepaste CSS toepassen 

Voeg alle aangepaste CSS direct toe aan de sectie Aangepaste CSS in de ontwerpinstellingen van je Klaviyo Customer Hub en zorg ervoor dat je de wijzigingen opslaat.

Alle basiselementen in de Klaviyo Customer Hub hebben klassenamen die voorafgegaan worden door kl-hub-:

• Alle tekstelementen hebben de klasse kl-hub-tekst, terwijl kopteksten de klasse kl-hub-kopteksthebben.
• Knoppen hebben de klasse kl-hub-button en bevatten ook hun variatie (bijv. kl-hub-button-primary, kl-hub-button-secondary, enz.)
• De Klaviyo Customer Hub-lade zelf heeft de klasse kl-hub-drawer
• Tekstinvoer heeft de klasse kl-hub-invoer
• Alle inhoudsblokken hebben de klasse kl-hub-content-blok, en bevatten ook hun blok Interne naam (bijvoorbeeld, kl-hub-content-blok-beloningsprogramma voor een inhoudsblok met de naam "Beloningsprogramma").

Dit is geen volledige lijst; je kunt meer vinden door de Klaviyo Customer Hub te inspecteren met de debugger van je browser. Als een element een class heeft die begint met kl-hub-, dan is het veilig om te gebruiken voor aangepaste CSS.

CSS voorbeeld

Als je alle knoppen en koppen in de Klaviyo Customer Hub hoofdletters wilt maken, kun je de volgende aangepaste CSS schrijven:

.kl-hub-knop, .kl-hub-koptekst {

    text-transform: uppercase;
}

Extra hulpbronnen

• Aan de slag met Klaviyo Customer Hub
• Aan de slag met webchat
• Hoe maak je een inhoudsblok voor Klaviyo Customer Hub?
• De widget Toevoegen aan winkelwagentje instellen in Klaviyo Customer Hub