Comment adapter le style de votre Klaviyo Customer Hub

Objectif de cet article

Découvrez les options de design pour personnaliser votre tiroir Klaviyo Customer Hub et comment le concevoir pour qu’il corresponde à votre marque. Comme l’interface de Klaviyo Customer Hub fait partie intégrante de l’expérience client, il est recommandé de la personnaliser afin qu’elle apparaisse comme une extension de votre site web.

Avant de commencer

Ce guide explique comment personnaliser le style de votre interface Klaviyo Customer Hub. Avant de continuer, assurez-vous que la fonctionnalité Klaviyo Customer Hub est activée.

En savoir plus sur Klaviyo Customer Hub.

Options de conception du Klaviyo Customer Hub

Le tiroir Klaviyo Customer Hub comporte plusieurs onglets personnalisables :

• Pour vous
• Commandes
• Profil
• Chat (visible uniquement lorsque le chat web est activé)
  
  

Vous disposez de diverses options pour personnaliser la conception dans chacun de ces onglets, notamment en modifiant le texte, les couleurs, les polices, etc. Les sélections de personnalisation du style se répercutent sur chaque onglet du tiroir Klaviyo Customer Hub afin de garantir une expérience cohérente et conforme à votre marque pour les visiteurs de votre site.

Lorsque vous modifiez les paramètres de conception de votre Klaviyo Customer Hub dans Klaviyo, utilisez le bouton Voir en direct pour afficher les changements apportés à l’interface du hub sur votre site web. Notez que si votre Klaviyo Customer Hub est en ligne, les modifications enregistrées sont publiées sur votre site.

Personnaliser un appel à l’action (CTA) principal pour chaque onglet

Par défaut, lorsqu’un acheteur se connecte à son compte client, Klaviyo affiche « Bienvenue, first.name » comme titre principal dans l’onglet Pour vous du tiroir Klaviyo Customer Hub. Ce texte n’est pas modifiable.

Cependant, pour les acheteurs non authentifiés, vous pouvez rédiger votre propre en-tête d’appel à l’action (CTA) à afficher au-dessus du bouton « Se connecter » avant qu’ils ne se connectent. Cela peut être utile pour inciter les visiteurs non authentifiés à se connecter et à interagir avec votre interface Klaviyo Customer Hub.

Dans l’exemple ci-dessous, l’appel à l’action (CTA) principal indique « Gagnez des récompenses, suivez vos commandes et enregistrez votre historique d’achat. »

Remarque: l’indicateur « rewards available » s’affiche automatiquement si vous avez l’un des éléments suivants :

1. Un code de réduction statique configuré dans Klaviyo Customer Hub, OU
2. Si vous avez activé une intégration de fidélité (comme Smile).

Pour mettre à jour l’ appel à l’action (CTA) principal de votre interface Klaviyo Customer Hub :

1. Ouvrez l’onglet Service - Klaviyo Customer Hub dans le menu de gauche de Klaviyo.
2. Cliquez sur Paramètres.
3. Sous Messages de bienvenue, personnalisez un appel à l’action (CTA) à afficher au-dessus du bouton « Se connecter » pour les acheteurs non authentifiés. Vous pouvez le faire pour chaque onglet du tiroir Klaviyo Customer Hub :
   • Pour vous
   • Commandes
   • profil
     

4. Cliquez sur Enregistrer.

Concevez votre Klaviyo Customer Hub

Pour découvrir des options de conception afin de personnaliser l’interface Klaviyo Customer Hub :

1. Accédez à Klaviyo Customer Hub dans le menu de gauche de Klaviyo.
2. Sélectionnez Design.
3. Sélectionnez Hub en haut de l’aperçu.
   
   
   

4. Dans le menu Style, vous pouvez ajuster les paramètres Langue d’affichage, Polices, Couleur et Style, et prévisualiser l’apparence de ces ajustements sur le canevas de l’interface Klaviyo Customer Hub
5. Vous pouvez, si vous le souhaitez, appliquer un style avancé avec du CSS personnalisé. Consultez la section CSS personnalisée ci-dessous pour plus de détails.
6. Consultez l’article Prise en charge des langues et des paramètres régionaux dans Klaviyo Customer Hub pour en savoir plus sur la sélection d’une autre langue.
7. Cliquez sur Enregistrer pour mettre vos modifications en ligne.

Personnaliser le widget Klaviyo Customer Hub

