Cómo aplicar tu marca (colores, tipografía y estilo) al widget y la página de fidelización
Cómo aplicar tu marca (colores, tipografía y estilo) al widget y la página de fidelización
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.
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 vive en Marca → pestaña “Kit on-site” dentro de la app: una marca compartida que heredan todas las superficies on-site (el widget, la página de fidelización, los bloques de producto y carrito, y los avisos). Los ajustes por superficie siguen ganando cuando están definidos.
- 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 (bloque “Identidad de marca” del asistente inicial). 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.
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.
Configura los colores
Hay tres roles de color: primario, secundario y acento. Cada uno lleva una casilla “Usar un color personalizado”: si la dejas sin marcar, ese rol queda en automático y hereda los colores extraídos de tu tema. El widget sigue el color primario salvo que se haya fijado uno propio en su editor; el resto de superficies lo heredan igual.
Elige la tipografía por rol
Perkss usa 3 roles de tipografía independientes: Display (titulares y saldos), Cuerpo (texto corrido) y Numérica (contadores e importes — se aplica a saldos y contadores en el widget y los bloques de producto/carrito). Para cada rol eliges una fuente de un set curado de Google Fonts, o dejas “Heredar la fuente del tema” para mantener la tipografía de tu propio tema — nunca se aplica por defecto la fuente de marca de Perkss.
Ajusta forma, densidad y estilo de icono
En el bloque Estilo defines el lenguaje de esquinas, el ritmo de espaciado y el renderizado de iconos de tus superficies on-site: la forma de los elementos (p. ej. redondeada), la densidad del espaciado (p. ej. cómoda) y el estilo de iconos (contorno o relleno), que se aplica a los iconos decorativos de secciones y bloques.
Previsualiza antes de publicar
A la derecha tienes la vista previa: el panel del widget hereda tu kit, con tu logo, textos y botones aplicados. Además, cada editor de superficie muestra su propia vista previa con el kit aplicado.
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?
El Kit de marca marca la pauta general; el editor de la tarjeta wallet puede sobreescribirla si quieres afinar el pase por separado.
¿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