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
• Carrito (solo visible cuando está habilitado)
• Chat (solo visible cuando el chat web está habilitado)
• Perfil

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 Vista previa para ver los cambios realizados en la interfaz del hub en tu sitio web.

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 Sitio web > Klaviyo Customer Hub en el panel de navegación izquierdo de Klaviyo.
2. Abre Diseño > Edita tu Hub
3. En el cajón de diseño de la derecha, en Diseño fijo, personaliza una llamada a la acción (CTA) para que se muestre dentro del bloque Iniciar sesión. Puedes hacer esto en cada pestaña del cajón 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 la pestaña Sitio web.
2. Selecciona Diseño en la navegación de Klaviyo Customer Hub.
3. En la parte superior de la página Diseño, verás una tarjeta que muestra el estado del Hub. Selecciona el botón Editar tu Hub para acceder al editor de Klaviyo Customer Hub.
   

4. En el editor, selecciona el icono de la paleta en la barra lateral izquierda.
5. 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

6. 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.
7. 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.
8. Haz clic en Publicar para activar 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 de tu sitio web en el que pueden hacer clic los visitantes para abrir rápidamente la interfaz de Klaviyo Customer Hub. El widget muestra información oportuna a los compradores, como mensajes de chat entrantes y comentarios cuando añaden artículos a la lista de Favoritos. Recomendamos habilitar la IU del widget para impulsar un compromiso significativo con los clientes, pero no es necesario para que el Hub esté activo.

Para personalizar el widget del hub:

1. Entra en el editorde Klaviyo Customer Hub.
2. En el panel de control flotante encima del Hub, cambia el estado de Abierto a Cerrado. Esto debería abrir el panel desplegable Editar widget .
3. Desde la sección Configuración del widget, puedes ajustar qué compradores deben ver el widget y qué vista de Klaviyo Customer Hub debería abrirse cuando se haga 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.
4. También puedes configurar la forma, el color, el icono y el diseño de tu widget.

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