> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.perkss.io/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.perkss.io/_mcp/server.

# Cómo personalizar la tarjeta wallet de tu tienda física

> Desde Admin > Marca configuras el logo, los colores, el banner y la etiqueta de saldo del pase que tus clientes guardan en Apple Wallet o Google Wallet. Puedes previsualizar el resultado antes de publicarlo.

> **Disponible en:** 🏬 Tienda física

Desde Admin > Marca configuras el logo, los colores, el banner y la etiqueta de saldo del pase que tus clientes guardan en Apple Wallet o Google Wallet. Puedes previsualizar el resultado antes de publicarlo. En cuanto guardas los cambios, el pase de cada cliente que ya tiene la tarjeta añadida se actualiza automáticamente.

**TL;DR** — Sube tu logo y elige colores → configura el banner → previsualiza en Apple/Google Wallet → publica y el pase de tus clientes se actualiza solo.

***

## Antes de empezar

* Necesitas acceso al panel de Admin como propietario o con permisos sobre la sección Marca.
* Ten a mano tu logo en formato **SVG con fondo transparente** — el propio CMS avisa: "El logo debe ser un SVG con fondo transparente para mejor resultado en la wallet".
* El programa de fidelización (cashback o sellos) debe estar ya configurado, porque el tipo de programa determina qué se muestra en el pase (saldo acumulado o cuadrícula de sellos).

<img src="https://files.buildwithfern.com/perkss.docs.buildwithfern.com/af2d00b420833c423ae9fe29e086c556dbe35e22f2c22a3bbb43f2489cfd897a/docs/assets/capturas/cms-personalizar-pase-form.png" alt="formulario de Admin/Marca con campos de logo, color primario/secundario, tema del perfil y banner" />

## Pasos

En Admin > Marca, sube el archivo del logo. El CMS lo usa tanto en el perfil público y el registro como en el pase wallet; recuerda que debe ser SVG con fondo transparente para que se vea bien en la tarjeta. Para Google Wallet, el logo no se sirve como el mismo SVG: se genera y sirve una versión PNG rasterizada aparte, porque Google no renderiza SVG de forma fiable — por eso el resultado final puede variar ligeramente entre Apple y Google aunque solo subas un archivo. \[VERIFICAR: si existen requisitos adicionales de tamaño/resolución para el logo]

En Admin > Marca configuras el color primario y secundario de tu marca, y el tema del perfil (estilo de fondo: sólido con el color primario o secundario, degradado animado, o imagen hero; más el color de acentos). Este tema del perfil aplica al perfil público y al registro. Por separado, el pase wallet tiene su propio ajuste de colores de fondo y texto. \[VERIFICAR: si el color de fondo/texto del pase wallet es el mismo valor que el tema del perfil o un control independiente dentro del editor "Wallet pass"]

El banner (o "strip") es la franja superior del pase. En programas de cashback puedes subir una foto; en programas de sellos, el banner es la cuadrícula de sellos que se genera automáticamente con el progreso de cada cliente, así que no se sube una imagen fija para ese caso. En Google Wallet el equivalente es la imagen hero: en sellos, también muestra la cuadrícula autogenerada.

> \[AVISO] La etiqueta del saldo también es personalizable ("ACUMULADOS" en cashback, "PREMIOS" en sellos), pero se edita como texto, no como parte del banner.

La página de marca del CMS incluye una vista previa del pase, en el editor "Wallet pass". Revísala antes de dar por buenos los cambios — el editor muestra el estado "Publicado" cuando lo guardas.

<img src="https://files.buildwithfern.com/perkss.docs.buildwithfern.com/9d07c1bd477e3ea92b0e323d352c17e075ae5049c8f020f6e7667c370e583495/docs/assets/capturas/pase-wallet-preview.png" alt="previsualización del pase personalizado con logo, colores y banner aplicados" />

| Qué ves                            | Qué significa                                                                 |
| ---------------------------------- | ----------------------------------------------------------------------------- |
| Estado "Publicado" en el editor    | Has guardado la configuración actual del pase en el CMS                       |
| Vista previa en la página de marca | Cómo quedará el pase, a modo de referencia, antes de que el cliente lo reciba |

## Cómo recibe el cliente el pase actualizado

No hace falta avisar a nadie: el pase se actualiza cuando cambia su contenido (saldo, sellos o, en este caso, la personalización de marca) en el móvil de cada cliente que ya tiene la tarjeta añadida. En iPhone, el cambio puede mostrarse además como alerta en la pantalla de bloqueo (si el texto de notificación está configurado); en Android, el aviso queda visible en las notificaciones del pase durante 7 días.

***

## Preguntas frecuentes

El CMS recomienda expresamente SVG con fondo transparente para el mejor resultado en la wallet; no se documenta si otros formatos están soportados. \[VERIFICAR: formatos de logo aceptados además de SVG]

No en sellos: ahí el banner (o la imagen hero en Google) es la cuadrícula de sellos generada automáticamente. En cashback sí puedes subir tu propia foto.

No. El pase ya guardado en su móvil se actualiza solo cuando publicas cambios de personalización.

Sí. Se aplica a los pases ya emitidos cuando estos se actualizan.

El logo, los colores y el banner se aplican en ambos, pero no de forma idéntica: el logo en Google se sirve como una versión PNG rasterizada en lugar del SVG original, así que conviene revisar la previsualización en cada plataforma antes de publicar.

***

**Relacionados:** Tarjeta y wallet - Lo que ve tu cliente en su tarjeta - Formulario de registro y sus campos - Cómo personalizar la marca de tu programa