Cómo aplicar tu marca (colores, tipografía y estilo) al widget y la página de fidelización | Perkss

Disponible en: 🛍️ Shopify

Desde el Kit de marca configuras los colores, la tipografía, la forma y los iconos que se aplican a las superficies de tema de tu programa: el widget flotante, la página de fidelización y los bloques de producto y carrito. Puedes partir de un preset ya definido o ajustar cada elemento a mano, y previsualizar el resultado antes de que lo vea tu cliente.

TL;DR — Abre el Kit de marca → elige un preset o ajusta colores/tipografía/forma a mano → previsualiza → los cambios se aplican al widget, la página de fidelización y los bloques de PDP/carrito.

Antes de empezar

Necesitas acceso al admin de la app Perkss dentro de tu panel de Shopify.
El Kit de marca está en el hub Onsite → tarjeta “Kit de marca”.
El Kit de marca NO cubre el Checkout ni el Centro de cuenta de cliente (Customer Account UI Extensions): esas superficies heredan directamente el branding nativo de Shopify Checkout, sin ajustes de marca adicionales.
Si acabas de instalar la app, el color primario puede venir ya prellenado: Perkss intenta extraer automáticamente el color de tu tema activo durante el onboarding (paso de bienvenida). Si esa detección falla o no encuentra un color claro, se usa un color neutro por defecto — nunca el color de marca de Perkss. En ambos casos, puedes cambiarlo tú manualmente en cualquier momento, tanto en ese paso inicial como después en el Kit de marca.

pantalla del Kit de marca con los selectores de color, tipografía, forma, densidad y estilo de icono visibles

Pasos

Elige un preset como punto de partida (opcional)

Puedes empezar desde uno de los 4 presets disponibles: Minimal (silencioso y espacioso, sin decoración), Editorial (serif + sans, con aire de revista), Boutique (formas redondeadas, iconos rellenos, retail cálido) y Bold (compacto, geométrico, alta energía). Aplicar un preset copia sus valores de tipografía, forma, densidad e iconos a tu configuración — el color y las imágenes que ya tengas puestas no se tocan, porque los presets nunca los modifican.

Situación	Qué hacer
Quieres empezar rápido	Elige un preset y ajusta después lo que quieras
Ya tienes tu propia paleta definida	Salta este paso y configura los elementos a mano abajo
Reaplicas el mismo preset	Sobrescribe siempre los valores actuales, aunque sea el mismo preset de antes

selector de los 4 presets (Minimal, Editorial, Boutique, Bold) dentro del Kit de marca

Configura los colores

Define tu color primario, secundario y de acento. Cada uno puede dejarse vacío para heredar el color detectado de tu tema (ver “Antes de empezar”). Este es el color que se verá en el lanzador del widget, botones y elementos destacados de la página de fidelización.

sección de selectores de color primario, secundario y de acento en el Kit de marca

Elige la tipografía por rol

Perkss usa 3 roles de tipografía independientes: titulares (para las cabeceras del hero), texto corrido (para el cuerpo del contenido) y numérico (para balances y contadores). Puedes seleccionar una fuente de Google Fonts para cada rol desde un listado curado, o dejarlo vacío para heredar la fuente de tu propio tema — nunca se aplica por defecto la fuente de marca de Perkss.

selectores de fuente para los 3 roles (titulares, texto corrido, numérico)

Ajusta forma, densidad y estilo de icono

Elige la forma de los elementos (redondeada, suave o angulosa), la densidad del espaciado (compacta, cómoda o espaciosa) y el estilo de icono (contorno o relleno). También puedes subir una imagen de banner para el panel del widget y una imagen de fondo del panel.

selectores de forma, densidad, estilo de icono y carga de imágenes de banner/fondo

Previsualiza antes de publicar

Antes de guardar, revisa la previsualización del widget con tu marca aplicada para comprobar qué colores, tipografía y forma encajan como esperas.

previsualización del widget mostrando la marca del comerciante aplicada (color, tipografía y forma)

Los cambios del Kit de marca se reflejan en el widget, la página de fidelización y los bloques de producto y carrito. El Checkout y el Centro de cuenta de cliente siguen la marca nativa de Shopify Checkout, no el Kit de marca.

Preguntas frecuentes

¿El Kit de marca también cambia el aspecto del pase wallet?

[VERIFICAR: si el Kit de marca (colores/tipografía) comparte configuración con el editor de diseño de tarjeta wallet o si son dos configuraciones independientes].

¿Puedo dejar los colores en blanco?

Sí. Cada color es opcional: si no lo defines, se hereda el color detectado de tu tema o el fallback neutro por defecto.

¿Si aplico un preset pierdo mis colores o imágenes ya subidas?

No. Los presets solo tocan tipografía, forma, densidad e iconos — el color y la imaginera son siempre tuyos y no se sobrescriben al aplicar un preset.

¿Por qué no veo opciones de marca en el Checkout?

Porque el Checkout y el Centro de cuenta de cliente son extensiones nativas de Shopify y heredan directamente el branding de tu Shopify Checkout — no dependen del Kit de marca.

¿Puedo usar cualquier fuente que quiera?

Puedes elegir entre un set curado de Google Fonts por cada rol (titulares, texto corrido, numérico), o dejarlo vacío para heredar la fuente de tu tema.

Relacionados: Integración con el tema (widget) - Tarjeta y wallet - Página de fidelización y account hub