Introducción
El branding consiste en modificar los distintos aspectos visuales de tu programa y se divide en 3 partes: la apariencia general, la página de fidelización y el módulo de cuenta de cliente.
💡 Como recordatorio, el objetivo es tener una página en tu sitio donde tus clientes puedan encontrar tu programa de fidelización y de referencias.
Tienes la posibilidad de personalizar esta página ajustando los títulos, las descripciones o incluso el orden de visualización, permitiendo así una adaptación completa a tus preferencias y a la identidad de tu marca.🌟
La apariencia general
Vas a poder modificar la apariencia global de tus espacios de usuario.
Esta sección se divide en 3 partes:
La tipografía
La tipografía te permite modificar las fuentes de tu programa.
✨ Sigue nuestra guía para modificar las tipografías.
El botón de inicio de sesión, registro y retorno
Elige el texto del botón y personaliza su apariencia.
Puedes:
definir el tamaño y el grosor del texto,
elegir el color del texto y del fondo,
configurar los colores al pasar el cursor,
ajustar el radio de las esquinas.
Para una personalización avanzada, utiliza un archivo CSS personalizado. Encuentra todos los pasos en nuestra guía.
La página de fidelización
La página constituye el corazón de tu branding, ofreciendo un escaparate claro y atractivo de las misiones y programas que propones. Gracias a una personalización completa de los títulos, descripciones, imágenes y colores, esta página se convierte en el fiel reflejo de la identidad de tu marca.
💡 La adición de la página se realiza con un solo clic desde la pestaña Comunicación - Difusión. Sigue nuestra guía para referenciar tu página!
Puedes elegir ocultar los módulos o reorganizar las secciones en el orden que desees.
El banner
Selecciona la disposición de los textos en el banner según tus preferencias. Opta por una imagen específica, adaptada a una visualización en ordenador o móvil. También tienes la libertad de personalizar íntegramente los textos del banner.
1. Disposición
Define la disposición general de la sección.
2. Apariencia de la sección
Imagen – Desktop Arrastra y suelta una imagen o súbela. (Tamaño recomendado: 1440 × 500 px)
Imagen – Mobile
Arrastra y suelta una imagen o súbela. (Tamaño recomendado: 1440 × 500 px)
Color de la sección Elige el color de fondo de la sección.
3. Textos
Título
Título
Texto
Elige el texto del título y define sus parámetros de visualización.
Puedes:
alinear el texto
elegir el color y el tamaño del texto
definir el tamaño del texto
elegir el grosor de la fuente
Descripción
Descripción
Texto
Elige el texto de la descripción y define sus parámetros de visualización.
Puedes:
alinear el texto
elegir el color y el tamaño del texto
elegir el grosor de la fuente
El perfil
Personaliza la sección de perfil del usuario modificando el texto, el color y el tamaño a tu conveniencia. Ajusta también el tamaño de los botones de redes sociales para una mejor integración con el resto de la interfaz.
Apariencia de la sección – Redes Sociales
Apariencia de la sección – Redes Sociales
Elige el texto del botón y personaliza su apariencia.
Puedes:
alinear el texto
elegir el color y el tamaño del texto
definir el grosor
seleccionar el color de fondo de la sección.
Botones de redes sociales
Botones de redes sociales
Personaliza los botones de tus redes sociales
Puedes:
definir el tamaño y el grosor del texto
elegir el color del texto y del fondo,
configurar los colores del texto y del fondo al pasar el cursor,
ajustar el radio de las esquinas.
Los pasos
Realiza modificaciones en la sección de los pasos, tanto para los usuarios conectados como no conectados. Tienes la posibilidad de cambiar los textos y reformatear su presentación según tus necesidades.
Apariencia de la sección
Apariencia de la sección
Color de la sección
Personaliza el color de fondo de la sección.
Modo no conectado
Modo no conectado
Número
Personaliza el número del paso.
Puedes:
definir el color y el tamaño del texto
elegir el grosor de la fuente
Título
Personaliza el título principal de la sección.
Puedes:
definir el color y el tamaño del texto
elegir el grosor de la fuente
Descripción
Personaliza la descripción de la sección para guiar al usuario.
Puedes:
definir el color y el tamaño del texto
elegir el grosor de la fuente
Paso 1 / Paso 2 / Paso 3
Puedes:
personalizar el número del paso
añadir o modificar el título del paso
añadir o modificar la descripción del paso
Modo conectado
Modo conectado
Título
Personaliza el título principal que se muestra al usuario conectado.
Puedes:
modificar el texto,
elegir el color y el tamaño del texto
elegir el grosor de la fuente
Subtítulo
Personaliza el subtítulo para mostrar el número de puntos del usuario.
Puedes:
modificar el texto,
elegir el color y el tamaño del texto
elegir el grosor de la fuente
Botón "Mis recompensas"
Personaliza el botón para acceder a las recompensas.
Puedes:
modificar el texto
ajustar el tamaño y el grosor del texto
elegir el color del texto y del fondo
configurar el color del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas para redondear el botón.
Botón "Mis actividades recientes"
Personaliza el botón para acceder a las actividades recientes del usuario.
Puedes:
modificar el texto
ajustar el tamaño y el grosor del texto
elegir el color del texto y del fondo
configurar el color del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Las secciones de la página de fidelización
Reorganiza la sección dedicada a las referencias, a las misiones, a las recompensas y a los niveles VIP, pruebas de producto y tarjeta de fidelidad para que armonice con la estética y la funcionalidad de tu programa.
Las misiones, las recompensas y las pruebas de producto
Disposición
Disposición
Organiza la estructura de la sección y ajusta la apariencia general
Apariencia de la sección
Apariencia de la sección
Texto
Personaliza el texto de esta sección para explicar a los usuarios cómo obtener puntos.
Puedes:
alinear el texto
elegir el color del texto
ajustar el tamaño y el grosor del texto
definir el color de fondo de la sección
Tarjeta "Misión"
Tarjeta "Misión"
Personalizar la apariencia de la tarjeta de misión.
Puedes:
definir el color del fondo
configurar el color al pasar el cursor
ajustar el radio de las esquinas
elegir el color de los contornos
Número de puntos
Puedes personalizar la visualización del número de puntos.
Puedes:
elegir el color del texto
definir el color del texto al pasar el cursor
ajustar el tamaño del texto y el grosor de la fuente
Nombre de la misión
Puedes personalizar la visualización del nombre de la misión.
Puedes:
elegir el color del texto
definir el color del texto al pasar el cursor
ajustar el tamaño del texto
definir el grosor.
Botón
Botón
Personalizar la apariencia del botón.
Puedes:
ajustar el tamaño del texto
elegir el grosor de la fuente
elegir el color del texto
seleccionar el color del fondo
configurar el color del texto al pasar el cursor
configurar el color del fondo al pasar el cursor
ajustar el radio de las esquinas.
Las referencias
1. Sección referencias (cliente)
Disposición de la Sección
Organiza la estructura de la sección
Apariencia de la sección
Apariencia de la sección
Personaliza la apariencia general de la sección.
Puedes:
añadir una imagen Desktop (tamaño recomendado: 1920 × 960 px) arrastrándola o subiéndola,
añadir una imagen Mobile (tamaño recomendado: 960 × 1920 px) arrastrándola o subiéndola,
elegir el color de la sección.
Apariencia de la tarjeta
Apariencia de la tarjeta
Puedes personalizar la apariencia general, el título y la descripción de la tarjeta.
Puedes:
alinear el texto
definir el color del fondo
configurar el color al pasar el cursor
ajustar el radio de las esquinas
elegir el color de los contornos.
Iconos de Compartir
Iconos de Compartir
Arrastra una imagen o súbela para el icono.
Enlace
E-mail
SMS
WhatsApp
Messenger
X
Botón
Botón
Personaliza la apariencia del botón.
Puedes:
definir el tamaño del texto
elegir el grosor de la fuente
definir el color del texto y del fondo
definir el color del texto y del fondo al pasar el cursor
elegir el radio de las esquinas.
Tarjeta "No conectado" / Tarjeta "Compartir" / Tarjeta "Felicidades"
Tarjeta "No conectado" / Tarjeta "Compartir" / Tarjeta "Felicidades"
Personaliza el contenido de la tarjeta.
Puedes:
definir el título de la tarjeta
definir el texto de la descripción
definir el texto del botón
3. Sección: Modal Referencia (amigo/a)
Los pasos de configuración son los mismos que para las demás secciones, incluyendo:
Modal "Verificación"
Modal "Éxito"
Modal "Error"
Personaliza el contenido de la tarjeta.
Puedes:
definir el título de la tarjeta
definir el texto de la descripción
definir el texto del botón
Tarjeta de fidelidad
Disposición de la Sección
Disposición de la Sección
Organiza la estructura de la sección
Apariencia de la sección
Apariencia de la sección
Puedes definir la apariencia general de la sección:
utilizar una imagen dinámica,
añadir una imagen personalizada,
elegir el color de la sección.
Textos "Loyalty Card"
Textos "Loyalty Card"
Título
Personaliza el título y la descripción de la sección.
Puedes:
alinear el texto
definir el color del texto
definir el tamaño y el grosor del texto
Descripción
alinear el texto
definir el color del texto
definir el tamaño y el grosor del texto
La cuenta del cliente
Integrar el módulo de cuenta de cliente por encima o por debajo de los pedidos del cliente es importante por varias razones. Permite a tus clientes conocer su número de puntos y acceder al programa rápidamente. La mayor visibilidad de los puntos de fidelidad anima a los clientes a aprovechar sus puntos, canjeando recompensas.
Puedes modificar la apariencia de la sección, eligiendo una imagen desktop o mobile y modificando el conjunto de los textos.
Navegación y apariencia
Fondo de la sección
Fondo de la sección
Personaliza el fondo de la sección
Puedes:
añadir una imagen para la versión desktop (540 × 150)
añadir una imagen para la versión mobile (360 × 290)
definir el color del bloque
elegir el color de la navegación
seleccionar el color de la sección
ajustar el radio de las esquinas.
Sección
Sección
texto
Personaliza el contenido de la sección
Puedes:
definir el título de la sección
alinear los textos
personalizar el color, el tamaño y el grosor del texto.
Puntos
Personaliza la visualización de los puntos
Puedes:
personalizar la denominación de los puntos
personalizar el color, el tamaño y el grosor del texto.
Menú
Menú
Título
Personaliza el contenido de la sección
Puedes:
definir los títulos del menú (Fidelidad, Recompensas, Referencias)
añadir una imagen para cada entrada
Menú activo
Personaliza el menú activo
Puedes:
definir el tamaño del texto y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Menú inactivo
Personaliza el menú inactivo
Puedes:
definir el tamaño del texto y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Fidelidad
Formato de la tarjeta
Formato de la tarjeta
Personaliza el formato de la tarjeta
Puedes:
elegir el formato Tarjeta de puntos
seleccionar la visualización en banda
adaptar la presentación de la tarjeta de puntos.
Bloque fidelidad
Bloque fidelidad
Título de la sección
Personaliza el título de la sección
Puedes:
personalizar el texto principal
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Niveles VIP
Personaliza los Niveles VIP
Puedes:
definir el texto de los Niveles VIP
alinear los textos
personalizar el color, el tamaño y el grosor del texto.
Descripción
Personaliza la descripción
Puedes:
definir el texto de descripción
alinear los textos
personalizar el color, el tamaño y el grosor del texto.
Botón
Botón
Personaliza el botón
Puedes:
definir el texto del botón
elegir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Estilo de la tarjeta
Estilo de la tarjeta
Personaliza el estilo de la tarjeta
Puedes:
elegir el estilo de la tarjeta
seleccionar el estilo de visualización (Simple/ Nivel VIP/ Recompensa próxima)
Personalización de la tarjeta
Personalización de la tarjeta
Personaliza la tarjeta de fidelidad
Puedes:
definir el color de la tarjeta
ajustar el radio de las esquinas.
Número de puntos
Personaliza la visualización del número de puntos
Puedes:
elegir el color del texto
definir el tamaño del texto
seleccionar el grosor del texto.
Denominación de los puntos
Personaliza la denominación de los puntos
Puedes:
elegir el color del texto
definir el tamaño del texto
seleccionar el grosor del texto.
Nivel VIP
Personaliza el Nivel VIP
Puedes:
definir el color del texto
elegir el color de fondo
configurar el color del progreso
seleccionar el color del punto.
Recompensas
Título de la sección
Título de la sección
Personaliza el título de la sección
Puedes:
definir el título de la sección
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza la descripción
Puedes:
definir el texto de descripción
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Tarjeta "recompensa"
Tarjeta "recompensa"
Personaliza las tarjetas "Recompensa"
Puedes:
definir el color del fondo de la tarjeta
elegir el color al pasar el cursor
ajustar el radio de las esquinas
seleccionar el color de los contornos.
Personaliza el nombre de la recompensa
Puedes:
alinear los textos
elegir el color del texto
configurar el color del texto al pasar el cursor
definir el tamaño y el grosor del texto.
Personaliza la visualización del número de puntos
Puedes:
alinear los textos
elegir el color del texto
configurar el color del texto al pasar el cursor
definir el tamaño y el grosor del texto.
Botón "recompensa"
Botón "recompensa"
Personaliza el botón
Puedes:
definir el texto del botón
elegir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Referencias
Bloque referencias
Bloque referencias
Personaliza el bloque referencias
Puedes:
definir el texto de la sección
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza el título de las referencias
Puedes:
definir el texto del título
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza la descripción
Puedes:
definir el texto de descripción
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza el botón de referencias
Puedes:
definir el texto del botón
elegir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Icono "Compartir"
Icono "Compartir"
Personaliza los iconos de compartir
Puedes:
añadir un icono para el enlace
añadir un icono para el e-mail
añadir un icono para el SMS
añadir un icono para WhatsApp
añadir un icono para Messenger
añadir un icono para X.
Bloque "Felicidades"
Bloque "Felicidades"
Personaliza el bloque "Felicidades"
Puedes:
definir el título del bloque
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza la descripción
Puedes:
definir el texto de descripción
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza el botón
Puedes:
definir el texto del botón
elegir el tamaño y el grosor del texto
seleccionar el color del texto y del fondo
configurar los colores del texto y del fondo al pasar el cursor
ajustar el radio de las esquinas.
Tarjeta de fidelidad
Apariencia de la sección
Apariencia de la sección
Personaliza la apariencia de la sección
Puedes:
Añadir una imagen personalizada (320 × 230);
Textos
Textos
Personaliza los textos
Puedes:
definir el título
alinear los textos
elegir el color, el tamaño y el grosor del texto.
Personaliza la descripción
Puedes:
definir el texto de descripción
alinear los textos
elegir el color, el tamaño y el grosor del texto.
¡Felicidades, has configurado tu branding! Esto permitirá a tus usuarios vivir una experiencia única. 🌟
💡 Puedes previsualizar los distintos módulos en formato desktop o mobile haciendo clic en los iconos de arriba a la derecha.