Cómo mostrar botones favoritos en tu sitio y en Klaviyo Customer Hub
Qué aprenderás
Aprende a permitir que los compradores guarden sus artículos favoritos en tu sitio web. Si añades botones de favoritos junto a tus productos, podrás mostrar los artículos guardados de los compradores en el cajón de Klaviyo Customer Hub y enviar un flujo de seguimiento para impulsar la conversión.
Actualmente, el Customer Hub para Shopify admite escaparates estándares y Shopify Headless. Para obtener el WooCommerce, ve a https://help.klaviyo.com/hc/es-es/articles/47792369863451
Para comentarios sobre la funcionalidad de Klaviyo Customer Hub, correo electrónico customerhub@klaviyo.com.
Antes de empezar
Esta guía explica cómo habilitar la configuración de Favoritos desde la configuración de Klaviyo Customer Hub en Klaviyo, y añadir botones de favoritos en diferentes páginas de tu sitio web. Antes de continuar, asegúrate de que las funciones de Klaviyo Customer Hub están habilitadas en Klaviyo.
Más información sobre Klaviyo Customer Hub.
Acerca de los favoritos
Los botones de favoritos permiten a los compradores guardar los productos que les interesan. Los artículos favoritos de un comprador se muestran en el cajón de Klaviyo Customer Hub, y pueden utilizarse en flujo para impulsar una conversión adicional.
Cuando activas las funciones de Favoritos en tu configuración de Klaviyo Customer Hub, aparece un botón de favoritos con todos los productos que se muestran en la interfaz de Klaviyo Customer Hub. Cuando un comprador pulsa este botón, el artículo se añade a su sección Favoritos y se guarda en su perfil de Klaviyo.
Para aumentar su visibilidad y fomentar su uso, también puedes añadir botones de favoritos a:
- Páginas de detalles del producto
- Páginas de colecciones (también llamadas "páginas de listas de productos")
Los artículos favoritos de cualquiera de estas páginas también se guardan en la sección Favoritos de los compradores en el cajón de Klaviyo Customer Hub. Ten en cuenta que cualquier visitante puede añadir productos a su lista de favoritos, independientemente de si ha iniciado sesión en una cuenta de cliente. Cuando inicien sesión, los favoritos que hayan guardado se sincronizarán con su perfil de Klaviyo.
Habilitar favoritos para mostrar en Klaviyo Customer Hub
Para mostrar los favoritos en el cajón de Klaviyo Customer Hub, primero debes habilitar el ajuste Favoritos en Klaviyo.
Ten en cuenta que si tu Customer Hub de Klaviyo está activo, al guardar este cambio se publicará en tu sitio. Si no es así, tendrás que configurar tu Customer Hub de Klaviyo en vivo en el menú de ajustes generales para ver este cambio.
- En Klaviyo's principal, la navegación de la izquierda, seleccione Servicio - Klaviyo Customer Hub.
- Haga clic en la pestaña Extensiones .
- En Favoritos, marca la casilla para habilitar favoritos.
- En el menú desplegable Elegir icono, seleccione qué tipo de icono favorito desea mostrar bajo sus productos (por ejemplo, un corazón o un signo más).
- Por defecto, la vista previa muestra la versión no seleccionada (es decir, no favorita) del icono. Pulsa sobre el icono en la vista previa para ver cómo cambia al estado favorito.
- Pulsa Save (Guardar).
Ahora aparecerá un botón de favorito debajo de cualquier producto mostrado en la interfaz de Klaviyo Customer Hub. Hacer clic en él añade el elemento a la sección Favoritos.
Continúa en la siguiente sección para obtener orientación sobre cómo añadir botones de favoritos a las páginas de detalles del producto.
Importa las listas de deseos existentes a Customer Hub
Si estás haciendo la transición al Customer Hub de Klaviyo desde otra aplicación de lista de deseos, puedes migrar sin problemas los artículos guardados de tus clientes con una migración de datos razonablemente sin pérdidas. Klaviyo ofrece un flujo de trabajo estándar para importar el historial de datos favoritos y de listas de deseos para que tus compradores no pierdan sus productos guardados.
Importaciones de aplicaciones nativas
Klaviyo ofrece asistencia nativa y lista para usar para importar datos directamente desde aplicaciones populares de listas de deseos, incluidas las siguientes:
- Swym
- Lista de deseos King
Importación mediante CSV
Si vas a realizar la migración desde otro proveedor de listas de deseos, puedes importar tus datos directamente en Klaviyo. Dirígete a la configuración de favoritos de Customer Hub y suelta el archivo CSV en el área de carga, sin necesidad de usar ninguna plantilla. El importador reconocerá automáticamente el formato de tu archivo y asignará los datos en consecuencia para rellenar los perfiles de Customer Hub de tus compradores.
Añadir botones de favoritos a las páginas de detalles de los productos
Consiga una interacción significativamente mayor añadiendo "añadir a favoritos" botones a las páginas de detalles de sus productos.
Si utilizas un tema antiguo de Shopify, o una configuración personalizada que no incluya la app bloque de asistencia, consulta nuestras instrucciones para instalar manualmente el botón de favoritos.
- En la configuración de Favoritos en Klaviyo, seleccione Añadir bloque de aplicaciones.
- Al hacerlo, se abre el editor de temas de Shopify en una nueva ventana, mostrando un modal que indica que el bloque de la aplicación Favoritos de Klaviyo se ha añadido a tu plantilla de página de producto predeterminada. Haz clic en Lo tengo.
- Haga clic y arrastre la aplicación para ajustar su posición en la página de detalles de su producto según sea necesario.
- Cuando esté listo, haga clic en Guardar para guardar los cambios en Shopify. En este punto, los botones de favoritos aparecerán debajo de los productos en sus páginas de productos.
- Opcional: Para un estilo adicional, navega de nuevo a Klaviyo. Con el desplegable Estilo del bloque App, puedes personalizar el aspecto del botón de favoritos en las páginas de producto. Elige una de las dos opciones:
- Heredar para sincronizar los estilos de los botones de tu sitio (por defecto).
- Personalizado para seleccionar una fuente y un color de texto determinados para los botones.
- Guarda los cambios.
Navega de nuevo a tu sitio web. Deberías ver que los botones de favoritos aparecen debajo de los productos en las páginas de detalles de los productos.
A continuación, pasa a la sección Añadir botones de favoritos a las páginas de tus colecciones.
Instala manualmente los botones favoritos (temas antiguos o personalizados)
Si utilizas un tema antiguo de Shopify, o una configuración personalizada que no incluya la aplicación de asistencia bloque, es posible que tengas que instalar manualmente la aplicación Klaviyo Wishlist en las páginas en las que desees acciones de favoritismo (por ejemplo, páginas de productos).
Para ello:
- Abre el administrador de tu tienda Shopify.
- En canal de ventas, selecciona tienda en línea.
- Haz clic en el menú de tres puntos de tu tema actual y selecciona Editar código. Si prefieres probarlo en un tema borrador, duplica primero tu tema actual y luego edita el código del tema duplicado.
- Busca el archivo de la página de detalles de tu producto. Varía según el tema, pero normalmente lleva la palabra "producto" en el nombre. Por ejemplo, en el tema Amanecer, se llama "main-product.liquid".
- Pegue el siguiente fragmento de código donde quiera que aparezca el botón de favoritos:
<div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}" ></div> - Pulsa Save (Guardar).
- Haz clic en Vista previa de la tienda.
- Navega a una página de producto dentro de la vista previa de tu tienda. El botón de favoritos añadido debe ser visible en el lugar designado.
Añade botones de favoritos a las páginas de tus colecciones
Instala un pequeño fragmento de código en tu sitio Shopify para añadir botones de favoritos a las páginas de tus colecciones, de modo que los compradores puedan guardar artículos rápidamente mientras navegan por tus productos. Esto es especialmente útil para los compradores en dispositivos móviles.
Para ello:
- Abre el administrador de tu tienda Shopify.
- En canal de ventas, selecciona tienda en línea.
- Junto a su tema actual, haga clic en el menú de los tres puntos y seleccione Editar código.
- Si quieres probar en un tema borrador, duplica primero tu tema actual y luego edita el código en el tema duplicado.
- En la barra lateral izquierda, busca y abre tu archivo de colecciones. Utilizaremos el archivo featured-collections.liquid para este ejemplo, aunque tu tema puede utilizar un archivo diferente.
- Dentro del archivo de colecciones, utiliza el método abreviado de búsqueda (Comando+F en Mac o Control+F en Windows) para buscar la palabra "renderizar" dentro del archivo. Esto te ayuda a identificar el nombre del fragmento que contiene tu rejilla de producto.
- El fragmento aparecerá probablemente en un formato similar a: {% render 'snippet-name'%}, donde "nombre-barra" es el nombre del archivo de la barra correspondiente (por ejemplo, tarjeta-producto).
- El fragmento aparecerá probablemente en un formato similar a: {% render 'snippet-name'%}, donde "nombre-barra" es el nombre del archivo de la barra correspondiente (por ejemplo, tarjeta-producto).
- En la barra lateral izquierda, busca y abre el archivo de fragmentos identificado en el paso anterior (por ejemplo, tarjeta-producto.liquid).
- En la parte superior de este archivo, anota el valor del objeto que aparece en "Acepta" (por ejemplo, "tarjeta_producto").
- Copia el código siguiente y pégalo en el archivo de fragmentos:
- Consejo: Busque la primera instancia de la representación del precio en su archivo y pegue el código encima.
<div
class="Klaviyo-favoritos-plp-slot"
datos-producto-id="{{ OBJECT.id }}"
datos-producto-url="{{ OBJECT.url }}"
datos-variante-id="{{OBJECT.selected_or_first_available_variant.id}}"
></div>
- Consejo: Busque la primera instancia de la representación del precio en su archivo y pegue el código encima.
- Dentro del código que has pegado, sustituye
OBJETOpor el valor del objeto que has anotado antes.- Por ejemplo, si el valor del objeto de tu archivo es "tarjeta_producto", el código tendrá este aspecto cuando se pegue en el archivo por encima del precio.
- Por ejemplo, si el valor del objeto de tu archivo es "tarjeta_producto", el código tendrá este aspecto cuando se pegue en el archivo por encima del precio.
- Haz clic en Guardar en Shopify.
- Ve a la página de colecciones de tu sitio y actualiza.
Ahora deberías ver aparecer los botones de favorito en cada producto. Ten en cuenta que pueden tardar unos segundos en cargarse. Por defecto, se sitúan en la esquina superior derecha. Si deseas cambiar el posicionamiento, consulta a tu desarrollador para que te ayude con CSS personalizado.
Si siguen sin aparecer los botones favoritos, prueba estos pasos para solucionar el problema:
- Confirma que has sustituido
OBJECTen el fragmento de código por el valor del objeto de tu archivo. - Intenta pegar el código en otro lugar del archivo.
- Comprueba que has pegado el código en el archivo de fragmentos correcto.
Si siguen sin aparecer, pide ayuda a un programador. Klaviyono puede editar directamente los archivos de tu tema.
Próximos pasos
Ahora que has añadido botones de favoritos a tu sitio web, configura un flujo de recordatorio de favoritos para impulsar la conversión recordando a los compradores sus artículos guardados recientemente.
Recursos adicionales
- Introducción a Customer Hub en Shopify
Conozca Klaviyo Customer Hub, una experiencia personalizada única para los visitantes de la tienda en línea que les guía desde el descubrimiento del producto hasta la compra y poscompra asistencia.
- Cómo mostrar recomendaciones de productos en Klaviyo Customer Hub
Aprende a mostrar recomendaciones de productos personalizadas en el cajón de Klaviyo Customer Hub para adaptar las experiencias de compra a tu cliente e impulsar la conversión. Mostrando productos que atraigan al cliente, puedes mejorar la tasa de conversión y ofrecer oportunidades de venta cruzada para aumentar el valor medio del pedido.
- Cómo dar estilo a tu Customer Hub de Klaviyo
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 del Centro de Atención al Cliente de Klaviyo está arraigada en la experiencia del cliente, es una buena práctica diseñarla para que parezca una extensión de tu sitio web.