Introduction
Le Hub de fidélité est un widget intégrable directement sur votre boutique en ligne (Shopify ou PrestaShop). Il permet d'afficher votre programme de fidélité sans aucun développement supplémentaire.
Le widget offre une interface unifiée pour afficher :
Le profil client (statut, points)
Les paliers VIP
Les missions disponibles
Les récompenses
Le programme de parrainage
💡 Pourquoi utiliser le Hub de fidélité ?
Les mécaniques de fidélité sont souvent cachées ou communiquées uniquement par email. Le widget améliore la visibilité de votre programme et l'engagement de vos clients en rendant toutes les informations accessibles en un clic depuis votre site.
Accéder au Hub de fidélité
Pour configurer le widget, rendez-vous dans votre back-office Loyoly :
Dans le menu latéral, allez dans Personnalisation → Branding → Modules
Vous verrez trois cartes : Apparence générale, Page fidélité et Hub de fidélité
Cliquez sur Modifier sous la carte "Hub de fidélité"
⚠️ Pré-requis : Le Hub de fidélité doit être activé sur votre compte. Si vous ne voyez pas cette option, contactez votre CSM pour l'activer.
L'éditeur du Hub de fidélité
L'éditeur est composé de deux onglets principaux :
Sections — Gérez les blocs de contenu affichés dans le widget (en-tête, profil, récompenses, missions, pages missions, paliers VIP, pages paliers VIP, parrainage, page parrainage, Bouton flottant)
Thème — Personnalisez l'apparence visuelle (apparence, couleurs, typographie, boutons)
Un aperçu en temps réel s'affiche à droite, vous permettant de visualiser chaque modification instantanément. Vous pouvez basculer entre la vue mobile et desktop grâce aux icônes en bas de l'aperçu.
En haut de l'éditeur, un sélecteur de langue vous permet de prévisualiser le widget dans les différentes langues configurées.
Configurer les sections
L'onglet Sections vous permet de choisir quels blocs afficher dans le widget, de les réorganiser et de les configurer individuellement.
Chaque section dispose de :
Un icône œil 👁 pour afficher ou masquer la section
Un icône corbeille 🗑️ pour supprimer la section
Un icône cadenas 🔒 pour les sections obligatoires qui ne peuvent pas être supprimées
Vous pouvez réorganiser les sections par glisser-déposer pour modifier l'ordre d'affichage dans le widget.
En-tête (Header)
La section d'en-tête est le premier élément visible dans le widget. Elle permet de personnaliser :
Titre — Le nom affiché en haut du widget
Image bannière — Une image de couverture au format 1125 × 369 pixels
✨ Astuce : Utilisez une bannière attractive qui reflète l'identité de votre marque. Le titre est multilingue : cliquez sur le drapeau pour basculer entre les langues.
Profil
La section Profil affiche les informations clés du client connecté : son nom, son statut (palier VIP) et son solde de points.
La section Profil gère trois états différents :
Défaut — L'affichage standard pour un client connecté et inscrit au programme
Non connecté — L'affichage pour un visiteur qui n'est pas connecté
Opt-out — L'affichage pour un client qui s'est désinscrit du programme
Options de personnalisation disponibles :
Cacher le statut VIP — Désactivez l'affichage du palier VIP dans le profil
Cacher le nombre de points — Désactivez l'affichage du solde de points
Récompenses
Affiche les récompenses disponibles et celles déjà obtenues par le client.
Récompenses — Le résumé dans la vue principale
Page récompenses — La page détaillée des récompenses
Vous pouvez afficher la page récompenses en cliquant sur : Affichage dans une page dédiée dans récompenses, ensuite vous pouvez aussi personnaliser l'icône de la section.
Missions
Affiche la liste des missions disponibles pour le client. Cette section comprend :
Missions — Le résumé des missions dans la vue principale
Missions page — La page détaillée avec toutes les missions
⚠️ Limitation V1 : Les missions ne peuvent pas être complétées directement depuis le widget. Elles sont affichées à titre informatif et redirigent vers la page dédiée pour plus de détails.
Paliers VIP
La section Paliers VIP affiche les niveaux de fidélité de votre programme. Elle se configure en deux parties dans la barre latérale : Paliers VIP pour le résumé affiché sur la vue principale, et Page Paliers VIP pour la page dédiée.
Cliquez sur Paliers VIP dans la barre latérale. Les options suivantes apparaissent :
Affichage dans une page dédiée — Toggle pour activer une page dédiée (Page palier VIP) . Cliquez sur Éditer pour la configurer
Titre de la section — Le titre affiché sur la carte dans la vue principale
Description de la section — Courte description sous le titre
Icône de la section — Par défaut, Icône personnalisée ou Sans icône
Page Paliers VIP
Cliquez sur Page Paliers VIP dans la barre latérale. Le panneau affiche « Paliers VIP / Page paliers VIP » avec les paramètres suivants :
Titre de la section — Le titre affiché en haut de la page dédiée.
Description de la section — Texte affiché sous le titre.
Icône de la section — Par défaut, Icône personnalisée ou Sans icône
En dessous, chaque palier apparaît sous forme d'accordéon dépliable. Chaque palier contient :
Objectif du palier — Texte décrivant l'objectif à atteindre. Valeur par défaut : {{tier_goal}}.
Champ récompense personnalisé — Texte libre pour décrire la récompense associée au palier.
Cacher les récompenses du programme.
Afficher la récompense du palier précédent.
💡 Bon à savoir : Si les paliers VIP ne sont pas activés dans votre programme, cette section n'apparaîtra pas dans le widget.
Parrainage
La section Parrainage permet à vos clients de partager leur lien de parrainage directement depuis le widget. Cliquez sur Parrainage dans la barre latérale pour configurer la carte affichée dans la vue principale : Affichage dans une page dédiée, Titre de la section, Description de la section et Icône de la section.
Page Parrainage
Cliquez sur Page Parrainage dans la barre latérale. Le panneau affiche « Parrainage / Page parrainage » avec trois onglets :
Défaut — L'affichage pour un client connecté. En plus du titre, de la description et de l'icône, vous pouvez personnaliser les icônes des canaux de partage : Messenger, X, WhatsApp et SMS (Par défaut ou Icône personnalisée pour chacun).
Non connecté — L'affichage pour un visiteur non connecté. Vous configurez ici le texte du Bouton d'envoi (multilingue, jusqu'à 100 caractères).
Félicitations — Le message affiché après un parrainage réussi. Deux champs : Message de succès (multilingue, jusqu'à 250 caractères) et Bouton de parrainage pour le texte du bouton permettant de parrainer à nouveau (multilingue, jusqu'à 100 caractères).
Bouton flottant
Le bouton flottant qui apparaît sur votre site et permet aux visiteurs d'ouvrir le widget.
Options de configuration :
Position — Placez le bouton flottant à gauche ou à droite de l'écran
Pages d'affichage — Affichez le bouton flottant sur toutes les pages ou uniquement sur certaines pages
Blacklist d'URLs — Excluez certaines pages via l'éditeur Shopify
✨ Astuce : Si vous utilisez d'autres widgets tiers (comme Gorgias), vous pouvez opter pour le mode lien dédié plutôt que le launcher. Cela ouvre le widget sur une page dédiée, évitant les conflits visuels avec d'autres widgets.
Le mode de diffusion par lien se paramètre directement depuis l'extension du widget.
Personnaliser le thème
L'onglet Thème vous permet de personnaliser l'apparence globale du widget pour qu'il s'intègre parfaitement à l'identité visuelle de votre marque.
Apparence
Configurez les arrondis et l'espacement grille du widget pour un rendu cohérent avec le design de votre site.
Couleurs
Définissez la palette de couleurs du widget. Vous pouvez personnaliser les couleurs principales, les couleurs d'arrière-plan, les couleurs de texte et les couleurs d'accentuation.
Typographie
Choisissez les polices, tailles et styles de texte utilisés dans le widget.
💡 Bon à savoir : Le widget utilise par défaut les polices Google. Si une police Google n'est pas disponible, une police de secours (fallback) est automatiquement appliquée.
Boutons
Personnalisez la forme, les dimensions et le style des boutons affichés dans le widget.
Sauvegarder et publier
Une fois vos modifications terminées :
Vérifiez le rendu dans l'aperçu en temps réel (mobile et desktop)
Vérifiez les différentes langues via le sélecteur de langue
Cliquez sur Enregistrer en haut à droite pour enregistrer vos modifications
Si vous supprimez une section et souhaitez la récupérer, vous pouvez le faire en cliquant sur Ajouter une section puis en choisissant la section correspondante dans la liste.
Diffusion
Après avoir finalisé vos configurations, diffusez votre widget en suivant ces étapes :
Allez sur Communications
Sélectionnez Diffusion
Cliquez sur Paramètres (Hub de fidélité)
Choisissez Ajouter dans Shopify
Le widget peut être diffusé de deux manières :
Via bouton flottant — Un bouton flottant sur votre site ouvre le widget dans un panneau latéral
Via un lien dédié — Le widget s'affiche sur une page dédiée de votre site, accessible via un bouton ou un lien dans votre navigation
✨ Recommandation : L'affichage segmenté par sections (avec des pages détaillées pour chaque fonctionnalité) est recommandé pour une meilleure lisibilité et navigation pour vos clients.
Questions fréquentes
Le Hub de fidélité est-il compatible avec tous les thèmes Shopify ?
Oui, le widget est conçu pour fonctionner avec tous les thèmes Shopify et PrestaShop. Il est indépendant et n'interfère pas avec le design existant de votre site.
Puis-je utiliser le widget sans le Launcher ?
Oui, vous pouvez choisir d'intégrer le widget via un lien dédié plutôt que le bouton flottant. Cette option est idéale si vous avez déjà d'autres widgets sur votre site (comme Gorgias).
Les clients peuvent-ils compléter des missions dans le widget ?
Dans la version actuelle, les missions sont affichées à titre informatif. Les clients sont redirigés vers la page dédiée pour les compléter. Une intégration directe est prévue dans une future version.
Comment masquer une section du widget ?
Dans l'onglet Sections, cliquez sur l'icône œil 👁 à côté de la section que vous souhaitez masquer. Elle ne sera plus visible dans le widget mais restera configurable.
Les polices de mon site sont-elles compatibles ?
Le widget prend en charge les polices Google. Si vous utilisez une police personnalisée non disponible sur Google Fonts, une police de secours sera automatiquement appliquée. Vous pouvez ajuster la typographie depuis l'onglet Thème.