Veraltet: Standardvorlage der Loyalty Page

Die JeriCommerce Loyalty Page ist eine öffentliche Seite deines Shopify-Shops, auf der Sammelregeln, Umrechnungskurse für Punkte und VIP-Stufen angezeigt werden. Die CTA-Schaltfläche richtet sich nach dem Anmeldestatus des Besuchers: Gäste sehen „Join now“, angemeldete Kunden „See rewards“ (führt zur Kontoseite oder öffnet das JeriCommerce-Widget). Diese Anleitung erläutert, wie du die Standardvorlage im Shopify Theme Editor einrichtest und anpasst.

Schnelleinrichtung ¶

Funktionsweise ¶

Öffentliche Daten laden ¶

Die Seite ruft öffentliche Daten von der JeriCommerce-API ab (keine Authentifizierung erforderlich):

• Programminformationen — Name, Punktestandsbezeichnung, Konfiguration
• Sammelaktionen — Sammelregeln (Käufe, Social-Media-Aktionen, Empfehlungen usw.)
• Stufen — VIP-Levels mit Punktschwellen und Faktoren

Verhalten der CTA-Schaltfläche ¶

Die CTA-Schaltfläche verwendet Shopifys Liquid-Templates, um je nach Anmeldestatus unterschiedliche Inhalte anzuzeigen:

• Gast: „Join now“ → Link zur Anmelde- oder Registrierungsseite (URL konfigurierbar)
• Angemeldet: „See rewards“ → führt entweder zur Kontoseite oder öffnet das Belohnungsfenster im JeriCommerce-Widget (über die Einstellung Logged-in CTA Action konfigurierbar)

Die CTA für Gäste funktioniert sowohl mit Shopify Classic Customer Accounts als auch New Customer Accounts. Lass Guest CTA URL auf den Kundenanmeldepfad deines Shops eingestellt, sofern kein anderes Ziel erforderlich ist.

Theme-Editor-Einstellungen ¶

Alle Einstellungen sind direkt im Shopify Theme Editor verfügbar, wenn der Block Loyalty Page ausgewählt ist.

Allgemein ¶

Inhalt ¶

Abschnitte ¶

Farben ¶

Standardvorlage anpassen ¶

Änderungsmöglichkeiten ¶

• Texte ändern — Bearbeite beliebige Texte und kombiniere {variables} mit eigenen Formulierungen.
• Abschnitte neu anordnen — Verschiebe Stufen über die Sammelaktionen oder ordne die Abschnitte frei an.
• Abschnitte entfernen — Lösche nicht benötigte <section>-Elemente.
• HTML-Struktur ändern — Verwende Tabellen, Raster oder Listen — passend zu deinem Design.
• Eigenes CSS hinzufügen — Verwende die Einstellung Custom CSS oder füge <style>-Blöcke hinzu.

Zeilen mit Sammelaktionen anpassen ¶

Überschreibe das Template der Sammelaktionszeile, um die Darstellung von Sammelregeln zu ändern:

<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>

Stufenkarten anpassen ¶

Überschreibe das Stufen-Template, um das Layout der Stufenkarte zu ändern:

<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>

Anzeigeformat der Punkte ¶

Das Feld earning.points wird je nach Sammeltyp in einem kompakten Format dargestellt:

Bei Empfehlungen werden im Abzeichen nur die Punkte der empfehlenden Person angezeigt. Die Belohnung für Freunde wird im Beschreibungstext genannt.

CSS-Variablen ¶

Das Styling wird über benutzerdefinierte CSS-Eigenschaften in zwei Ebenen gesteuert: Variablen für Händler, die im Theme Editor festgelegt werden, und interne Variablen, die diese mit Layout-Tokens verknüpfen.

Variablen für Händler (auf :root) ¶

Diese Variablen werden vom Liquid-Template anhand der Farbeinstellungen des Theme Editors automatisch gesetzt:

Interne Variablen (auf .jeri-loyalty-page) ¶

Diese Variablen übernehmen Händlerwerte und ergänzen Tokens für Layout und Struktur. Überschreibe sie zur gezielten Anpassung in Custom CSS:

Beispiel: dunkles Theme ¶

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

Beispiel: kompakte Abstände ¶

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

Widget-Integration ¶

Wenn für Logged-in CTA Action widget_rewards eingestellt ist, verwendet die CTA als href #jeri=loyalty/rewards. Ist das JeriCommerce Storefront Widget auf der Seite aktiv, öffnet dieser Link beim Anklicken das Belohnungsfenster des Widgets. Das bedeutet:

• Die Loyalty Page erklärt das Programm (öffentliche Informationen, Sammelregeln und Stufen).
• Das Widget verwaltet Belohnungen, Transaktionen und Kontoeinstellungen (nach Anmeldung).
• Beide funktionieren unabhängig voneinander und ergänzen sich über das URL-Muster #jeri=.

Internationalisierung ¶

Die Loyalty Page unterstützt mehrere Sprachen, abhängig von der aktuellen Spracheinstellung des Shops:

• Englisch (en) — Standardsprache
• Spanisch (es)
• Französisch (fr)
• Deutsch (de)
• Italienisch (it)

Nicht unterstützte Sprachen werden automatisch auf Englisch zurückgesetzt. Die Sprache wird über das Attribut data-locale des Stammelements erkannt. Dieses wird mit dem Shopify-Liquid-Filter {{ request.locale.iso_code }} gesetzt.