🚀 Disponibilidad de la función
Estos widgets de la aplicación de Lista de deseos están disponibles para los usuarios de Growave 2.0 (aquellos que se unieron a nosotros después del 22 de enero de 2024).
Growave ofrece múltiples formas de agregar widgets de lista de deseos a tu tienda de Shopify. Puedes usar la página de Widgets en el sitio en el panel de administración de Growave para colocar widgets automáticamente en las páginas relevantes o agregarlos de forma manual a través del personalizador de temas de Shopify.
Para tener más control sobre la colocación, puedes insertar marcadores de posición de widgets directamente en el código de tu tema. Este enfoque te permite posicionar los widgets exactamente donde los necesitas, incluyendo secciones personalizadas o páginas que no están cubiertas por la configuración predeterminada. Cada widget requiere un nombre de clase específico y puede admitir atributos adicionales para su personalización.
Esta guía proporciona los códigos y atributos de marcador de posición necesarios para cada widget de lista de deseos, lo que te ayudará a integrarlos sin problemas en tu tienda.
Usa un marcador de posición con atributos de datos
Para insertar un widget de lista de deseos, crea un elemento <div> vacío con el nombre de clase correspondiente. Shopify oculta los bloques <div> vacíos en el modo integrado, por lo que debes agregar style="display:block" para asegurar la visibilidad.
Algunos widgets de lista de deseos requieren atributos de datos para funcionar correctamente. Estos atributos transmiten información esencial, como los ID de los productos. Consulta los detalles de cada widget a continuación para conocer los atributos requeridos.
Ejemplo:
<div
class="widget-placeholder-class-name"
style="display:block"
data-gw-attribute1="value1"
data-gw-attribute2="value2"
></div>
Agregar el widget a tu tienda de Shopify
Puedes agregar marcadores de posición a tu tienda de Shopify de dos formas:
Personalizador de temas: Ve a Tienda online → Temas → haz clic en Personalizar, selecciona la página relevante y agrega una sección de Liquid personalizado desde la pestaña Secciones. Inserta el código del marcador de posición en el área de texto.
Editar código: Ve a Tienda online → Temas → ⋮ (menú de tres puntos) → Editar código, selecciona el archivo de plantilla de Liquid correspondiente y agrega el código del marcador de posición directamente en el HTML.
Widget "Agregar a la lista de deseos" en la tarjeta de producto
Este widget permite a los usuarios agregar o eliminar artículos de su lista de deseos directamente desde las tarjetas de productos dentro de los catálogos. También muestra el recuento actual de la lista de deseos, lo que mejora la interacción del usuario con la función de lista de deseos en las tarjetas de productos.
Código:
<div
class="gw-add-to-wishlist-product-card-placeholder"
data-gw-product-id="1234567890"
data-gw-variant-id="1234567890"
data-gw-wishlist-counter-position="left-top"
style="display: block"
></div>
En lugar de los ID de producto y variante exactos, puedes usar las expresiones Liquid {{ product.id }} y {{ product.variants.first.id }} para insertar estos valores de forma dinámica. Estos valores son comunes para la mayoría de los temas de Shopify, pero pueden variar ligeramente. Aprende más aquí.
Atributos:
data-gw-product-id: Especifica el identificador único para el producto utilizado para agregar y eliminar artículos de la lista de deseos.data-gw-variant-id: Especifica el identificador único para la variante del producto utilizado para agregar y eliminar artículos de la lista de deseos.data-gw-wishlist-counter-position: Opcional. Controla la posición de la insignia del contador de la lista de deseos. Valores aceptados: right-top (predeterminado) o left-top.
Widget "Agregar a la lista de deseos" en la página del producto
Este widget permite a los usuarios agregar o eliminar el producto actual y su variante de su lista de deseos en las páginas de productos. Proporciona una forma sencilla para que los clientes gestionen su lista de deseos directamente desde la página del producto.
Código:
<div
class="gw-wl-add-to-wishlist-placeholder"
data-gw-button-class="custom-class-name"
data-gw-product-id="1234567890"
data-gw-variant-id="1234567890"
style="display: block"
></div>
Atributos:
data-gw-button-class: especifica el nombre de clase personalizado para el botón.data-gw-product-id: especifica el identificador único para el producto que se agregará o eliminará de la lista de deseos.data-gw-variant-id: especifica el identificador único para la variante del producto que se agregará o eliminará de la lista de deseos.
Widget del encabezado "Ir a la página de la Lista de deseos"
Este widget proporciona un enlace directo a la página de la lista de deseos (/pages/wishlist), lo que permite a los usuarios acceder a sus artículos guardados con un solo clic. Mejora la comodidad del usuario al ofrecer un acceso rápido a la lista de deseos directamente desde el encabezado.
Código:
<div
class="gw-wl-header-icon-placeholder"
style="display: block"
></div>
Si tienes alguna pregunta o necesitas ayuda, no dudes en contactar a nuestro equipo de soporte en [email protected] o a través del icono de chat en la esquina inferior derecha del panel de administración de Growave. ¡Estamos aquí para ayudarte! 🤗