Cómo dar estilo a tu Klaviyo Customer Hub

Qué aprenderás

Descubre las opciones de diseño para dar estilo al panel de Klaviyo Customer Hub y cómo puedes diseñarlo para que coincida con tu marca. Dado que la interfaz de Klaviyo Customer Hub está integrada en la experiencia del cliente, se recomienda darle estilo para que parezca una extensión de tu sitio web.

Antes de empezar

Esta guía explica cómo personalizar el estilo de la interfaz de Klaviyo Customer Hub. Antes de continuar, asegúrate de que la función Klaviyo Customer Hub está habilitada.

Más información sobre Klaviyo Customer Hub.

Opciones de diseño de Klaviyo Customer Hub

El cajón de Klaviyo Customer Hub tiene varias pestañas personalizables:

• Para ti
• Pedidos
• Perfil
• Chat (solo es visible cuando el chat web está habilitado)
  
  

Tienes varias opciones para personalizar el diseño en cada una de estas pestañas, como editar el texto, los colores, las fuentes y más. Las selecciones de personalización de estilos se aplican en cascada en cada pestaña del cajón de Klaviyo Customer Hub para garantizar una experiencia coherente y alineada con la marca para los visitantes de tu sitio.

Mientras editas la configuración de diseño de tu Klaviyo Customer Hub en Klaviyo, usa el botón Ver en directo para ver los cambios realizados en la interfaz del hub en tu sitio web. Ten en cuenta que, si tu Klaviyo Customer Hub está en directo, los cambios guardados se publican en tu sitio.

Personaliza una llamada a la acción (CTA) principal para cada pestaña

De forma predeterminada, cuando un comprador inicia sesión en su cuenta de cliente, Klaviyo muestra «Welcome, first.name». como encabezado principal en la pestaña Para ti del cajón de Klaviyo Customer Hub. Este texto no se puede editar.

Sin embargo, para los compradores sin autenticar, puedes escribir tu propio encabezado de llamada a la acción (CTA) para que se muestre encima del botón «Iniciar sesión» antes de que inicien sesión. Esto puede ser útil para incentivar a los visitantes sin autenticar a iniciar sesión y a interactuar con tu interfaz de Klaviyo Customer Hub.

En el ejemplo siguiente, la llamada a la acción (CTA) principal dice «Gana recompensas, haz un seguimiento de los pedidos y guarda tu historial de compras».

Nota: el indicador de "rewards available" se muestra automáticamente si tienes alguno de estos elementos:

1. Un cupón estático configurado en Klaviyo Customer Hub O
2. Si tienes habilitadas integraciones de fidelización (como Smile).

Para actualizar la llamada a la acción (CTA) principal de tu interfaz de Klaviyo Customer Hub:

1. Abre la pestaña Service - Klaviyo Customer Hub en la navegación de la izquierda de Klaviyo.
2. Haz clic en Configuración.
3. En Mensajes de bienvenida, personaliza una llamada a la acción (CTA) para que se muestre sobre el botón «iniciar sesión» para los compradores no autenticados. Puedes hacer esto para cada pestaña del panel deslizable de Klaviyo Customer Hub:
   • Para ti
   • Pedidos
   • perfil
     

4. Pulsa Guardar.

Diseña tu Klaviyo Customer Hub

Para ver las opciones de diseño para personalizar la interfaz de Klaviyo Customer Hub:

1. Ve a Klaviyo Customer Hub en el panel de navegación izquierdo de Klaviyo.
2. Selecciona Diseño.
3. Selecciona Hub en la parte superior de la vista previa.
   
   
   

4. Desde el menú Estilo puedes ajustar la configuración de idioma de visualización, fuentes, color y estilo, y previsualizar cómo se verán estos ajustes en el lienzo de la interfaz de Klaviyo Customer Hub
5. Opcionalmente, puedes aplicar un estilo avanzado con CSS personalizado. Consulta la sección de CSS personalizado a continuación para obtener más información.
6. Consulta el artículo Compatibilidad con idiomas y configuración regional en Klaviyo Customer Hub para obtener más información sobre cómo seleccionar otro idioma.
7. Haz clic en Guardar para publicar los cambios.

Personalizar el widget de Klaviyo Customer Hub

