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.

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. 

1. En Klaviyo's principal, la navegación de la izquierda, seleccione Servicio - Klaviyo Customer Hub.
2. Haga clic en la pestaña Extensiones .
3. En Favoritos, marca la casilla Activar favoritos.
   
4. 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.
5. 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. 

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. 

1. En la configuración de Favoritos en Klaviyo, seleccione Agregar 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. 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.
4. 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.
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 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:

1. Abre tu Shopify tienda, comercio admin.
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. 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>
6. Haz clic en Guardar.
7. Haz clic en Vista previa tienda, comercio.
8. 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:

1. Abre tu Shopify tienda, comercio admin.
2. En canal de ventas, selecciona tienda en línea.
3. 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.
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: 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>
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.

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 el Customer Hub
• Cómo habilitar las recomendaciones de productos en Klaviyo Customer Hub
• Cómo dar estilo a tu Customer Hub de Klaviyo