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 Favoritos en Klaviyo Customer Hub y añadir botones de favoritos en distintas páginas del sitio web. Antes de empezar, habilita Klaviyo Customer Hub en Klaviyo. Favoritos requiere un plan de pago de Klaviyo Customer Hub o una prueba gratuita activa.

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 habilitas Favoritos en Klaviyo Customer Hub, los compradores que cumplan la configuración de visibilidad pueden usar los botones de favoritos para guardar productos. Los elementos guardados aparecen en la sección Favoritos. Los artículos guardados por los compradores que han iniciado sesión se sincronizan con 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 aparecen en la sección Favoritos del comprador en Klaviyo Customer Hub. Para permitir que los visitantes guarden productos sin iniciar sesión, configura la visibilidad de favoritos en Todos los compradores tanto en la configuración de favoritos del Hub como en la del sitio. Los favoritos de los visitantes que Klaviyo no reconoce se guardan en su navegador y se sincronizan con su perfil de Klaviyo cuando inician sesión o cuando Klaviyo los reconoce, si las experiencias para compradores reconocidos están habilitadas.

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 Sitio web > Klaviyo Customer Hub.
2. Haz clic en Diseño > Edita tu Hub para abrir el editor.
3. Con el Hub configurado en Abierto, selecciona Favoritos en el menú desplegable Página que aparece encima de la vista previa.

4. En la pestaña Contenido, configura Visibilidad para los compradores que deberían ver los favoritos. Selecciona Todos los compradores para permitir que los visitantes guarden productos sin iniciar sesión.
5. En Icon, selecciona un corazón o un signo más para los botones de favoritos en Klaviyo Customer Hub.
   • Usa la vista previa para comprobar el aspecto del icono. Puedes previsualizar los estados seleccionado y no seleccionado en el editor de favoritos del sitio, que se describe a continuación.
6. Haz clic en Publicar.

Los botones de favoritos ahora aparecen en los productos en Klaviyo Customer Hub para los compradores que cumplan la configuración de visibilidad. Al hacer clic en un botón, el artículo se añade a la sección Favoritos.

Para añadir botones fuera de Klaviyo Customer Hub, continúa en Añadir botones favoritos a las páginas de detalles del 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 importar los artículos guardados de los clientes para que puedan seguir gestionando los favoritos en Klaviyo Customer Hub.

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

Después de habilitar los favoritos en Klaviyo Customer Hub, abre la configuración de favoritos de Klaviyo Customer Hub. El archivo debe incluir direcciones de email de los compradores y ID de productos; los ID de variante son opcionales. No necesitas una plantilla de CSV específica, pero debes revisar la asignación de campos antes de importar.

1. En Importar favoritos desde otra aplicación, haz clic en Importar. Si has descartado la tarjeta anteriormente, haz clic en Importar favoritos desde otra aplicación para volver a abrirla.
2. Sube el archivo CSV o arrástralo al área de carga y, luego, haz clic en Siguiente.
3. Revisa las asignaciones de campos sugeridas. Asigna las columnas que contienen direcciones de email de clientes a Email y los ID de producto a ID de producto. Si el archivo incluye ID de variantes, asigna esa columna a ID de variante.
4. Haz clic en Finalizar para enviar la importación.

La pantalla de importación se cierra y muestra una confirmación tras un envío correcto. Si aparece un error, comprueba el archivo y las asignaciones antes de volver a intentarlo.

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

Añade botones de favoritos a las páginas de detalles de producto para que los compradores puedan guardar un artículo mientras lo ven.

1. Vuelve a Diseño en Klaviyo Customer Hub y, a continuación, selecciona la tarjeta Favoritos en Bloques del sitio. Haz clic en Añadir bloque de aplicación para abrir el editor de temas de Shopify.
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és listo, haz clic en Guardar para guardar los cambios en Shopify. El botón aparece en la ubicación que elegiste cuando Klaviyo Customer Hub está activo y los favoritos del sitio están visibles para el comprador.
5. Vuelve al editor de favoritos en el sitio en Klaviyo. En la pestaña Contenido, configura Visibilidad para los compradores que deberían ver los botones en el sitio. Esto no puede ser más amplio que la visibilidad de favoritos del Hub.
6. Opcional: en el editor de favoritos del sitio, selecciona la pestaña Estilo para personalizar el icono, los colores, la fuente, la alineación y el estilo visual del botón.
   • En Fuentes, selecciona Heredar del sitio en Fuente del botón para usar la fuente del sitio, o elige otra fuente. Selecciona Configurar fuente personalizada para introducir un nombre de fuente y el grosor. La fuente personalizada ya debe estar instalada en el sitio.
   • En Colores, ajusta Relleno del botón y Texto del botón. En Apariencia, define Alineación y Estilo visual. Elige Solo icono, Solo texto o Icono y texto.

• En la vista previa, selecciona Página de producto o Lista de colecciones para revisar cada ubicación. El botón comienza sin seleccionar; haz clic en él para ver una vista previa del estado marcado como favorito.

7. Haz clic en Publicar para guardar la visibilidad del sitio y cualquier cambio de estilo en Klaviyo.

Vuelve al sitio web y abre una página de detalles del producto para comprobar que el botón de favoritos aparece en la ubicación que has elegido.

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

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

Si utilizas un tema de Shopify antiguo o una configuración personalizada que no admita bloques de aplicación, añade manualmente el snippet del botón de favoritos a las páginas en las que quieres que los compradores guarden productos (p. ej., páginas de producto).

Antes de editar el tema, activa los favoritos en el Hub y configura la visibilidad de los favoritos en el sitio en la tarjeta Favoritos en Diseño > Bloques del sitio. Klaviyo Customer Hub debe estar activo para que los botones aparezcan en tu tienda.

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.

Antes de añadir el fragmento de código, activa los favoritos en el Hub y configura la visibilidad de los favoritos en el sitio en Diseño > Bloques en el sitio > Favoritos. Klaviyo Customer Hub debe estar activo. La configuración del icono y el color en el sitio también se aplica a los botones de favoritos de la página de colección.

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. Abre la página de colecciones del sitio y actualízala. Si editaste un tema duplicado, abre la vista previa de ese tema y ve a una página de colecciones en su lugar.

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 recordar a los compradores los artículos que han guardado recientemente.

Recursos adicionales