JeriCommerce Loyalty Hub es la experiencia recomendada para nuevas implementaciones de fidelización en Shopify. Incluye dos espacios que funcionan juntos:
- Hub de tienda: página de Online Store con la marca del comercio que explica el programa a los visitantes y se convierte en una experiencia completa de fidelización para los clientes con sesión iniciada.
- Hub de cuenta de cliente: destino integrado en Shopify New Customer Accounts que ofrece el hub de fidelización dentro del área de cuenta.
Qué espacio del Hub usar ¶
| Necesidad | Espacio recomendado | Motivo |
|---|---|---|
| Explicar el programa al público | Hub de tienda | Los visitantes pueden consultar las formas de obtener puntos, las recompensas y las ventajas antes de unirse o iniciar sesión. |
| Acciones de fidelización para clientes con sesión iniciada | Hub de tienda | Los clientes pueden consultar sus puntos y nivel reales, canjear recompensas y completar acciones para obtener puntos. |
| Personalización predeterminada de la marca | Hub de tienda | Los comercios pueden ajustar el texto, los colores y las secciones visibles desde el editor del tema de Shopify. |
| Ubicación en el perfil de cuenta | Hub de cuenta de cliente | Los clientes pueden abrir el hub completo desde Shopify New Customer Accounts sin añadir extensiones de cuenta por separado. |
La mayoría de las tiendas deberían usar ambos: el hub de tienda es el destino principal de fidelización y el hub de cuenta mantiene las acciones disponibles dentro del perfil del cliente.
Estructura recomendada ¶
Sigue esta estructura al crear una nueva experiencia de fidelización en Shopify:
- Crea una página pública del hub en la tienda.
- Añádela a la navegación con el nombre "Rewards", "Loyalty" o el nombre del programa.
- Úsala como destino principal de fidelización para visitantes y clientes con sesión iniciada.
- Añade el enlace Loyalty Hub a la navegación de la cuenta de Shopify si la tienda usa New Customer Accounts.
- Añade extensiones más pequeñas de Shopify solo cuando hagan falta en ubicaciones concretas, como páginas de producto, carrito, checkout o botones de descarga de Wallet.
La experiencia más sencilla empieza con el hub de tienda para descubrir el programa y acceder a todas las acciones. Después añade el enlace al hub de cuenta para que también esté disponible desde el perfil.
Hub de tienda ¶
El hub de tienda es el mejor lugar para presentar el programa de fidelización con la identidad de marca del comercio. Se encuentra en Online Store > Pages y se personaliza desde el editor del tema de Shopify, como cualquier otra sección del tema o bloque de aplicación.
Úsalo para mostrar:
- Una introducción al programa y la historia de la marca para los visitantes.
- Formas de obtener puntos y recompensas disponibles para quienes no han iniciado sesión.
- El estado real de los clientes con sesión iniciada, incluidos sus puntos y nivel.
- Las recompensas disponibles y su canje.
- Las acciones para obtener puntos que los clientes pueden completar desde la tienda.
- El Wallet Pass, las recomendaciones y otras acciones de fidelización que ofrece el hub.
Configuración ¶
Crear la página
En Shopify, ve a Online Store > Pages y crea una página para el programa de fidelización.
Abrir el editor del tema
Ve a Online Store > Themes > Customize, abre la plantilla de página que quieras usar y añade el bloque de aplicación Loyalty Hub de JeriCommerce.
Personalizar el contenido
Actualiza el título principal, el subtítulo, los colores y las secciones visibles. Escribe con claridad para los visitantes que quieren conocer el programa y para los clientes con sesión iniciada que ya usan su cuenta de fidelización.
Añadir la página a la navegación
Añade la página al menú de la tienda para que los clientes puedan encontrarla.
Qué ven los clientes ¶
El hub de tienda cambia según si la persona ha iniciado sesión:
| Estado del visitante | Experiencia |
|---|---|
| Visitante o cliente sin sesión iniciada | Información del programa, formas de obtener puntos, recompensas, niveles e indicaciones para iniciar sesión o unirse. |
| Cliente con sesión iniciada | Puntos y estado de nivel reales, canje de recompensas, acciones de acumulación y otras opciones de fidelización disponibles. |
Así, el hub de tienda funciona como página pública del programa y como panel de fidelización para los clientes que han iniciado sesión.
Las mejoras recientes facilitan consultar el hub en temas activos. Las tarjetas de nivel pueden mostrar imágenes; los carruseles de recompensas y niveles son más fluidos; las reglas de acumulación se despliegan progresivamente cuando hay muchas acciones; y los botones de descuento muestran instrucciones más claras al canjear o copiar un código. Las descripciones largas se ajustan a sus tarjetas, las descripciones de recompensa se muestran como texto legible y las imágenes del banner conservan su proporción natural.
Cuando hay una Boost Campaign activa, el hub muestra la promoción, la hora de finalización y los factores en las acciones de acumulación afectadas. Los clientes ven los puntos y puntos de nivel multiplicados donde se aplique la campaña.
Canjear puntos como dinero ¶
El hub de tienda y el hub de cuenta admiten recompensas Points as cash. En el hub de tienda, los clientes con sesión iniciada ven su saldo en Your points. Si hay una recompensa Points as cash disponible, la tarjeta también muestra el descuento que pueden canjear y el botón Redeem.
Los clientes hacen clic en Redeem para elegir una cantidad y confirmar los puntos que quieren gastar. Después del canje, la recompensa muestra el importe del descuento y el código. Pueden copiar el código o hacer clic en Apply discount.
Ninguno de los hubs conoce el contenido del carrito para limitar el canje según los artículos. Se siguen aplicando las condiciones de descuento de Shopify. Los códigos canjeados y su caducidad aparecen en los descuentos del cliente.
Hub de cuenta de cliente ¶
El hub de cuenta de cliente está dentro de New Customer Accounts de Shopify. Es un único destino de JeriCommerce que integra la experiencia de fidelización en el área de cuenta.
El hub de cuenta de cliente requiere New Customer Accounts de Shopify. Si una tienda sigue usando Classic Customer Accounts, usa el hub de tienda como destino principal hasta que actualices la experiencia de cuenta.
Las campañas Boost activas también aparecen en el hub de cuenta. El área principal muestra la promoción y la hora de finalización, mientras las acciones de acumulación y los puntos de nivel afectados muestran sus factores activos.
El hub de cuenta muestra las ilustraciones principales en un marco con proporción fija para que los banners sean visibles sin dejar demasiado espacio vacío. En pantallas grandes, la imagen aparece junto a las tarjetas de puntos y niveles. En pantallas pequeñas, las tarjetas se apilan.
Añadirlo a la navegación de la cuenta ¶
Abrir los menús
En el panel de administración de Shopify, ve a Content > Menus.
Elegir el menú de la cuenta
Abre Customer account main menu.
Añadir un elemento al menú
Haz clic en Add menu item.
Introducir la etiqueta
Usa una etiqueta como "Loyalty", "Rewards" o el nombre del programa.
Elegir el enlace de la aplicación JeriCommerce
En Search or paste link, elige Apps > Loyalty Hub (JeriCommerce).
Guardar
Guarda el menú, abre una cuenta de cliente de prueba y comprueba que el enlace aparezca en la navegación de la cuenta.
Personalizar el hub de tienda ¶
El hub de tienda predeterminado está diseñado para personalizarse desde Shopify Theme Editor. Esta sección solo se aplica al hub de tienda, no al hub de cuenta de cliente.
Usa los ajustes del bloque del hub de tienda para los cambios más habituales:
| Área de ajustes | Qué se puede personalizar |
|---|---|
| Contenido | Título principal, subtítulo y texto disponibles en los ajustes del bloque. |
| Secciones | Mostrar u ocultar la información de funcionamiento, las reglas de acumulación y los niveles VIP. |
| Colores | Adaptar el hub a los colores principales, de contraste, secundarios, de texto y atenuados de la tienda. |
Encontrar el ajuste adecuado ¶
Usa el área visual que corresponda al cambio que quieres hacer. Cada fila indica los tokens públicos que controlan esa parte del hub.
| Si quieres cambiar... | Empieza con estos tokens |
|---|---|
| Fondo, anchura o espaciado de la página | --hub-color-page-bg, --hub-max-width, --hub-page-*, --hub-section-gap |
| Diseño, imagen o ajuste de línea del título principal | --hub-hero-*, --hub-copy-max-width, --hub-media-aspect-ratio, --hub-color-hero-* |
| Tarjetas, bordes, esquinas o sombras | --hub-card-*, --hub-media-radius, --hub-shadow-* |
| Botones, cápsulas o contraste del color de énfasis | --hub-button-*, --hub-pill-radius, --hub-color-accent*, --hub-color-on-accent* |
| Cuadrículas de recompensas o flujos de acumulación | --hub-rewards-columns-*, --hub-earn-columns-*, --hub-earn-row-height |
| Tarjetas o carruseles de niveles | --hub-tier-*, --hub-reward-carousel-* |
| Ventanas, descuentos o controles de copia | --hub-modal-*, --hub-color-modal-*, --hub-discount-list-gap, --hub-color-copy-button-* |
| Vista previa y botones de Wallet | --hub-wallet-* |
| Encabezados, texto o etiquetas | --hub-font-*, --hub-heading-*, --hub-label-* |
| Efectos al pasar el cursor, desplegar contenido o mover ventanas | --hub-motion-* |
Descarga la referencia CSS del Storefront Hub, cópiala en el campo Custom CSS del hub de tienda y edita solo los valores que quieras cambiar. El archivo contiene únicamente tokens públicos --hub-*.
Por ejemplo, puedes cambiar el fondo de la página, la fuente de los encabezados y el ancho del título principal:
.jeri-loyalty-hub {
--hub-color-page-bg: #faf7f2;
--hub-font-heading-family: "Your Font", sans-serif;
--hub-hero-title-max-width: 18ch;
}
Si ya definiste un color o una fuente en el editor del bloque, borra ese ajuste antes de sustituirlo con CSS. El valor del editor se aplica en línea. Si necesitas conservarlo, añade !important a la propiedad CSS personalizada.
El archivo de referencia no incluye alias internos como --ink, --font-display o --type-display-size. Aparecen en la hoja de estilos compilada por compatibilidad con los componentes, pero no son la API recomendada para personalizar el hub. Nombres como --hub-color-page y --hub-font-heading no son tokens actuales. Usa --hub-color-page-bg y --hub-font-heading-family.
Para personalizar por completo el HTML, el CSS, el orden de las secciones, las filas de acumulación o las tarjetas de nivel, usa la guía Plantillas CDN personalizadas en vez de la configuración predeterminada.