Je Klaviyo Customer Hub stylen

Wat je leert

Lees meer over ontwerpopties voor het stylen van je Klaviyo Customer Hub-lade, en hoe je deze kunt ontwerpen zodat die bij je merk past. Omdat de interface van Klaviyo Customer Hub verweven is met de klantervaring, is het best practice om deze zo te stylen dat hij aanvoelt als 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 aanpast. Voordat je doorgaat, zorg je ervoor dat de Klaviyo Customer Hub-functie is ingeschakeld.

Meer informatie over Klaviyo Customer Hub.

Ontwerpopties voor Klaviyo Customer Hub

De Klaviyo Customer Hub-lade heeft meerdere aanpasbare tabbladen:

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

Je hebt verschillende opties om het ontwerp op elk van deze tabbladen aan te passen, waaronder het bewerken van tekst, kleuren, lettertypen en meer. Stijlkeuzes voor aanpassingen worden doorgevoerd in elk tabblad in de lade van Klaviyo Customer Hub om een consistente ervaring in je merkstijl te garanderen voor je sitebezoekers.

Terwijl je de ontwerpinste llingen voor je Klaviyo Customer Hub in Klaviyo bewerkt, gebruik je de knop Live bekijken om de wijzigingen in de hubinterface op je website te bekijken. Let op: als je Klaviyo Customer Hub live is, worden opgeslagen wijzigingen gepubliceerd op je site.

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

Standaard toont Klaviyo, wanneer een shopper inlogt op zijn klantaccount, "Welcome, first.name" als de hoofdkop op het tabblad Voor jou van de lade van de Klaviyo Customer Hub. Deze tekst kun je niet bewerken.

Voor niet-geverifieerde shoppers kun je echter je eigen call-to-action-kop schrijven om boven de knop “Aanmelden” weer te geven voordat ze inloggen. Dit kan helpen om niet-geverifieerde bezoekers te stimuleren om in te loggen en aan de slag te gaan met je interface van Klaviyo Customer Hub.

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

Opmerking: de indicator "rewards available" wordt automatisch weergegeven als je een van de volgende hebt:

1. Een statische coupon die is ingesteld in Klaviyo Customer Hub, OF
2. Als je een loyaliteitsintegratie hebt ingeschakeld (zoals Smile).

Om de Hoofdcall-to-action voor je Klaviyo Customer Hub-interface bij te werken:

1. Open het tabblad Service - Klaviyo Customer Hub in de linkernavigatie van Klaviyo.
2. Klik op Instellingen.
3. Pas onder Welkomstberichten een call-to-action aan die boven de knop "inloggen" wordt weergegeven voor niet-geverifieerde shoppers. Je kunt dit doen voor elk tabblad van de lade van de Klaviyo Customer Hub:
   • Voor jou
   • Bestellingen
   • profiel
     

4. Klik op Opslaan.

Ontwerp je Klaviyo Customer Hub

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

1. Navigeer naar Klaviyo Customer Hub in de linkernavigatie van Klaviyo.
2. Selecteer Ontwerp.
3. Selecteer Hub bovenaan de preview.
   
   
   

4. Via het menu Stijl kun je de instellingen voor weergavetaal, lettertypen, kleur en stijl aanpassen en alvast bekijken hoe deze aanpassingen eruitzien in het canvas van de interface van Klaviyo Customer Hub
5. Je kunt optioneel geavanceerde opmaak toepassen met Custom CSS. Bekijk de sectie Custom CSS hieronder voor meer details.
6. Lees het artikel Taal- en landinstellingenondersteuning 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 Klaviyo Customer Hub-widget 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 waar bezoekers op kunnen klikken om snel de interface van Klaviyo Customer Hub te openen. De widget toont je shopper tijdige informatie, zoals binnenkomende chatberichten en feedback wanneer items aan de lijst Favorieten worden toegevoegd. We raden aan de widget-UI in te schakelen om zinvolle betrokkenheid bij klanten te stimuleren, vooral wanneer webchat en Favorieten zijn ingeschakeld.

De hub-widget aanpassen:

1. Selecteer Klaviyo Customer Hub in de linkernavigatie van Klaviyo.
2. Selecteer Ontwerp.
3. Selecteer Widget bovenaan de preview.

4. Via het menu Algemeen kun je aanpassen welke shoppers de widget moeten zien en welke Klaviyo Customer Hub-weergave moet worden geopend wanneer er op de widget wordt geklikt.
   • Kies welke shoppers de widget op je site moeten zien:
     • Alle shoppers (herkend, ingelogd en uitgelogd) – De widget wordt aan iedereen weergegeven.
     • Herkende of ingelogde shoppers – De widget verschijnt alleen als Klaviyo de persoon herkent (Identified) of als diegene is ingelogd (Authenticated). Dit is ideaal om rommel te verminderen voor gloednieuwe bezoekers, terwijl je een persoonlijke ervaring behoudt voor terugkerende bezoekers.
     • Alleen ingelogde shoppers – De widget verschijnt alleen voor mensen met een actieve Shopify-sessie.
5. Via het menu Style kun je de instellingen voor Color en Style aanpassen en een voorbeeld bekijken van hoe deze aanpassingen eruitzien op het canvas van de interface van de Klaviyo Customer Hub-widget.
6. Via het menu Layout kun je aanpassen hoe de widget op je website wordt gepositioneerd.
7. Klik op Opslaan om je wijzigingen live te zetten.

Aanvullende widgetstatussen aanpassen

Je kunt extra widget-statussen aanpassen door het pijltje naast Icoon te selecteren en naar een andere widget-status te gaan.

• De status Toevoegen aan winkelwagen is zichtbaar op productdetailpagina's. De aanpasbare widget moedigt shoppers aan om een aankoop te doen of een product voor later op te slaan wanneer ze onder de bovenkant van de productdetailpagina hebben gescrold en de traditionele knop Toevoegen aan winkelwagen niet meer zichtbaar is. Meer informatie over Zo stel je de widget Toevoegen aan winkelwagen in Klaviyo Customer Hub in.

Aangepaste CSS voor Klaviyo Customer Hub

Als je merkbehoeften niet worden gedekt door de ontwerpopties van de Klaviyo Customer Hub, kun je geavanceerde styling toepassen met Custom CSS.

Hoewel Klaviyo Customer Hub CSS-resets gebruikt om botsingen met de CSS van je site te voorkomen, moet je mogelijk aangepaste CSS toevoegen om randgevallen op te lossen of unieke styling toe te passen, zoals waarden voor een zwevende lade of aangepaste border-radius.

Aangepaste CSS toepassen

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

Alle basiselementen binnen de Klaviyo Customer Hub hebben class-namen met het voorvoegsel kl-hub-:

• Alle tekstelementen hebben de class kl-hub-text, terwijl koppen de class hebben kl-hub-heading
• Knoppen hebben de class kl-hub-button en bevatten ook hun variaties (bijv. kl-hub-button-primary, kl-hub-button-secondary, enz.).
• De lade van Klaviyo Customer Hub zelf heeft de class kl-hub-drawer
• Tekstinvoer heeft de class kl-hub-input
• Alle contentblokken hebben de klasse kl-hub-content-block en bevatten ook hun blok interne naam (bijv. kl-hub-content-block-reward-program voor een contentblok met de naam "Reward program")

Dit is geen uitputtende lijst; je kunt er 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-, is het veilig om te gebruiken voor aangepaste CSS.

CSS-voorbeeld

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

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

    text-transform: uppercase;
}