Cómo mostrar botones de Favoritos en el sitio y en Klaviyo Customer Hub

Objetivos del artículo

Descubre cómo permitir que los compradores guarden sus artículos favoritos en tu sitio. Al agregar 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 flujos de seguimiento para impulsar la conversión.

Antes de empezar

En esta guía se explica cómo habilitar la configuración de Favoritos desde la configuración de Klaviyo Customer Hub en Klaviyo y cómo agregar botones de favoritos en distintas páginas de tu sitio web. Antes de continuar, asegúrate de que la función de Klaviyo Customer Hub esté habilitada en Klaviyo.

Más información sobre Klaviyo Customer Hub.

Acerca de favoritos

Los botones de favoritos permiten que los compradores guarden productos que les interesan. Los artículos marcados como favoritos de un comprador se muestran en el panel deslizable de Klaviyo Customer Hub y se pueden usar en flujos para impulsar conversiones adicionales.

Cuando activas la función Favoritos en la configuración de Klaviyo Customer Hub, aparece un botón de favoritos en todos los productos que se muestran en la interfaz de Klaviyo Customer Hub. Cuando un comprador hace clic en este botón, el artículo se agrega a la 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 marcados como favoritos desde cualquiera de estas páginas también se guardan en la sección Favoritos de los compradores en el panel lateral de Klaviyo Customer Hub. Ten en cuenta que cualquier visitante puede agregar productos a su lista de favoritos, independientemente de si inició sesión en una cuenta de cliente. Cuando inicien sesión, los favoritos que hayan guardado se sincronizarán con su perfil de Klaviyo.

Habilita los favoritos para que se muestren en Klaviyo Customer Hub

Para mostrar favoritos en el panel desplegable de Klaviyo Customer Hub, primero debes activar la configuración de Favoritos en Klaviyo.

1. En la navegación principal del lado izquierdo de Klaviyo, selecciona Servicio - Klaviyo Customer Hub.
2. Haz clic en la pestaña Extensiones .
3. En Favoritos, marca la casilla para Habilitar favoritos.
   

4. En el menú desplegable Choose icon, selecciona qué tipo de icono de favorito mostrar debajo de tus productos (p. ej., un corazón o un signo más).
   • De forma predeterminada, la vista previa muestra la versión no seleccionada (es decir, no marcada como favorita) del ícono. Haz clic en el ícono en la vista previa para ver cómo cambia al estado de favoritos.
5. Haz clic en Guardar.

Ahora aparecerá un botón de favoritos debajo de cualquier producto que se muestre en la interfaz de Klaviyo Customer Hub. Al hacer clic, se agrega el artículo a la sección Favoritos.

Continúa con la siguiente sección para obtener orientación sobre cómo agregar botones de favoritos a las páginas de detalles del producto.

Importa listas de deseos existentes a Klaviyo Customer Hub

Si estás haciendo la transición a Klaviyo Customer Hub 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 con una pérdida razonable mínima. Klaviyo ofrece un flujo de trabajo estándar para importar datos históricos de favoritos y listas de deseos para que tus compradores no pierdan sus productos guardados.

Importaciones desde aplicaciones nativas

Klaviyo ofrece compatibilidad nativa, lista para usarse, para importar datos directamente desde apps populares de lista de deseos, incluidas:

• Swym
• Wishlist King

Importar mediante CSV

Si estás migrando desde un proveedor de lista de deseos diferente, puedes importar tus datos directamente en Klaviyo. Ve a la configuración de favoritos de Klaviyo Customer Hub y suelta el archivo CSV en el área de carga; no se requiere plantilla. El importador reconocerá automáticamente el formato del archivo y asignará los datos según corresponda para completar los perfiles de Klaviyo Customer Hub de tus compradores.

Agrega botones de favoritos a las páginas de detalles del producto.

Genera una interacción significativamente mayor al agregar botones de "agregar a favoritos" a las páginas de detalles de tus productos.

1. En la configuración Favoritos en Klaviyo, selecciona Agregar bloque de aplicación.
2. Al hacerlo, se abre el editor de temas de Shopify en una ventana nueva y se muestra un modal que indica que se agregó el bloque de la app Klaviyo Favorites a la plantilla predeterminada de la página de producto. Haz clic en Entendido.
   

3. Haz clic y arrastra la app para ajustar su posición en la página de detalles del producto según sea necesario.
4. Cuando esté listo, haz clic en Guardar para guardar los cambios en Shopify. En este punto, los botones de favoritos se mostrarán debajo de los productos en las páginas de producto.
5. Opcional: Para aplicar estilos adicionales, vuelve a Klaviyo. Con la lista desplegable Estilo de bloque de aplicación, puedes personalizar la apariencia del botón de favoritos en las páginas de producto. Elige una de las siguientes opciones:
   • Heredar para sincronizar los estilos de botones de tu sitio (predeterminado).
   • Personalizado para seleccionar una fuente de botón específica y el color del texto.
     

