Cómo mostrar botones de favoritos en tu sitio y en Klaviyo Customer Hub

Qué aprenderás

Descubre cómo ofrecer a los compradores la opción de guardar sus artículos favoritos en el sitio web. Al añadir botones de favoritos a los productos, puedes mostrar los artículos guardados de los compradores en el cajón de Customer Hub y enviar flujos de seguimiento para impulsar las conversiones.

Antes de empezar

Esta guía explica cómo habilitar el ajuste Favoritos desde los ajustes de Klaviyo Customer Hub en Klaviyo y añadir botones de favoritos en distintas páginas de tu sitio web. Antes de continuar, asegúrate de que la función Klaviyo Customer Hub está habilitada en Klaviyo.

Más información sobre Klaviyo Customer Hub.

Acerca de favoritos

Los botones de favoritos permiten a los compradores guardar los productos que les interesan. Los artículos marcados como favoritos por un comprador se muestran en el panel desplegable de Klaviyo Customer Hub, y se pueden usar en flujos para impulsar más conversión.

Cuando activas la función Favoritos en la 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 hace clic en 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 de 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 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 inician sesión, cualquier favorito que hayan guardado se sincronizará con su perfil de Klaviyo.

Habilita los favoritos para que se muestren en Klaviyo Customer Hub

Para mostrar favoritos en el panel de Klaviyo Customer Hub, primero debes habilitar el ajuste Favoritos en Klaviyo.

1. En la navegación principal de Klaviyo, a la izquierda, 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 Elegir icono, selecciona qué tipo de icono de favoritos quieres mostrar debajo de tus productos (es decir, 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 icono. Haz clic en el icono en la vista previa para verlo cambiar al estado de favorito.
5. Pulsa Guardar.

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

Continúa en la siguiente sección para ver instrucciones sobre cómo añadir botones de favoritos a las páginas de detalles de producto.

Importar 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 razonablemente baja. Klaviyo ofrece un flujo de trabajo estándar para importar datos históricos de favoritos y lista de deseos, para que tus compradores no pierdan sus productos guardados.

Importaciones de la aplicación nativa

Klaviyo ofrece compatibilidad nativa, lista para usar, para importar datos directamente desde aplicaciones populares de lista de deseos, incluidas las siguientes:

• Swym
• Wishlist King

Importación mediante CSV

Si vas a migrar desde otro proveedor de lista de deseos, puedes importar tus datos directamente en Klaviyo. Ve a la configuración de favoritos de Klaviyo Customer Hub y suelta tu archivo CSV en el área de carga (no hace falta plantilla). El importador reconocerá automáticamente el formato de tu archivo y asignará los datos en consecuencia para rellenar los perfiles de Klaviyo Customer Hub de tus compradores.

Añadir botones de favoritos a las páginas de detalles del producto

Aumenta significativamente el compromiso al añadir botones de «añadir a favoritos» a tus páginas de detalles del producto.

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

3. Haz clic y arrastra la aplicación para ajustar su posición en la página de detalles del producto según sea necesario.
4. Cuando esté todo 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 tus páginas de producto.
5. Opcional: para añadir más estilo, vuelve a Klaviyo. Con el menú desplegable Estilo de bloque de aplicación, 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 (predeterminado).
   • Personalizado para seleccionar una fuente y un color de texto determinados para el botón.
     

6. Guarda los cambios.

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

A continuación, pasa a la sección Añadir botones de favoritos a las páginas de tus colecciones.

Instalar 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, puede que tengas que instalar manualmente la aplicación Klaviyo Wishlist en las páginas en las que quieras acciones de favoritos (p. ej., páginas de producto).

Para ello, sigue estos pasos:

1. Abre el administrador de tu tienda de Shopify.
2. En Canales de ventas, selecciona Tienda online.
3. Haz clic en el menú de los tres puntos de tu tema actual y, a continuación, selecciona Editar código. Si prefieres probarlo en un tema en borrador, primero duplica tu tema actual y luego edita el código del tema duplicado.
   

4. Busca el archivo de la página de detalles del producto. Esto varía según el tema, pero normalmente 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. Pulsa 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 añadido 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 añadir botones de favoritos a las páginas de tus colecciones y que los compradores puedan guardar artículos rápidamente mientras navegan por tus productos. Esto es especialmente útil para los compradores que usan dispositivos móviles.

Para ello, sigue estos pasos:

1. Abre el administrador de tu tienda de Shopify.
2. En Canales de ventas, selecciona Tienda online.
3. Junto a tu tema actual, haz clic en el menú de tres puntos y luego selecciona Editar código.
   • Si quieres probar en un tema en borrador, primero duplica tu tema actual y luego edita el código en el tema duplicado.
4. En la barra lateral izquierda, busca y abre tu archivo de colecciones. Usaremos el archivo featured-collections.liquid para este ejemplo; sin embargo, es posible que tu tema use un archivo diferente.
   

5. En el archivo de colecciones, usa el acceso directo 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 tu cuadrícula de productos.
   • Es probable que el fragmento aparezca en un formato similar a: {% render 'snippet-name'%}, donde 'snippet-name' es el nombre del archivo de fragmento correspondiente (p. ej., card-product).
     

6. En la barra lateral izquierda, busca y abre el archivo de fragmento identificado en el paso anterior (por ejemplo, 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. En el código que pegaste, sustituye OBJECT por el valor del objeto que anotaste anteriormente.
   • Por ejemplo, si el valor del objeto de tu archivo es "card_product", el código tendrá este aspecto cuando se pegue en el archivo, encima del precio.
     

10. Haz clic en Guardar en Shopify.
11. Ve a la página de colecciones de tu sitio y actualízala.

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

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

• Confirma que has reemplazado OBJECT en el fragmento de código por el valor del objeto de tu archivo.
• Prueba a pegar el código en otro lugar del archivo.
• Verifica que has pegado el código en el archivo de fragmento correcto.

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

Próximos pasos

Ahora que has añadido botones de favoritos a tu sitio, configura un flujo de recordatorio de favoritos para impulsar la conversión recordando a los compradores los artículos guardados recientemente.

Recursos adicionales