Cómo personalizar el estilo de Klaviyo Customer Hub

Objetivos del artículo

Conoce las opciones de diseño para dar estilo a tu cajón 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, es una práctica recomendada 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 panel deslizable de Klaviyo Customer Hub tiene varias pestañas personalizables:

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

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

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

Personaliza un llamado a la acción 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 panel deslizable de Klaviyo Customer Hub. Este texto no se puede editar.

Sin embargo, para los compradores no autenticados, puedes escribir tu propio encabezado de llamado a la acción para mostrarlo encima del botón "Iniciar sesión" antes de que inicien sesión. Esto puede ser útil para incentivar a los visitantes no autenticados a iniciar sesión e interactuar con la interfaz de Klaviyo Customer Hub.

En el siguiente ejemplo, el llamado a la acción principal dice “Gana recompensas, realiza un seguimiento de los pedidos y guarda tu historial de compras.”

Nota: el indicador de "recompensas disponibles" se muestra automáticamente si tienes alguno de los siguientes:

1. Un cupón estático configurado en Klaviyo Customer Hub, O
2. Si tienes habilitada una integración de lealtad (como Smile).

Para actualizar el llamado a la acción principal de la interfaz de Klaviyo Customer Hub:

1. Abre la pestaña Servicio - Klaviyo Customer Hub en la barra de navegación izquierda de Klaviyo.
2. Haz clic en Configuración.
3. En Mensajes de bienvenida, personaliza un llamado a la acción para que se muestre arriba del botón "iniciar sesión" para compradores no autenticados. Puedes hacer esto para cada pestaña del panel deslizable de Klaviyo Customer Hub:
   • Para ti
   • Pedidos
   • perfil
     

4. Haz clic en Guardar.

Diseña tu Klaviyo Customer Hub

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

1. Ve a Klaviyo Customer Hub en la barra de navegación izquierda 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. De forma opcional, puedes aplicar estilos avanzados con CSS personalizado. Consulta la sección de CSS personalizado a continuación para conocer más detalles.
6. Consulta el artículo Compatibilidad de idioma 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 aplicar los cambios.

Personalizar el widget de Klaviyo Customer Hub

Además de diseñar Klaviyo Customer Hub, también puedes personalizar el widget del hub, que es un elemento pequeño y flotante en tu sitio web en el que los visitantes pueden hacer clic para abrir rápidamente la interfaz de Klaviyo Customer Hub. El widget presenta información oportuna a tu comprador, como mensajes de chat entrantes y comentarios al agregar artículos a su lista de Favoritos. Recomendamos habilitar la IU del widget para impulsar una interacción significativa 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. En el menú General, puedes ajustar qué compradores deben ver el widget y qué vista de Klaviyo Customer Hub debe abrirse cuando se hace clic en el widget.
   • Elige qué compradores deben ver el widget en tu sitio:
     • Todos los compradores (reconocidos, con sesión iniciada y con sesión cerrada) – El widget aparece para todos.
     • Compradores reconocidos o con sesión iniciada – El widget solo aparece si Klaviyo reconoce a la persona (Identified) o si tiene la sesión iniciada (Authenticated). Esto es ideal para reducir el desorden para los visitantes totalmente nuevos, a la vez que se mantiene una experiencia personalizada para quienes regresan.
     • Solo compradores con sesión iniciada – El widget solo aparece para quienes tienen una sesión con actividad de Shopify.
5. Desde el menú Estilo, puedes ajustar la configuración de color y estilo y ver una vista previa de cómo se verán estos ajustes en el lienzo de la interfaz del widget de Klaviyo Customer Hub
6. Desde el menú Diseño puedes ajustar cómo se posiciona el widget en tu sitio web.
7. Haz clic en Guardar para aplicar los cambios.

Personaliza estados adicionales del widget

Puedes personalizar estados adicionales del widget si seleccionas el signo de intercalación junto a Icono y navegas a otro estado del widget.

• El estado Add to Cart es visible en las páginas de detalles del producto. El widget personalizable anima a los compradores a hacer una compra o a 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 y el botón tradicional de Add to Cart ya no sea visible. Obtén más información sobre Cómo configurar el widget de Add to Cart en Klaviyo Customer Hub.

CSS personalizado para Klaviyo Customer Hub

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

Aunque Klaviyo Customer Hub usa restablecimientos de CSS para evitar conflictos con el CSS de tu sitio, es posible que debas agregar CSS personalizado para abordar casos extremos o aplicar un estilo único, como valores de panel flotante o de radio de borde personalizados.

Aplicar CSS personalizado

Agrega cualquier CSS personalizado directamente a la sección CSS personalizado de la configuración 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 y también incluyen sus variantes (por ejemplo, kl-hub-button-primary, kl-hub-button-secondary, etc.).
• El panel desplegable 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 del bloque (por ejemplo, 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 al inspeccionar Klaviyo Customer Hub con el depurador del navegador. Si un elemento tiene una clase que comienza con 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