6. Guarda los cambios.

Regresa a tu sitio web. Deberías ver que se agregan los botones de favoritos debajo de los productos en tus páginas de detalles del producto.

Luego, pasa a la sección Agregar botones de favoritos a las páginas de tus colecciones.

Instala manualmente los botones de favoritos (temas vintage o configuración personalizada)

Si usas un tema vintage de Shopify o una configuración personalizada que no admite bloques de aplicaciones, es posible que debas instalar manualmente la app de Klaviyo Wishlist en las páginas donde quieres acciones de favoritos (p. ej., páginas de productos).

Para hacerlo:

1. Abre el panel de administración de tu tienda de Shopify.
2. En canales de ventas, selecciona Tienda en línea.
3. Haz clic en el menú de tres puntos del tema actual y luego selecciona Editar código. Si prefieres probarlo en un tema de borrador, primero duplica el tema actual y luego edita el código del tema duplicado.
   

4. Busca el archivo de la página de detalles de producto. Esto varía según el tema, pero por lo general incluye la palabra "product" en el nombre. Por ejemplo, en el tema Dawn, se llama "main-product.liquid".
5. Pega el siguiente fragmento de código donde quieras que aparezca el botón de favoritos:
   <div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}"></div>
6. Haz clic en Guardar.
7. Haz clic en Vista previa de la tienda.
8. Ve a una página de producto dentro de la vista previa de tu tienda. El botón de favoritos agregado debería ser visible en la ubicación designada.

Añade botones de favoritos a tus páginas de colecciones

Instala un pequeño fragmento de código en tu sitio de Shopify para agregar botones de favoritos a las páginas de colecciones y que los compradores puedan guardar artículos rápidamente mientras exploran productos. Esto es especialmente útil para compradores en dispositivos móviles.

Para hacerlo:

1. Abre el panel de administración de tu tienda de Shopify.
2. En canales de ventas, selecciona Tienda en línea.
3. Junto al tema actual, haz clic en el menú de tres puntos y luego selecciona Editar código.
   • Si quieres hacer una prueba en un tema borrador, primero duplica el tema actual y luego edita el código en el tema duplicado.
4. En la barra lateral izquierda, busca y abre el archivo de colecciones. Para este ejemplo, usaremos el archivo featured-collections.liquid; sin embargo, el tema puede usar un archivo diferente.
   

5. Dentro del archivo de colecciones, usa el atajo de búsqueda (Command+F en Mac o Control+F en Windows) para buscar la palabra "render" dentro del archivo. Esto te ayuda a identificar el nombre del snippet que contiene la cuadrícula de productos.
   • Es probable que el snippet aparezca en un formato similar a: {% render 'snippet-name'%}, donde 'snippet-name' es el nombre del archivo de snippet correspondiente (p. ej., card-product).
     

6. En la barra lateral izquierda, busca y abre el archivo de snippet identificado en el paso anterior (p. ej., card-product.liquid).
7. En la parte superior de este archivo, fíjate en el valor del objeto que aparece en "Accepts" (p. ej., "card_product").
   

8. Copia el siguiente código y pégalo en el archivo de snippet:
   • Consejo: Busca la primera instancia del renderizado del precio en tu archivo y pega el código encima.
     <div

    class="klaviyo-favorites-plp-slot"

   data-product-id="{{ OBJECT.id }}"

   data-product-url="{{ OBJECT.url }}"

   data-variant-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. Dentro del código que pegaste, reemplaza OBJECT por el valor del objeto que anotaste antes.
   • Por ejemplo, si el valor del objeto del archivo es "card_product", el código se verá así cuando se pegue en el archivo, encima del precio.
     

10. Haz clic en Guardar en Shopify.
11. Ve a la página de colecciones del sitio y actualiza.

Ahora deberías ver que los botones de favoritos aparecen en cada producto. Ten en cuenta que esto puede tardar unos segundos en cargar. De forma predeterminada, estos se colocan en la esquina superior derecha. Si quieres cambiar la posición, consulta a tu desarrollador para obtener ayuda con CSS personalizado.

Si los botones de favoritos todavía no aparecen, prueba estos pasos de solución de problemas:

• Confirma que reemplazaste OBJECT en el fragmento de código con el valor del objeto de tu archivo.
• Intenta pegar el código en otra parte del archivo.
• Verifica que hayas pegado el código en el archivo de snippet correcto.

Si aun así no aparecen, busca ayuda de un desarrollador. El equipo de soporte de Klaviyo no puede editar directamente los archivos del tema.

Siguientes pasos

Ahora que agregaste botones de favoritos al sitio, configura un flujo de recordatorio de favoritos para impulsar la conversión al recordarles a los compradores los artículos que guardaron recientemente.

Recursos adicionales