Diseño de Tarjetas Wallet
Personaliza la tarjeta digital que tus clientes guardan en Apple Wallet y Google Wallet.
El Diseño de Tarjetas te permite controlar cómo se ve la tarjeta digital de tu negocio en Apple Wallet (iOS) y Google Wallet (Android). Configuras una sola vez y la misma configuración se usa para ambos sistemas — con previews en vivo de cada uno.
Las tarjetas digitales en Apple Wallet y Google Wallet están incluidas en todos los planes pagados — Wallet, Shared, Branded y Premium.
Acceder al editor
Ve a la sección Diseño de Tarjetas desde la barra lateral del panel web. Verás dos previews lado a lado: la tarjeta como se ve en Apple Wallet y como se ve en Google Wallet.
Colores
Estos colores se aplican a ambos sistemas:
| Campo | Descripción |
|---|---|
| Color de fondo | El color principal de la tarjeta. Por defecto usa el color primario del programa. |
| Color de etiqueta | El color del texto de las etiquetas (ej. "Puntos", "Sellos"). |
| Color de texto | El color del texto principal (ej. saldo, nombre del cliente). |
Estilo de la tarjeta
El estilo define cómo se acomodan el logo, la imagen y los sellos dentro de la tarjeta. Elige uno y los previews se actualizan al instante:
| Estilo | Cómo se ve |
|---|---|
| Cuadrícula | Los sellos en filas, centrados. El clásico. |
| Logo protagonista | Tu logo grande y centrado arriba, con los sellos en una franja abajo. |
| Foto y sellos | Foto de tu negocio arriba, sellos abajo sobre color sólido. |
| Barra de progreso | Una barra que se llena en vez de sellos individuales. |
| Solo imagen | Sin sellos en la tarjeta: tu imagen ocupa todo el espacio. |
Los cuatro primeros estilos dibujan los sellos dentro de la propia tarjeta, así que el cliente ve su avance sin abrir nada. "Solo imagen" es para programas de puntos o para quien prefiere una tarjeta puramente visual.
Fondo detrás de los sellos
Debajo de la cuadrícula puedes poner:
| Opción | Cuándo usarla |
|---|---|
| Imagen | Una foto de tu negocio o producto. Si queda muy clara, Xtarly la oscurece automáticamente para que los sellos se sigan leyendo. |
| Degradado | Dos colores tuyos, de uno a otro. Buena opción si no tienes una foto que funcione en formato tan alargado. |
| Color liso | Un solo color detrás de los sellos. Lo más limpio y el que mejor resiste cualquier pantalla. |
Logo grande dentro de la tarjeta
En los estilos que lo permiten (por ejemplo, Logo protagonista) puedes subir un logo grande que se dibuja centrado dentro del diseño, no solo en la esquina superior. Es la forma de que tu marca se vea en la pantalla de bloqueo del cliente.
Apple no deja mover el logo pequeño de la esquina: es un espacio fijo del sistema. Por eso el logo grande se compone dentro de la imagen de la tarjeta.
Imágenes
| Campo | Aplica a | Descripción |
|---|---|---|
| Logo | Apple + Google | Logo de tu negocio que se muestra en la tarjeta. |
| Strip / Hero | Apple (strip) + Google (hero) | Banner visual; en Apple Wallet aparece como strip horizontal; en Google Wallet como hero superior. |
| Lockscreen icon | Apple solamente | Ícono pequeño que iOS muestra junto al logo en la lista de pases y en las notificaciones. |
| Banner de Google | Google solamente | Imagen ancha de la parte superior en Google Wallet. |
| Logo horizontal | Versión apaisada del logo para el encabezado de Google Wallet. |
Mensaje de proximidad
Apple Wallet permite mostrar un mensaje personalizado cuando el iPhone del cliente entra en proximidad de tu sucursal (vía geolocalización). Configúralo en el campo "Mensaje de proximidad".
Android no permite mensaje custom de proximidad: Google Wallet usa un mensaje fijo del sistema. El campo solo afecta a usuarios de iPhone.
Opciones para programa de Sellos
Si tu programa está configurado como STAMPS, aparecen opciones adicionales para personalizar la representación visual de los sellos en la tarjeta:
| Campo | Descripción |
|---|---|
| Estilo de visualización | Contador (texto: "3 de 10 sellos") o Grid (cuadrícula visual de íconos). |
| Cantidad del grid | Cuántos sellos se requieren (1-21). Por defecto coincide con stampsRequired del programa. |
| Ícono activo | Imagen del sello completado (ej. taza de café llena). |
| Ícono inactivo | Imagen del sello pendiente (ej. taza vacía). |
| Color activo | Color de tinte de los sellos completados. |
| Color inactivo | Color de los sellos pendientes. |
| Color de fondo del sello | Color del contenedor del grid de sellos. |
Preview en vivo
A la derecha del editor verás los dos previews:
- Apple Wallet — simula la tarjeta exactamente como aparece en iPhone.
- Google Wallet — simula la tarjeta como aparece en Android.
Cualquier cambio en colores, imágenes o sellos se refleja al instante en ambos previews.
Guardar y publicar
Toca Guardar cambios al final del editor. Los cambios se aplican de inmediato a:
- Las tarjetas que se generen a partir de ese momento.
- Las tarjetas existentes — Apple Wallet recibe push automático para actualizar el pase, Google Wallet refresca al siguiente abrir.
Si aún no tienes clientes inscritos, prueba el flujo end-to-end abriendo tu Página de Inscripción en tu propio teléfono y agregando la tarjeta.