Obsolète : modèle par défaut de Loyalty Page

La JeriCommerce Loyalty Page est une page publique de votre boutique Shopify qui présente les règles de gain, les taux de conversion des points et les niveaux VIP. Le bouton d'action s'adapte à l'état de connexion du visiteur : les visiteurs voient « Join now » et les clients connectés voient « See rewards ». Ce dernier bouton peut renvoyer vers la page de compte ou ouvrir le widget JeriCommerce. Ce guide explique comment configurer et personnaliser le modèle par défaut dans l'éditeur de thème Shopify.

Configuration rapide ¶

Fonctionnement ¶

Chargement des données publiques ¶

La page récupère des données publiques depuis l'API JeriCommerce, sans authentification :

• Informations du programme : nom, nom du solde et configuration.
• Parcours d'engagement : règles de gain (achats, actions sur les réseaux sociaux, parrainage, etc.).
• Niveaux : seuils de points et facteurs des niveaux VIP.

Comportement du bouton d'action ¶

Le bouton utilise le moteur de modèles Liquid de Shopify pour afficher un contenu différent selon l'état de connexion :

• Visiteur : « Join now », qui renvoie vers la page de connexion ou d'inscription (URL configurable).
• Client connecté : « See rewards », qui renvoie vers la page du compte ou ouvre le panneau des récompenses du widget JeriCommerce. Le réglage Logged-in CTA Action détermine le comportement.

Le bouton destiné aux visiteurs fonctionne avec Shopify Classic Customer Accounts et New Customer Accounts. Conservez le chemin de connexion client de votre boutique dans Guest CTA URL, sauf si vous devez définir une autre destination.

Paramètres de l'éditeur de thème ¶

Tous les paramètres sont accessibles directement dans l'éditeur de thème Shopify lorsque le bloc Loyalty Page est sélectionné.

Général ¶

Contenu ¶

Sections ¶

Couleurs ¶

Personnaliser le modèle par défaut ¶

Éléments personnalisables ¶

• Modifier le texte : adaptez n'importe quel texte et combinez {variables} avec vos propres formulations.
• Réorganiser les sections : placez les niveaux au-dessus des règles de gain ou organisez librement les sections.
• Supprimer des sections : supprimez chaque balise <section> dont vous n'avez pas besoin.
• Modifier la structure HTML : utilisez des tableaux, des grilles ou des listes, selon votre design.
• Ajouter du CSS personnalisé : utilisez le réglage Custom CSS ou ajoutez des blocs <style>.

Personnaliser les lignes de gain ¶

Remplacez le modèle des lignes de gain pour modifier l'affichage des règles de gain :

<template data-jeri="earning-row">
  <div style="padding: 16px; border-bottom: 1px solid #eee;">
    <strong>{earning.title}</strong> — earn {earning.points}
    <p>{earning.description}</p>
  </div>
</template>
<div data-jeri="earnings-purchases"></div>
<div data-jeri="earnings-actions"></div>

Personnaliser les cartes de niveau ¶

Remplacez le modèle des niveaux pour modifier la présentation de leurs cartes :

<template data-jeri="tiers">
  <div class="my-tier">
    <h3>Tier: {tier.name}</h3>
    <p>Requires {tier.requiredPoints} to unlock</p>
    <span data-jeri="tier.factor" data-jeri-hide-if="1">
      Factor: {tier.factor}x
    </span>
    <div data-jeri-html="tier.content"></div>
  </div>
</template>

Format d'affichage des points ¶

Le champ earning.points suit un format compact selon le type de gain :

Pour le parrainage, le badge n'affiche que les points du parrain. La récompense du filleul est indiquée dans la description.

Variables CSS ¶

La mise en forme est gérée par des propriétés CSS personnalisées organisées en deux niveaux : les variables destinées au marchand, définies dans l'éditeur de thème, et les variables internes qui leur associent des paramètres de mise en page.

Variables destinées au marchand (définies sur :root) ¶

Le modèle Liquid les définit automatiquement à partir des couleurs sélectionnées dans l'éditeur de thème :

Variables internes (définies sur .jeri-loyalty-page) ¶

Elles résolvent les variables destinées au marchand et ajoutent des paramètres de mise en page et de structure. Remplacez-les dans le paramètre Custom CSS pour contrôler finement l'apparence :

Exemple : thème sombre ¶

.jeri-loyalty-page {
  --jlp-card-bg: #1a1a1a;
  --jlp-border-color: #333;
  --jlp-divider: #2a2a2a;
  --jlp-skeleton-bg: #222;
}

Exemple : espacement réduit ¶

.jeri-loyalty-page {
  --jlp-space: 12px;
  --jlp-border-radius: 8px;
}

Intégration du widget ¶

Lorsque Logged-in CTA Action est réglé sur widget_rewards, le bouton utilise #jeri=loyalty/rewards comme lien href. Si le widget JeriCommerce est actif sur la page, cliquer sur le lien ouvre son panneau de récompenses. Ainsi :

• la page de fidélité présente le programme au public : informations, règles de gain et niveaux ;
• le widget gère les récompenses, les transactions et la gestion du compte avec authentification ;
• les deux fonctionnent indépendamment et se complètent au moyen du motif d'URL #jeri=.

Internationalisation ¶

La Loyalty Page prend en charge plusieurs langues selon la langue actuelle de la boutique :

• Anglais (en), langue par défaut ;
• Espagnol (es) ;
• Français (fr) ;
• Allemand (de) ;
• Italien (it).

Les langues non prises en charge reviennent automatiquement à l'anglais. La langue est détectée à partir de l'attribut data-locale de l'élément racine, défini avec le filtre Liquid Shopify {{ request.locale.iso_code }}.