Descripción general
Los widgets de la Lista de deseos de Growave permiten a los clientes guardar los productos que les encantan, ver sus favoritos en cualquier momento y regresar rápidamente para comprarlos más tarde.
Puede instalar y gestionar los widgets de la Lista de deseos en el panel de administración de Growave → Onsite widgets → Wishlist. Puede ajustar su diseño en Branding → Wishlist, y cambiar los textos y etiquetas en Branding → Languages → Wishlist.
Botón Agregar a la lista de deseos
El botón Agregar a la lista de deseos aparece en las páginas de productos y permite a los clientes guardar artículos con un solo clic sin salir de la página.
Opciones de ubicación
Cuando se instala desde los Onsite widgets, el botón se añade a la Página de producto predeterminada → Bloque de información del producto en el editor de temas de Shopify.
Para colocarlo manualmente:
Vaya al panel de administración de Shopify → Tienda online → Temas → Editar tema.
Abra la plantilla de la página del producto.
En la sección Template, haga clic en Add section → Apps → Add to Wishlist button.
Save sus cambios.
Vista del cliente
Los clientes verán uno de dos estados:
Estado “Add to Wishlist” (Agregar a la lista de deseos): Muestra el contorno del icono de un corazón. Al hacer clic en el botón, el producto se agrega a la lista de deseos.
Estado “Remove from Wishlist” (Eliminar de la lista de deseos): Muestra el icono de un corazón relleno. Al hacer clic en el botón, el artículo se elimina de la lista de deseos y el botón vuelve a su estado predeterminado.
Contador de la lista de deseos: Muestra cuántas veces se ha añadido el producto a las listas de deseos en toda su tienda.
📘 Nota:
Si el producto tiene múltiples variantes, el botón se actualiza automáticamente cuando el cliente cambia de variante.
Comportamiento
Sincronización en tiempo real: El botón utiliza sincronización en tiempo real con el widget flotante de la Lista de deseos y la página de la Lista de deseos. Los productos de la lista de deseos permanecen en ella incluso después de actualizar la página web.
Guardar en una sola lista: Si un cliente aún no ha creado una lista de deseos, al hacer clic en el botón se crea automáticamente la lista Favorites (Favoritos) y se añade el artículo a ella. Si un cliente ya ha creado una lista de deseos, al hacer clic en el botón se añade el artículo a esta lista.
Guardar en múltiples listas: Si hay dos o más listas creadas, los clientes verán una ventana modal Save to wishlist (Guardar en la lista de deseos) que muestra sus listas existentes. Los clientes deben hacer clic en el icono de la lista de deseos junto al nombre de la lista específica para agregar el producto a ella.
Comportamiento de los usuarios invitados: Si la configuración Require guests to provide email addresses (Requerir que los invitados proporcionen sus direcciones de correo electrónico) está habilitada, se les solicitará que introduzcan su correo electrónico a través de la ventana emergente Save Wishlist popup antes de poder guardar artículos. Si está deshabilitada, los usuarios invitados podrán agregar artículos a su lista de deseos libremente. Sin embargo, para guardar la lista de deseos permanentemente, deberán hacer clic en el enlace Save my wishlist (Guardar mi lista de deseos) ubicado en el widget flotante de la Lista de deseos.
Personalización
Puede personalizar el widget del botón Agregar a la lista de deseos a través de:
Editor de temas de Shopify: Añada CSS personalizado directamente al bloque de la aplicación del botón Agregar a la lista de deseos.
Panel de administración de Growave: Vaya a Branding → Wishlist → General para ajustar el icono de la Lista de deseos y los colores, tamaños del botón, etc.
📖 Obtenga más información sobre la personalización de marca de la Lista de deseos en Growave 2.0
Personalización de texto
Para editar las etiquetas del botón, vaya a Branding → Languages → Wishlist → Add To Wishlist Product Page. Las claves comunes incluyen:
Add to wishlist
Remove from wishlist
Tarjeta de Agregar a la lista de deseos
El widget Tarjeta de Agregar a la lista de deseos (Add to Wishlist Card) coloca un icono de corazón de lista de deseos directamente en las tarjetas de sus productos. Los clientes pueden guardar artículos en su lista de deseos directamente desde el listado, sin abrir la página del producto. Este widget está diseñado para temas de Shopify que admiten la edición de la tarjeta del producto como un bloque.
📘 Nota: Si su tema no admite la adición de bloques a la tarjeta del producto, aún puede añadir el icono de la lista de deseos a las tarjetas de los productos mediante el método de fragmento de código descrito en Cómo integrar el icono "Add to wishlist" en las tarjetas de productos.
Opciones de ubicación
Para añadir el widget desde el editor de temas de Shopify:
Vaya al panel de administración de Shopify → Tienda en línea → Temas → haga clic en Personalizar.
Abra una plantilla que muestre tarjetas de productos (por ejemplo, su Página de inicio o una plantilla de Colección).
En el panel izquierdo, expanda la Lista de productos → Tarjeta de producto.
Haga clic en Añadir bloque → Aplicaciones → Add to Wishlist Card.
Haga clic en Guardar.
Una vez añadido, el icono del corazón aparecerá en cada tarjeta de producto mostrada por esa sección.
Vista del cliente
En cada tarjeta de producto, los clientes verán un icono de corazón superpuesto en la imagen del producto:
Corazón con contorno: El producto aún no está guardado.
Corazón relleno: El producto ya está en la lista de deseos del cliente.
Puede aparecer una insignia de contador junto al corazón, que muestra cuántas veces se ha añadido el producto a las listas de deseos en toda su tienda.
Puede activar o desactivar el contador desde Branding → Wishlist → General → Add to Wishlist button → casilla de verificación Show wishlist counter.
Comportamiento
Al hacer clic en el corazón se añade o elimina el producto de la lista de deseos. Si existen varias listas de deseos, el producto se añade a la lista de deseos creada más recientemente.
Todos los artículos guardados se sincronizan en tiempo real en el botón Agregar a la lista de deseos, el widget flotante de la Lista de deseos y la página de la Lista de deseos.
Personalización
Todos los ajustes están disponibles directamente en el bloque del editor de temas:
Ajuste | Qué hace |
Product | Determina a qué producto está vinculado el icono. Déjelo como Closest Product (Producto más cercano) para que el bloque detecte automáticamente el producto de la tarjeta en la que se encuentra. |
Position | Coloca el icono del corazón en la esquina Superior izquierda o Superior derecha de la imagen del producto. |
Counter position | Establece dónde se sitúa la insignia del contador en relación con el corazón: Izquierda del icono, Derecha del icono, Auto. |
Offset from top | Ajusta con precisión el espaciado vertical del icono (en px). |
Offset from side | Ajusta con precisión el espaciado horizontal del icono (en px). |
Custom CSS | Añada su propio CSS para dar más estilo al icono y al contador. |
ShadowRoot options | Controla el ámbito de renderizado del widget. Mantenga el valor predeterminado (Global) a menos que el equipo de soporte de Growave le indique lo contrario. |
El estilo global (colores y forma del icono) se controla desde Branding → Wishlist.
Widget flotante de la Lista de deseos
El widget flotante de la Lista de deseos es un panel lateral que los clientes pueden abrir desde cualquier lugar de su tienda (excepto la página dedicada de la Lista de deseos). Muestra todos los productos guardados, admite acciones rápidas y ayuda a los compradores a regresar a sus favoritos sin tener que salir de la página.
Opciones de ubicación
Habilite el widget en Growave admin panel → Onsite widgets → Wishlist floating widget.
Cuando está habilitado, el widget se añade automáticamente a todas las páginas excepto la página dedicada de la Lista de deseos. El botón flotante de inicio (Launcher) se puede mover al lado izquierdo o derecho de la pantalla y se le puede dar estilo en Branding → Wishlist → Widget & Launcher.
Vista del cliente
El widget proporciona un resumen rápido y conveniente de todos los artículos agregados a la lista de deseos. Los clientes verán:
Encabezado: El título de la Lista de deseos y un enlace que conduce directamente a la página de la Lista de deseos.
Save my wishlist (Guardar mi lista de deseos): Un enlace para usuarios invitados (si se permite guardar sin proporcionar correos electrónicos por adelantado).
Añadir una nueva lista: Un enlace para crear listas de deseos adicionales.
Área de visualización de la lista:
Si no se ha creado ninguna lista: Muestra un estado vacío sugiriendo a los clientes que creen su primera lista.
Si solo se ha creado una lista: Muestra una sección con el título de la lista y un icono de Lápiz (editar) sin miniatura.
Si existen múltiples listas: Muestra las listas de deseos y los registros de regalos como miniaturas en las que se puede hacer clic con títulos. El título de la lista seleccionada actualmente y el icono de Lápiz (editar) se muestran debajo de las miniaturas.
Lógica de miniaturas: Las listas vacías utilizan imágenes de miniatura de marcadores de posición. Las listas con artículos agregados utilizan la imagen del último producto agregado como miniatura.
Bloque para compartir: Contiene opciones para compartir la lista de deseos a través de un enlace, correo electrónico y redes sociales.
Icono de ordenación: Se utiliza para organizar la vista de la lista.
Tarjetas de productos: Muestra la imagen del producto, el título, la calificación promedio con el recuento de reseñas (si la aplicación de Reseñas está habilitada), el precio del producto, la variante seleccionada (si la hay) y un menú de tres puntos.
Botón Agregar al carrito: Se convierte en Mostrar en el carrito para los artículos que ya se han añadido al carrito.
Comportamiento
Comportamiento del lanzador: El botón de inicio aparece en todo el sitio, excepto en la página de la Lista de deseos (a menos que se oculte por completo a través de la configuración de Branding). Al hacer clic en él, se abre el widget flotante de la Lista de deseos (también conocido como panel lateral de la Lista de deseos).
Save my wishlist (Guardar mi lista de deseos): Aparece para los usuarios que no han iniciado sesión si la configuración Require guests to provide email addresses (Requerir que los invitados proporcionen sus direcciones de correo electrónico) está deshabilitada. Al hacer clic en este enlace, se abre la ventana emergente para guardar la lista de deseos donde los clientes invitados pueden introducir su correo electrónico y suscribirse a actualizaciones para asegurar su lista.
Añadir una nueva lista: Al hacer clic en este enlace se abre una ventana modal donde los clientes pueden introducir un nombre para la lista de deseos y agregar productos vistos recientemente (se muestran hasta 6 productos o variantes de productos). Si la función de Registro de regalos está habilitada, los clientes también pueden elegir entre crear una lista de deseos clásica o un Registro de regalos.
Icono de lápiz: Al hacer clic en él se abre la ventana modal de edición para la lista de deseos seleccionada, que ofrece opciones para:
Cambiar el nombre de la lista de deseos y Guardar cambios
Eliminar la lista
Duplicar la lista
Opciones para compartir: Al hacer clic en el botón Enlace se copia la URL de la lista seleccionada. Al hacer clic en los botones de redes sociales, se copia el enlace y se abre la plataforma correspondiente en una ventana del navegador independiente.
Icono de ordenación: Al hacer clic en él se abre un menú desplegable para organizar los artículos por: Añadido recientemente, Nombre A-Z, Nombre Z-A, Precio de mayor a menor, o Precio de menor a mayor.
Menú de tres puntos (acciones del producto): Al hacer clic en él en la esquina superior derecha de la imagen del producto, se ofrecen opciones según el producto:
Eliminar: Disponible para todos los productos. Elimina el artículo de la lista actual.
Mover a: Transfiere el artículo a otra lista de deseos existente. Aparece solo si el usuario tiene múltiples listas que aún no contienen este producto. No se admite mover artículos de la Lista de deseos al Registro de regalos.
Options: Permite al cliente cambiar la variante del producto directamente dentro de la lista de deseos. Aparece solo si el producto tiene variantes (por ejemplo, color, tamaño). Al hacer clic en él, se abre la ventana modal de Cambiar opciones del producto.
📘 Nota
Todos los artículos guardados se sincronizan en tiempo real en el botón Agregar a la lista de deseos, el widget flotante de la Lista de deseos y la página de la Lista de deseos. La eliminación de un artículo actualiza instantáneamente todos los demás widgets de la lista de deseos.
Personalización
Configure la apariencia del widget y el comportamiento del lanzador navegando a Branding → Wishlist → Widget & Launcher. Aquí puede ajustar:
Estilo del icono del lanzador
Posición (izquierda o derecha)
Estilo, color y tamaño
Configuración de visibilidad
📖 Learn more about Wishlist branding in Growave 2.0
Personalización de texto
Para editar el texto del widget flotante, navegue a Branding → Languages → Wishlist. Las claves comunes incluyen:
Panel lateral de la Lista de deseos (Wishlist Drawer):
Wishlist
Add a new list
Add to cart
List is empty
You can add items to wish list by clicking
Save my wishlist
Favorites
Delete
Options
Move to
Ventana emergente para guardar la lista de deseos (Save Wishlist popup):
Enter your email address to save your wishlist
Receive price drop and restock updates
Si tiene alguna pregunta o necesita ayuda, no dude en ponerse en contacto con nuestro equipo de soporte en [email protected] o utilice el icono de chat en la esquina inferior derecha de su panel de administración de Growave. ¡Estamos aquí para ayudarle! 🤗