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
• Panier (visible uniquement lorsqu’il est activé)
• Chat (visible uniquement lorsque le chat web est activé)
• Profil

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 Aperçu pour voir les modifications apportées à l’interface du hub sur votre site web.

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 Site Web > Klaviyo Customer Hub dans le menu de gauche de Klaviyo.
2. Ouvrez Design > Modifier votre Hub.
3. Dans le tiroir de mise en page à droite, sous Mise en page fixe, personnalisez un appel à l’action (CTA) à afficher dans le bloc Connexion. 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 l’onglet Website.
2. Sélectionnez Design dans la navigation du Klaviyo Customer Hub.
3. En haut de la page Design, vous verrez une carte qui affiche le statut de votre Hub. Sélectionnez le bouton Modifier votre Hub pour accéder à l’éditeur de Klaviyo Customer Hub.
   

4. Dans l’éditeur, sélectionnez l’icône de palette dans la barre de navigation de gauche.
5. 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

6. 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.
7. 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.
8. Cliquez sur Publier 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, qui est 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 les messages de chat entrants et les retours lors de l’ajout d’articles à sa liste de Favoris. Nous vous recommandons d’activer l’interface utilisateur du widget afin de générer un engagement significatif avec les clients, mais ce n’est pas obligatoire pour que le Hub soit en ligne.

Pour personnaliser le widget du hub :

1. Accédez à l’ éditeur de Klaviyo Customer Hub.
2. Dans le panneau de commande flottant au-dessus de votre Hub, faites basculer l’état de Ouvert à Fermé. Cela devrait ouvrir le volet latéral Modifier le widget .
3. Dans la section Paramètres du widget, vous pouvez ajuster quels acheteurs doivent voir le widget et quelle vue de Klaviyo Customer Hub doit s’ouvrir lorsque le widget est cliqué.
   • 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.
4. Vous pouvez également configurer la forme, la couleur, l’icône et la mise en page de votre widget.

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