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.

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 el cajón de Klaviyo Customer Hub

Para mostrar los favoritos en el cajón de Klaviyo Customer Hub, primero debes habilitar el ajuste Favoritos en Klaviyo. 

1. En la navegación principal izquierda de Klaviyo, selecciona Klaviyo Customer Hub.
2. Haz clic en el icono de engranaje de la esquina superior derecha.
   
3. Elige Extensiones.
4. En Favoritos, marca la casilla para habilitar favoritos.
   
5. En el desplegable Elegir icono, selecciona qué tipo de icono favorito quieres mostrar debajo de tus 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.
6. 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. 

Añadir botones de favoritos a las páginas de detalles de los productos

Permite a los compradores marcar como favoritos determinados artículos que están comprobando añadiendo botones de favoritos debajo de los productos en las páginas de detalles de los productos. 

1. En la opción Favoritos de Klaviyo, selecciona Añadir bloque de aplicaciones. 
2. 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.
   
3. Haz clic y arrastra la aplicación para ajustar su posición en la página de detalles de tu producto según sea necesario. 
4. Cuando estés listo, haz clic en Guardar para guardar tus cambios en Shopify. En este punto, los botones de favoritos se mostrarán debajo de los productos en tus páginas de productos. 
5. 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.
     
6. 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:

1. Abre el administrador de tu tienda Shopify.
2. En canal de ventas, selecciona tienda en línea.
3. 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.
   
4. 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".
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 Save (Guardar).
7. Haz clic en Vista previa de la tienda.
8. 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:

1. Abre el administrador de tu tienda Shopify.
2. En canal de ventas, selecciona tienda en línea.
3. Junto a tu tema actual, haz clic en el menú de los tres puntos y selecciona 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.
4. 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.
   
5. 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).
     
6. En la barra lateral izquierda, busca y abre el archivo de fragmentos identificado en el paso anterior (por ejemplo, tarjeta-producto.liquid).
7. En la parte superior de este archivo, anota el valor del objeto que aparece en "Acepta" (por ejemplo, "tarjeta_producto").
   
8. Copia el código siguiente y pégalo en el archivo de fragmentos:
   • Consejo: Busca la primera instancia de la representación del precio en tu archivo y pega 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>
9. Dentro del código que has pegado, sustituye OBJETO por 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.
     
10. Haz clic en Guardar en Shopify.
11. 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 OBJECT en 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

• Primeros pasos con Klaviyo Customer Hub
• Cómo habilitar las recomendaciones de productos en Klaviyo Customer Hub 
• Cómo dar estilo a tu Customer Hub de Klaviyo