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
• Winkelwagen (alleen zichtbaar wanneer ingeschakeld)
• Chat (alleen zichtbaar wanneer webchat is ingeschakeld)
• Profiel

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 ontwerpinstellingen voor je Klaviyo Customer Hub in Klaviyo bewerkt, gebruik je de knop Voorbeeld om de wijzigingen te zien die zijn aangebracht in de hubinterface op je website.

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 Website > Klaviyo Customer Hub in de linkernavigatie van Klaviyo.
2. Open Design > Bewerk je Hub
3. Pas in de lay-outlade aan de rechterkant, onder Vaste lay-out, een call-to-action aan om weer te geven binnen het inlogblok. Je kunt dit doen voor elk tabblad van de lade 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. Ga naar Klaviyo Customer Hub onder het tabblad Website.
2. Selecteer Ontwerp in de navigatie van de Klaviyo Customer Hub.
3. Bovenaan de Design-pagina zie je een kaart met de status van je Hub. Selecteer de knop Bewerk je Hub om de Klaviyo Customer Hub-editor te openen.
   

4. Selecteer in de editor het paletpictogram in de linkernavigatie.
5. 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

6. Je kunt optioneel geavanceerde opmaak toepassen met Custom CSS. Bekijk de sectie Custom CSS hieronder voor meer details.
7. Lees het artikel Taal- en landinstellingenondersteuning in Klaviyo Customer Hub voor meer informatie over het selecteren van een andere taal.
8. Klik op Publiceren om je wijzigingen live te zetten.

De Klaviyo Customer Hub-widget aanpassen

Naast het ontwerpen van Klaviyo Customer Hub zelf kun je ook de widget voor de hub 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 actuele informatie, zoals binnenkomende chatberichten en feedback wanneer ze items aan hun Favorietenlijst toevoegen. We raden aan om de widget-UI in te schakelen om zinvolle betrokkenheid met klanten te stimuleren, maar dit is niet vereist om Hub live te zetten.

De hub-widget aanpassen:

1. Open de editorvan Klaviyo Customer Hub.
2. Schakel in het zwevende bedieningspaneel boven je hub de status om van Open naar Gesloten. Hierdoor zou de uitschuifbalk Widget bewerken moeten worden geopend.
3. In de sectie Widgetinstellingen kun je aanpassen welke shoppers de widget te zien krijgen 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.
4. Je kunt ook de vorm, kleur, het pictogram en de indeling van je widget configureren.

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;
}

Extra hulpbronnen