Introducción
El Hub de fidelidad es un widget integrable directamente en tu tienda online (Shopify o PrestaShop). Permite mostrar tu programa de fidelidad sin necesidad de ningún desarrollo adicional.
El widget ofrece una interfaz unificada para mostrar:
El perfil del cliente (estado, puntos)
Los niveles VIP
Las misiones disponibles
Las recompensas
El programa de referidos
💡 ¿Por qué utilizar el Hub de fidelidad?
Las mecánicas de fidelización suelen estar ocultas o comunicarse únicamente por correo electrónico. El widget mejora la visibilidad de tu programa y el engagement de tus clientes al hacer que toda la información sea accesible con un solo clic desde tu sitio.
Acceder al Hub de fidelidad
Para configurar el widget, dirígete a tu back-office de Loyoly:
En el menú lateral, ve a Personalización → Branding → Módulos
Verás tres tarjetas: Apariencia general, Página de fidelidad y Hub de fidelidad
Haz clic en Modificar bajo la tarjeta "Hub de fidelidad"
⚠️ Requisito previo: El Hub de fidelidad debe estar activado en tu cuenta. Si no ves esta opción, contacta a tu CSM para activarlo.
El editor del Hub de fidelidad
El editor se compone de dos pestañas principales:
Secciones — Gestiona los bloques de contenido mostrados en el widget (encabezado, perfil, recompensas, misiones, páginas de misiones, niveles VIP, páginas de niveles VIP, referidos, página de referidos, Botón flotante)
Tema — Personaliza la apariencia visual (apariencia, colores, tipografía, botones)
Una vista previa en tiempo real se muestra a la derecha, lo que te permite visualizar cada modificación de forma instantánea. Puedes alternar entre la vista móvil y escritorio mediante los iconos en la parte inferior de la vista previa.
En la parte superior del editor, un selector de idioma te permite previsualizar el widget en los diferentes idiomas configurados.
Configurar las secciones
La pestaña Secciones te permite elegir qué bloques mostrar en el widget, reorganizarlos y configurarlos individualmente.
Cada sección dispone de:
Un icono de ojo 👁 para mostrar u ocultar la sección
Un icono de papelera 🗑️ para eliminar la sección
Un icono de candado 🔒 para las secciones obligatorias que no pueden eliminarse
Puedes reorganizar las secciones arrastrando y soltando para modificar el orden de visualización en el widget.
Encabezado (Header)
La sección de encabezado es el primer elemento visible en el widget. Permite personalizar:
Título — El nombre que se muestra en la parte superior del widget
Imagen de banner — Una imagen de portada en formato 1125 × 369 píxeles
✨ Consejo: Utiliza un banner atractivo que refleje la identidad de tu marca. El título es multilingüe: haz clic en la bandera para alternar entre los idiomas.
Perfil
La sección Perfil muestra la información clave del cliente conectado: su nombre, su estado (nivel VIP) y su saldo de puntos.
La sección Perfil gestiona tres estados diferentes:
Predeterminado — La visualización estándar para un cliente conectado e inscrito en el programa
No conectado — La visualización para un visitante que no está conectado
Opt-out — La visualización para un cliente que se ha dado de baja del programa
Opciones de personalización disponibles:
Ocultar el estado VIP — Desactiva la visualización del nivel VIP en el perfil
Ocultar el número de puntos — Desactiva la visualización del saldo de puntos
Recompensas
Muestra las recompensas disponibles y las ya obtenidas por el cliente.
Recompensas — El resumen en la vista principal
Página de recompensas — La página detallada de las recompensas
Puedes mostrar la página de recompensas haciendo clic en: Visualización en una página dedicada en recompensas, después también puedes personalizar el icono de la sección.
Misiones
Muestra la lista de misiones disponibles para el cliente. Esta sección incluye:
Misiones — El resumen de las misiones en la vista principal
Página de misiones — La página detallada con todas las misiones
⚠️ Limitación V1: Las misiones no pueden completarse directamente desde el widget. Se muestran a título informativo y redirigen a la página dedicada para más detalles.
Niveles VIP
La sección Niveles VIP muestra los niveles de fidelidad de tu programa. Se configura en dos partes en la barra lateral: Niveles VIP para el resumen mostrado en la vista principal, y Página de Niveles VIP para la página dedicada.
Haz clic en Niveles VIP en la barra lateral. Aparecen las siguientes opciones:
Visualización en una página dedicada — Toggle para activar una página dedicada (Página nivel VIP). Haz clic en Editar para configurarla
Título de la sección — El título mostrado en la tarjeta en la vista principal
Descripción de la sección — Descripción breve bajo el título
Icono de la sección — Predeterminado, Icono personalizado o Sin icono
Página de Niveles VIP
Haz clic en Página de Niveles VIP en la barra lateral. El panel muestra «Niveles VIP / Página niveles VIP» con los siguientes parámetros:
Título de la sección — El título mostrado en la parte superior de la página dedicada.
Descripción de la sección — Texto mostrado bajo el título.
Icono de la sección — Predeterminado, Icono personalizado o Sin icono
Debajo, cada nivel aparece en forma de acordeón desplegable. Cada nivel contiene:
Objetivo del nivel — Texto que describe el objetivo a alcanzar. Valor por defecto: {{tier_goal}}.
Campo de recompensa personalizado — Texto libre para describir la recompensa asociada al nivel.
Ocultar las recompensas del programa.
Mostrar la recompensa del nivel anterior.
💡 Bueno saber: Si los niveles VIP no están activados en tu programa, esta sección no aparecerá en el widget.
Referidos
La sección Referidos permite a tus clientes compartir su enlace de referido directamente desde el widget. Haz clic en Referidos en la barra lateral para configurar la tarjeta mostrada en la vista principal: Visualización en una página dedicada, Título de la sección, Descripción de la sección e Icono de la sección.
Página de Referidos
Haz clic en Página de Referidos en la barra lateral. El panel muestra «Referidos / Página referidos» con tres pestañas:
Predeterminado — La visualización para un cliente conectado. Además del título, la descripción y el icono, puedes personalizar los iconos de los canales de compartir: Messenger, X, WhatsApp y SMS (Predeterminado o Icono personalizado para cada uno).
No conectado — La visualización para un visitante no conectado. Aquí configuras el texto del Botón de envío (multilingüe, hasta 100 caracteres).
Felicitaciones — El mensaje mostrado tras un referido exitoso. Dos campos: Mensaje de éxito (multilingüe, hasta 250 caracteres) y Botón de referido para el texto del botón que permite referir de nuevo (multilingüe, hasta 100 caracteres).
Botón flotante
El botón flotante que aparece en tu sitio y permite a los visitantes abrir el widget.
Opciones de configuración:
Posición — Coloca el botón flotante a la izquierda o a la derecha de la pantalla
Páginas de visualización — Muestra el botón flotante en todas las páginas o únicamente en algunas páginas
Lista negra de URLs — Excluye ciertas páginas a través del editor de Shopify
✨ Consejo: Si utilizas otros widgets de terceros (como Gorgias), puedes optar por el modo enlace dedicado en lugar del launcher. Esto abre el widget en una página dedicada, evitando conflictos visuales con otros widgets.
El modo de difusión por enlace se configura directamente desde la extensión del widget.
Personalizar el tema
La pestaña Tema te permite personalizar la apariencia global del widget para que se integre perfectamente con la identidad visual de tu marca.
Apariencia
Configura los redondeos y el espaciado de cuadrícula del widget para un resultado coherente con el diseño de tu sitio.
Colores
Define la paleta de colores del widget. Puedes personalizar los colores principales, los colores de fondo, los colores de texto y los colores de acentuación.
Tipografía
Elige las fuentes, tamaños y estilos de texto utilizados en el widget.
💡 Bueno saber: El widget utiliza por defecto las fuentes Google. Si una fuente Google no está disponible, se aplica automáticamente una fuente de respaldo (fallback).
Botones
Personaliza la forma, las dimensiones y el estilo de los botones mostrados en el widget.
Guardar y publicar
Una vez finalizadas tus modificaciones:
Verifica el resultado en la vista previa en tiempo real (móvil y escritorio)
Verifica los diferentes idiomas mediante el selector de idioma
Haz clic en Guardar en la parte superior derecha para guardar tus modificaciones
Si eliminas una sección y deseas recuperarla, puedes hacerlo haciendo clic en Añadir una sección y luego eligiendo la sección correspondiente en la lista.
Difusión
Después de haber finalizado tus configuraciones, difunde tu widget siguiendo estos pasos:
Ve a Comunicaciones
Selecciona Difusión
Haz clic en Parámetros (Hub de fidelidad)
Elige Añadir en Shopify
El widget puede difundirse de dos maneras:
Mediante botón flotante — Un botón flotante en tu sitio abre el widget en un panel lateral
Mediante un enlace dedicado — El widget se muestra en una página dedicada de tu sitio, accesible mediante un botón o un enlace en tu navegación
✨ Recomendación: La visualización segmentada por secciones (con páginas detalladas para cada funcionalidad) se recomienda para una mejor legibilidad y navegación para tus clientes.
Preguntas frecuentes
¿El Hub de fidelidad es compatible con todos los temas de Shopify?
Sí, el widget está diseñado para funcionar con todos los temas de Shopify y PrestaShop. Es independiente y no interfiere con el diseño existente de tu sitio.
¿Puedo utilizar el widget sin el Launcher?
Sí, puedes elegir integrar el widget mediante un enlace dedicado en lugar del botón flotante. Esta opción es ideal si ya tienes otros widgets en tu sitio (como Gorgias).
¿Los clientes pueden completar misiones en el widget?
En la versión actual, las misiones se muestran a título informativo. Los clientes son redirigidos a la página dedicada para completarlas. Una integración directa está prevista en una futura versión.
¿Cómo ocultar una sección del widget?
En la pestaña Secciones, haz clic en el icono de ojo 👁 junto a la sección que deseas ocultar. Ya no será visible en el widget, pero seguirá siendo configurable.
¿Las fuentes de mi sitio son compatibles?
El widget soporta las fuentes Google. Si utilizas una fuente personalizada no disponible en Google Fonts, se aplicará automáticamente una fuente de respaldo. Puedes ajustar la tipografía desde la pestaña Tema.