Obsoleto: plantilla predeterminada de Loyalty Page

JeriCommerce Loyalty Page es una página pública de Shopify que muestra las reglas para obtener puntos, los tipos de conversión de puntos y los niveles VIP. El botón CTA cambia según si el visitante ha iniciado sesión: los visitantes ven "Join now" y los clientes con sesión iniciada ven "See rewards". El botón puede abrir la página de cuenta o el widget de JeriCommerce. Esta guía explica cómo configurar y personalizar la plantilla predeterminada con Shopify Theme Editor.

Configuración rápida ¶

Cómo funciona ¶

Carga de datos públicos ¶

La página solicita datos públicos a la API de JeriCommerce, sin necesidad de autenticación:

• Información del programa: nombre, nombre del saldo y configuración.
• Flujos de participación: reglas para obtener puntos, como compras, acciones sociales y recomendaciones.
• Niveles: niveles VIP con umbrales de puntos y factores.

Comportamiento del botón CTA ¶

El botón CTA usa plantillas Liquid de Shopify para mostrar contenido distinto según el estado de inicio de sesión:

• Visitante: "Join now", enlaza a la página de inicio de sesión o registro mediante una URL configurable.
• Cliente con sesión iniciada: "See rewards", abre la página de cuenta o el panel de recompensas del widget de JeriCommerce. Se configura con el ajuste Logged-in CTA Action.

El CTA para visitantes funciona con Shopify Classic Customer Accounts y New Customer Accounts. Mantén Guest CTA URL como la ruta de inicio de sesión de clientes de la tienda, salvo que necesites otro destino.

Ajustes de Theme Editor ¶

Todos los ajustes están disponibles directamente en Shopify Theme Editor cuando seleccionas el bloque Loyalty Page.

General ¶

Content ¶

Sections ¶

Colors ¶

Personalizar la plantilla predeterminada ¶

Qué puedes cambiar ¶

• Cambiar el texto: edita cualquier texto y combina {variables} con tus propias palabras.
• Reordenar secciones: coloca los niveles antes que las formas de obtener puntos o cambia el orden como prefieras.
• Eliminar secciones: elimina cualquier <section> que no necesites.
• Cambiar la estructura HTML: usa tablas, cuadrículas o listas, según el diseño.
• Añadir CSS personalizado: usa el ajuste Custom CSS o añade bloques <style>.

Personalizar filas de acumulación ¶

Sustituye la plantilla de una fila de acumulación para cambiar cómo aparecen las reglas:

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

Personalizar tarjetas de nivel ¶

Sustituye la plantilla de niveles para cambiar el diseño de las tarjetas:

<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 de visualización de puntos ¶

El campo earning.points usa un formato compacto que depende del tipo de acumulación:

En las recomendaciones, la insignia solo muestra los puntos de quien recomienda. La recompensa de la otra persona aparece en la descripción.

Variables CSS ¶

Los estilos se controlan con propiedades CSS personalizadas organizadas en dos capas: variables visibles para el comercio, configuradas en el editor del tema, y variables internas que las relacionan con los tokens de diseño.

Variables visibles para el comercio (en :root) ¶

La plantilla Liquid las define automáticamente según los colores elegidos en el editor del tema:

Variables internas (en .jeri-loyalty-page) ¶

Estas variables resuelven los valores del comercio y añaden tokens de estructura y diseño. Sobrescríbelas en Custom CSS para ajustar detalles:

Ejemplo: tema oscuro ¶

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

Ejemplo: espaciado compacto ¶

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

Integración del widget ¶

Cuando Logged-in CTA Action se configura como widget_rewards, el enlace del CTA es #jeri=loyalty/rewards. Si JeriCommerce Storefront Widget está activo en la página, al hacer clic se abre el panel de recompensas del widget. Esto significa que:

• La página de fidelización explica el programa mediante información pública, reglas para obtener puntos y niveles.
• El widget administra las recompensas, las transacciones y la cuenta con autenticación.
• Ambos funcionan por separado y se complementan mediante el patrón de URL #jeri=.

Internacionalización ¶

La página de fidelización admite varios idiomas según la configuración regional actual de la tienda:

• Inglés (en), predeterminado.
• Español (es).
• Francés (fr).
• Alemán (de).
• Italiano (it).

Los idiomas no admitidos usan automáticamente el inglés. La configuración regional se detecta mediante el atributo data-locale del elemento raíz, definido con el filtro Liquid {{ request.locale.iso_code }} de Shopify.