En plus de concevoir Klaviyo Customer Hub lui-même, vous pouvez également personnaliser le widget du hub, un petit élément flottant sur votre site web sur lequel les visiteurs peuvent cliquer pour ouvrir rapidement l’interface de Klaviyo Customer Hub. Le widget présente des informations opportunes à votre acheteur, telles que des messages de chat entrants et des retours lors de l’ajout d’articles à sa liste de Favoris. Nous vous recommandons d’activer l’interface utilisateur du widget afin de favoriser un engagement significatif avec les clients, en particulier lorsque le chat web et les Favoris sont activés.

Pour personnaliser le widget du hub :

1. Sélectionnez Klaviyo Customer Hub dans le menu de navigation de gauche de Klaviyo.
2. Sélectionnez Design.
3. Sélectionnez widget en haut de l’aperçu.

4. Dans le menu Général, vous pouvez ajuster quels acheteurs doivent voir le widget et quelle vue Klaviyo Customer Hub doit s’ouvrir lorsque l’on clique sur le widget.
   • Choisissez quels acheteurs doivent voir le widget sur votre site :
     • Tous les acheteurs (reconnus, connectés et déconnectés) – Le widget s’affiche pour tout le monde.
     • Acheteurs reconnus ou connectés – Le widget s’affiche uniquement si Klaviyo reconnaît la personne (Identifiée) ou si elle est connectée (Authentifiée). C’est idéal pour réduire l’encombrement pour les tout nouveaux visiteurs, tout en maintenant une expérience hautement personnalisée pour ceux qui reviennent.
     • Uniquement pour les acheteurs connectés – Le widget s’affiche uniquement pour les personnes disposant d’une session Shopify active.
5. Dans le menu Style, vous pouvez ajuster les paramètres de couleur et de style et prévisualiser à quoi ressembleront ces ajustements dans le canevas de l’interface du widget Klaviyo Customer Hub
6. Depuis le menu Mise en page, vous pouvez ajuster la façon dont le widget est positionné sur votre site web.
7. Cliquez sur Enregistrer pour mettre vos modifications en ligne.

Personnaliser les états supplémentaires du widget

Vous pouvez personnaliser des états supplémentaires du widget en sélectionnant le caret à côté de Icône et en accédant à un autre état du widget.

• L’état Ajouter au panier est visible sur les pages de détails des produits. Le widget personnalisable encourage les acheteurs à effectuer un achat ou à enregistrer un produit pour plus tard lorsqu’ils ont fait défiler la page au-delà du haut de la page de détails du produit, lorsque le bouton traditionnel Ajouter au panier n’est plus visible. En savoir plus sur comment configurer le widget Ajouter au panier dans Klaviyo Customer Hub.

CSS personnalisé pour Klaviyo Customer Hub

Si les options de conception de Klaviyo Customer Hub ne répondent pas à vos besoins en matière de branding, vous pouvez appliquer un style avancé avec du CSS personnalisé.

Bien que Klaviyo Customer Hub utilise des réinitialisations CSS pour éviter les conflits avec le CSS de votre site, vous devrez peut-être ajouter du CSS personnalisé pour gérer des cas limites ou appliquer un style unique, comme un tiroir flottant ou des valeurs de rayon de bordure personnalisées.

Appliquer un fichier CSS personnalisé

Ajoutez tout CSS personnalisé directement dans la section CSS personnalisé des paramètres de conception de votre Klaviyo Customer Hub, puis veillez à enregistrer vos modifications.

Tous les éléments de base du Klaviyo Customer Hub ont des noms de classe préfixés par kl-hub-:

• Tous les éléments de texte ont la classe kl-hub-text, tandis que les titres ont la classe kl-hub-heading
• Les boutons ont la classe kl-hub-button et incluent également leurs variantes (par exemple, kl-hub-button-primary, kl-hub-button-secondary, etc.)
• Le tiroir Klaviyo Customer Hub lui-même a la classe kl-hub-drawer
• Les champs de saisie de texte ont la classe kl-hub-input
• Tous les blocs de contenu ont la classe kl-hub-content-block et incluent également leur nom interne de bloc (par exemple, kl-hub-content-block-reward-program pour un bloc de contenu nommé « Reward program »).

Cette liste n’est pas exhaustive ; vous pouvez en trouver d’autres en inspectant le Klaviyo Customer Hub avec le débogueur de votre navigateur. Si un élément a une classe qui commence par kl-hub-, vous pouvez l’utiliser sans risque pour le CSS personnalisé.

Exemple CSS

Si vous vouliez mettre en majuscules tous les boutons et titres dans Klaviyo Customer Hub, vous pourriez écrire le CSS personnalisé suivant :

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

    text-transform: uppercase;
}

Ressources supplémentaires