Además de diseñar el propio Klaviyo Customer Hub, también puedes personalizar el widget del hub, que es un elemento pequeño y flotante de tu sitio web en el que los visitantes pueden hacer clic para abrir rápidamente la interfaz de Klaviyo Customer Hub. El widget muestra información oportuna al comprador, como mensajes entrantes del chat y comentarios al añadir artículos a su lista de Favoritos. Recomendamos habilitar la IU del widget para fomentar un compromiso significativo con los clientes, especialmente cuando el chat web y Favoritos están habilitados.

Para personalizar el widget del hub:

1. Selecciona Klaviyo Customer Hub en la barra de navegación izquierda de Klaviyo.
2. Selecciona Diseño.
3. Selecciona widget en la parte superior de la vista previa.

4. Desde el menú General puedes ajustar qué compradores deben ver el widget y qué vista de Klaviyo Customer Hub debe abrirse al hacer clic en el widget.
   • Elige qué compradores deben ver el widget en tu sitio:
     • Todos los compradores (reconocidos, con sesión iniciada y sin sesión iniciada) ( el widget aparece para todo el mundo.
     • Compradores reconocidos o con sesión iniciada: El widget solo aparece si Klaviyo reconoce a la persona (Identified) o si ha iniciado sesión (Authenticated). Esto es ideal para reducir el desorden para visitantes totalmente nuevos y, al mismo tiempo, mantener una experiencia de alto contacto para los que regresan.
     • Solo compradores con sesión iniciada () El widget solo aparece para quienes tengan una sesión activa de Shopify.
5. Desde el menú Style puedes ajustar la configuración de color y estilo y previsualizar cómo se verán estos ajustes en el lienzo de la interfaz del widget de Klaviyo Customer Hub
6. Desde el menú Layout, puedes ajustar cómo se posiciona el widget en tu sitio web.
7. Haz clic en Guardar para publicar los cambios.

Personalizar estados adicionales de widgets

Puedes personalizar estados adicionales del widget seleccionando el símbolo de intercalación junto a Icono y navegando a otro estado del widget.

• El estado Añadir al carrito es visible en las páginas de detalles del producto. El widget personalizable anima a los compradores a realizar una compra o guardar un producto para más tarde cuando se hayan desplazado por debajo de la parte superior de la página de detalles del producto, cuando el botón tradicional de Añadir al carrito ya no está visible. Más información sobre cómo configurar el widget Añadir al carrito en Klaviyo Customer Hub.

CSS personalizado para Klaviyo Customer Hub

Si las opciones de diseño de Klaviyo Customer Hub no satisfacen tus necesidades de branding, puedes aplicar estilos avanzados con CSS personalizado.

Aunque Klaviyo Customer Hub usa reinicios de CSS para evitar conflictos con el CSS de tu sitio, puede que tengas que añadir CSS personalizado para abordar casos extremos o aplicar un estilo único, como valores de cajón flotante o un radio de borde personalizado.

Aplicar CSS personalizado

Añade cualquier CSS personalizado directamente en la sección CSS personalizado de los ajustes de diseño de Klaviyo Customer Hub y asegúrate de guardar los cambios.

Todos los elementos básicos dentro de Klaviyo Customer Hub tienen nombres de clase con el prefijo kl-hub-:

• Todos los elementos de texto tienen la clase kl-hub-text, mientras que los encabezados tienen la clase kl-hub-heading
• Los botones tienen la clase kl-hub-button e incluyen también sus variantes (p. ej., kl-hub-button-primary, kl-hub-button-secondary, etc.).
• El cajón de Klaviyo Customer Hub en sí tiene la clase kl-hub-drawer
• Las entradas de texto tienen la clase kl-hub-input
• Todos los bloques de contenido tienen la clase kl-hub-content-block, y también incluyen su Nombre interno de bloque (p. ej., kl-hub-content-block-reward-program para un bloque de contenido llamado "Programa de recompensas")

Esta no es una lista exhaustiva; puedes encontrar más inspeccionando Klaviyo Customer Hub con el depurador del navegador. Si un elemento tiene una clase que empieza por kl-hub-, es seguro usarla para CSS personalizado.

Ejemplo de CSS

Si quisieras poner todos los botones y encabezados de Klaviyo Customer Hub en mayúsculas, podrías escribir el siguiente CSS personalizado:

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}

Recursos adicionales