Cómo mostrar botones favoritos en tu sitio y en Klaviyo Customer Hub
Objetivos de aprendizaje
Aprende a permitir que los compradores guarden sus artículos favoritos en tu sitio web. Al añadir botones de favoritos junto a tus productos, puedes 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.
El Klaviyo Customer Hub para Shopify es compatible actualmente con las tiendas estándar y con Shopify Headless. Para WooCommerce, ve a https://help.klaviyo.com/hc/en-us/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 activar la configuración de Favoritos desde los ajustes 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/características de Klaviyo Customer Hub están activadas 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/características 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 lista 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 activar 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 Activar 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.
- Haz clic en 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 Klaviyo Customer Hub
Si estás pasando del Klaviyo Customer Hub de Klaviyo a otra aplicación de listas de deseos, puedes migrar sin problemas los artículos guardados de tus clientes con una migración de datos prácticamente sin pérdidas. Klaviyo ofrece un flujo de trabajo estándar para importar los datos históricos de los favoritos y la lista de deseos, para que tus clientes no pierdan los productos que han guardado.
Importaciones de aplicaciones nativas
Klaviyo ofrece compatibilidad nativa y lista para usar para importar datos directamente desde las aplicaciones de listas de deseos más populares, entre las que se incluyen:
- Swym
- El rey de la lista de deseos
Importar mediante CSV
Si estás migrando desde otro proveedor de listas de deseos, puedes importar tus datos directamente en Klaviyo. Ve a la configuración de favoritos del Customer Hub y suelta tu archivo CSV en el área de carga; no necesitas ninguna plantilla. El importador reconocerá automáticamente el formato de tu archivo y asignará los datos en consecuencia para rellenar los perfiles del 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 agregando "agregar a favoritos" botones a las páginas de detalles de sus productos.
Si utilizas un tema vintage de Shopify, o una configuración personalizada que no tiene equipo de asistencia app bloque, consulta nuestras instrucciones para instalar manualmente el botón de favoritos.
- En la configuración de Favoritos en Klaviyo, seleccione Agregar 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 Almacenar para almacenar 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 tenga equipo de asistencia app bloque, puede que tengas que instalar manualmente la app Klaviyo Wishlist en las páginas en las que quieras acciones de favoritismo (por ejemplo, páginas de productos).
Para ello:
- Abre tu Shopify tienda, comercio admin.
- 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> - Haz clic en Guardar.
- Haz clic en Vista previa tienda, comercio.
- Navega a una página de producto dentro de tu tienda, vista previa de comercio. 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 tu Shopify tienda, comercio admin.
- 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.
Siguientes 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
- Primeros pasos con Klaviyo 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 post-venta equipo de 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 proporcionar oportunidades de venta cruzada para aumentar el valor medio del pedido (AOV).
- 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.