Le JeriCommerce Loyalty Hub est l'expérience Shopify recommandée pour les nouvelles configurations de fidélité. Il se compose de deux espaces complémentaires :
- Hub de la boutique en ligne : une page de boutique personnalisable qui présente le programme aux visiteurs et devient une expérience complète de fidélité pour les clients connectés.
- Hub de l'espace client : une destination intégrée à Shopify New Customer Accounts, qui donne accès au hub de fidélité dans l'espace des clients connectés.
Choisir l'espace du hub ¶
| Besoin | Espace recommandé | Pourquoi |
|---|---|---|
| Présenter le programme au public | Hub de la boutique en ligne | Les visiteurs peuvent découvrir les parcours de gains, les récompenses et les avantages du programme avant de s'inscrire ou de se connecter. |
| Actions de fidélité pour les clients connectés sur la boutique | Hub de la boutique en ligne | Les clients consultent leurs points réels, leurs points de niveau et leur statut, échangent des récompenses et effectuent des actions de parcours de gains. |
| Personnaliser la marque | Hub de la boutique en ligne | Les marchands peuvent modifier les textes, les couleurs et les sections visibles dans l'éditeur de thème Shopify. |
| Ajouter un accès au profil du compte | Hub de l'espace client | Les clients ouvrent le hub de fidélité depuis Shopify New Customer Accounts sans ajouter d'extensions de compte distinctes. |
La plupart des boutiques devraient utiliser les deux : le hub de la boutique en ligne sert de destination principale pour la fidélité, et le hub de l'espace client permet d'accéder aux actions de fidélité depuis le profil du compte.
Structure recommandée ¶
Suivez cette structure pour configurer une nouvelle expérience de fidélité Shopify :
- Créer une page publique pour le hub de la boutique en ligne.
- L'ajouter à la navigation de la boutique, sous « Récompenses », « Fidélité » ou le nom du programme.
- En faire la destination principale pour la fidélité des visiteurs et des clients connectés.
- Ajouter le lien Loyalty Hub à la navigation de l'espace client si la boutique utilise New Customer Accounts.
- Ajouter des extensions Shopify plus ciblées uniquement si nécessaire, par exemple sur les pages produit, le panier, le checkout ou pour télécharger le portefeuille.
Le parcours client le plus simple commence par le hub de la boutique en ligne, où chacun peut découvrir le programme et effectuer des actions de fidélité. Ajoutez ensuite le lien vers le hub de l'espace client pour y accéder depuis le profil de compte.
Hub de la boutique en ligne ¶
Le hub de la boutique en ligne est l'endroit idéal pour présenter le programme dans le style de marque du marchand. Il se trouve dans Online Store > Pages et se personnalise dans l'éditeur de thème Shopify, comme toute autre section de thème ou tout bloc d'application.
Utilisez-le pour afficher :
- une présentation du programme et de la marque aux visiteurs ;
- les façons de gagner des points et les récompenses disponibles, afin de présenter le programme aux personnes non connectées ;
- le statut des clients connectés, y compris leurs points, leurs points de niveau et leur statut ;
- les récompenses disponibles et leur échange ;
- les actions de parcours de gains que les clients peuvent effectuer depuis la boutique ;
- les actions de portefeuille, de parrainage et d'autres fonctionnalités de fidélité proposées par le hub.
Configuration ¶
Créer la page
Dans Shopify, accédez à Online Store > Pages et créez une page pour le programme de fidélité.
Ouvrir l'éditeur de thème
Accédez à Online Store > Themes > Customize, ouvrez le modèle de page souhaité et ajoutez le bloc d'application JeriCommerce Loyalty Hub.
Personnaliser le contenu
Modifiez le titre principal, le sous-titre, les couleurs et les sections visibles. Rédigez un texte clair pour les visiteurs qui découvrent le programme et les clients connectés qui utilisent leur compte de fidélité.
Ajouter la page à la navigation
Ajoutez la page au menu de votre boutique pour que les clients puissent la trouver.
Ce que voient les clients ¶
Le hub de la boutique en ligne s'adapte à l'état de connexion du visiteur :
| État du visiteur | Expérience |
|---|---|
| Visiteur ou client non connecté | Présentation du programme, parcours de gains, récompenses, niveaux et invitations à se connecter ou à s'inscrire. |
| Client connecté | Points réels, points de niveau, statut, échange de récompenses, actions de parcours de gains et autres actions de fidélité disponibles. |
Le hub de la boutique en ligne sert donc à la fois de page publique de présentation et de tableau de bord de fidélité pour les clients connectés.
Les améliorations récentes facilitent la consultation du hub dans les thèmes actifs. Les cartes de niveau peuvent afficher des images facultatives, les sections de récompenses et de niveaux utilisent un carrousel plus fluide, et les règles de gain apparaissent progressivement lorsqu'il y a beaucoup d'actions. Les boutons de réduction indiquent plus clairement quand les clients échangent ou copient un code. Les descriptions longues des parcours de gains restent dans les limites de leurs cartes, celles des récompenses s'affichent sous forme de texte lisible et les bannières du Loyalty Hub gardent leurs proportions naturelles au lieu d'être recadrées dans un format fixe.
Lorsqu'une campagne boost est active, le hub de la boutique en ligne affiche la promotion, sa date de fin et les multiplicateurs des actions de gain concernées. Les clients voient les points et les points de niveau boostés partout où la campagne s'applique.
Échanger des points contre un crédit ¶
Les hubs de la boutique et de l'espace client prennent en charge les récompenses Points as cash. Dans le hub de la boutique, les clients connectés voient leur solde sous Your points. Lorsqu'une récompense Points as cash est disponible, cette carte indique également le montant de réduction qu'ils peuvent échanger et affiche un bouton Redeem.
Les clients cliquent sur Redeem pour choisir un montant et confirmer le nombre de points à dépenser. Après l'échange, la récompense affiche la valeur de la réduction et le code. Les clients peuvent copier le code ou cliquer sur Apply discount.
Aucun des deux hubs ne dispose du contexte du panier pour limiter l'échange en fonction de son contenu. Les conditions de réduction Shopify restent applicables. Les codes échangés et leur date d'expiration apparaissent dans les réductions du client.
Hub de l'espace client ¶
Le hub de l'espace client se trouve dans Shopify New Customer Accounts. Il s'agit d'une destination JeriCommerce unique qui intègre l'expérience de fidélité à l'espace du compte client.
Le hub de l'espace client nécessite Shopify New Customer Accounts. Si une boutique utilise encore Classic Customer Accounts, utilisez le hub de la boutique en ligne comme destination principale jusqu'à la mise à niveau de l'espace client.
Les campagnes boost actives apparaissent également dans le hub de l'espace client. La zone principale affiche la promotion et sa date de fin. Les actions de gain concernées et les points de niveau affichent leurs multiplicateurs actifs.
Le hub de l'espace client conserve les visuels principaux dans un cadre aux bonnes proportions, pour que les bannières restent visibles sans grandes zones vides. Sur les grands écrans, la zone principale se trouve à côté des cartes de points et de niveau. Sur les petits écrans, ces cartes s'empilent.
Ajouter le hub à la navigation de l'espace client ¶
Ouvrir les menus
Dans Shopify Admin, accédez à Content > Menus.
Sélectionner le menu de l'espace client
Ouvrez Customer account main menu.
Ajouter un élément de menu
Cliquez sur Add menu item.
Saisir le libellé
Choisissez un libellé comme « Fidélité », « Récompenses » ou le nom du programme.
Choisir le lien de l'application JeriCommerce
Dans Search or paste link, choisissez Apps > Loyalty Hub (JeriCommerce).
Enregistrer
Enregistrez le menu, puis ouvrez un compte client de test pour vérifier la présence du lien dans la navigation du compte.
Personnaliser le hub de la boutique en ligne ¶
Le hub de la boutique en ligne par défaut est conçu pour être personnalisé dans l'éditeur de thème Shopify. Cette section concerne uniquement ce hub et non celui de l'espace client.
Utilisez les paramètres du bloc du hub de la boutique en ligne pour effectuer les modifications les plus courantes :
| Zone de paramètres | Éléments personnalisables |
|---|---|
| Contenu | Titre principal, sous-titre et texte accessibles depuis les paramètres du bloc. |
| Sections | Affichage de la présentation du fonctionnement, des règles de gain et des niveaux VIP. |
| Couleurs | Couleurs principales, de contraste, secondaires, de texte et atténuées de la boutique. |
Trouver le bon réglage ¶
Choisissez la zone visuelle correspondant à la modification souhaitée. Chaque ligne indique les variables publiques qui contrôlent cette partie du hub de la boutique.
| Modification souhaitée | Variables à utiliser |
|---|---|
| Arrière-plan, largeur ou espacement de la page | --hub-color-page-bg, --hub-max-width, --hub-page-*, --hub-section-gap |
| Présentation, image ou retour à la ligne du titre principal | --hub-hero-*, --hub-copy-max-width, --hub-media-aspect-ratio, --hub-color-hero-* |
| Cartes, bordures, coins ou ombres | --hub-card-*, --hub-media-radius, --hub-shadow-* |
| Boutons, pastilles ou contraste des couleurs d'accentuation | --hub-button-*, --hub-pill-radius, --hub-color-accent*, --hub-color-on-accent* |
| Grilles des récompenses ou des parcours de gains | --hub-rewards-columns-*, --hub-earn-columns-*, --hub-earn-row-height |
| Cartes ou rails des niveaux | --hub-tier-*, --hub-reward-carousel-* |
| Fenêtres modales, réductions ou commandes de copie | --hub-modal-*, --hub-color-modal-*, --hub-discount-list-gap, --hub-color-copy-button-* |
| Aperçu du portefeuille et boutons du portefeuille | --hub-wallet-* |
| Titres, texte courant ou libellés | --hub-font-*, --hub-heading-*, --hub-label-* |
| Survol, affichage progressif ou mouvement des fenêtres modales | --hub-motion-* |
Téléchargez la référence CSS du hub de la boutique, puis copiez-la dans le champ Custom CSS du hub et modifiez uniquement les valeurs voulues. Le fichier contient seulement des variables publiques --hub-*.
Par exemple, ce code modifie l'arrière-plan de la page, la police des titres et la largeur du titre principal :
.jeri-loyalty-hub {
--hub-color-page-bg: #faf7f2;
--hub-font-heading-family: "Your Font", sans-serif;
--hub-hero-title-max-width: 18ch;
}
Si vous avez déjà défini une couleur ou une police dans l'éditeur du bloc, effacez ce paramètre avant d'appliquer une valeur CSS. La valeur de l'éditeur est appliquée en ligne. Si vous devez la conserver, ajoutez !important à la redéfinition de la propriété personnalisée.
Le fichier de référence ne contient pas d'alias internes tels que --ink, --font-display ou --type-display-size. Ces variables figurent dans la feuille de style compilée pour assurer la compatibilité des composants. Elles ne sont pas recommandées pour la personnalisation. Les noms --hub-color-page et --hub-font-heading ne sont pas des variables actuelles. Utilisez plutôt --hub-color-page-bg et --hub-font-heading-family.
Pour créer entièrement votre propre HTML ou CSS de boutique, réorganiser les sections, ou personnaliser les lignes de gain et les cartes de niveau, suivez plutôt le guide Modèles CDN personnalisés.