> 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 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. Puedes partir de un preset ya definido o ajustar cada elemento a mano, y prev > **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 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 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 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) 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 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 \[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]. Sí. Cada color es opcional: si no lo defines, se hereda el color detectado de tu tema o el fallback neutro por defecto. 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. 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. 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