Deprecato: modello predefinito Loyalty Page

La JeriCommerce Loyalty Page è una pagina pubblica del negozio Shopify che mostra regole di accumulo, tassi di conversione dei punti e livelli VIP. Il pulsante CTA si adatta allo stato di accesso del visitatore: gli ospiti vedono "Join now", mentre i clienti che hanno effettuato l'accesso vedono "See rewards" (configurabile per aprire la pagina account o il widget JeriCommerce). Questa guida spiega come configurare e personalizzare il modello predefinito con l'editor del tema Shopify.

Configurazione rapida ¶

Come funziona ¶

Caricamento dei dati pubblici ¶

La pagina recupera i dati pubblici dall'API JeriCommerce senza autenticazione:

• Informazioni sul programma: nome, nome del saldo e configurazione
• Flussi di coinvolgimento: regole di accumulo (acquisti, azioni social, referral e così via)
• Livelli: livelli VIP con soglie e moltiplicatori dei punti

Comportamento del pulsante CTA ¶

Il pulsante CTA usa il templating Liquid di Shopify per mostrare contenuti diversi in base allo stato di accesso:

• Ospite: "Join now" → link alla pagina di accesso o registrazione (URL configurabile)
• Cliente connesso: "See rewards" → naviga alla pagina account o apre il pannello premi del widget JeriCommerce (configurabile tramite l'impostazione Logged-in CTA Action)

La CTA per gli ospiti funziona con gli account cliente Shopify classici e con i New Customer Accounts. Mantieni Guest CTA URL impostato sul percorso di accesso clienti del negozio, a meno che non serva una destinazione personalizzata.

Impostazioni dell'editor del tema ¶

Tutte le impostazioni sono disponibili direttamente nell'editor del tema Shopify quando è selezionato il blocco Loyalty Page.

Generale ¶

Contenuto ¶

Sezioni ¶

Colori ¶

Personalizza il modello predefinito ¶

Cosa puoi modificare ¶

• Modificare i testi — Cambia qualsiasi testo e combina {variables} con parole personalizzate.
• Riordinare le sezioni — Sposta i livelli sopra i metodi di accumulo o riordina liberamente.
• Rimuovere sezioni — Elimina qualsiasi <section> non necessaria.
• Modificare la struttura HTML — Usa tabelle, griglie, elenchi o qualsiasi formato adatto al design.
• Aggiungere CSS personalizzato — Usa l'impostazione Custom CSS o aggiungi blocchi <style>.

Personalizza le righe di accumulo ¶

Sostituisci il modello delle righe di accumulo per modificarne la visualizzazione:

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

Personalizza le schede dei livelli ¶

Sostituisci il modello dei livelli per modificarne il layout:

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

Formato di visualizzazione dei punti ¶

Il campo earning.points usa un formato compatto in base al tipo di accumulo:

Per i referral, il badge mostra solo i punti di chi invita. Il premio dell'amico è indicato nella descrizione.

Variabili CSS ¶

Lo stile si controlla tramite proprietà CSS personalizzate, organizzate in due livelli: variabili visibili al merchant impostate dall'editor del tema e variabili interne che le risolvono insieme ai token di layout.

Variabili visibili al merchant (impostate su :root) ¶

Il modello Liquid le imposta automaticamente in base ai colori selezionati nell'editor del tema:

Variabili interne (impostate su .jeri-loyalty-page) ¶

Queste variabili risolvono i valori del merchant e aggiungono token strutturali e di layout. Sovrascrivile nell'impostazione Custom CSS per un controllo più preciso:

Esempio: tema scuro ¶

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

Esempio: spaziatura compatta ¶

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

Integrazione del widget ¶

Quando Logged-in CTA Action è impostato su widget_rewards, la CTA usa #jeri=loyalty/rewards come href. Se il JeriCommerce Storefront Widget è attivo sulla pagina, facendo clic sul link si apre il pannello premi del widget. Di conseguenza:

• La Loyalty Page spiega il programma con informazioni pubbliche, regole di accumulo e livelli.
• Il widget gestisce premi, transazioni e account con autenticazione.
• Funzionano indipendentemente, ma si completano tramite il formato URL #jeri=.

Internazionalizzazione ¶

La Loyalty Page supporta più lingue in base alla lingua attuale del negozio:

• Inglese (en), predefinito
• Spagnolo (es)
• Francese (fr)
• Tedesco (de)
• Italiano (it)

Le lingue non supportate ripiegano automaticamente sull'inglese. La lingua viene rilevata tramite l'attributo data-locale sull'elemento radice, impostato usando il filtro Liquid Shopify {{ request.locale.iso_code }}.