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.
Recomendado: añada el icono de Lista de deseos desde el editor de temas (sin código)
Los nuevos temas de Shopify le permiten añadir el corazón de la lista de deseos a las tarjetas de producto con el bloque de aplicación Add to Wishlist Card, sin necesidad de código:
Vaya al panel de administración de Shopify → Tienda en línea → Temas → haga clic en Personalizar.
Abra una plantilla que muestre tarjetas de producto (por ejemplo, su Página de inicio o una plantilla de Colección).
En el panel de la izquierda, expanda Lista de productos → Tarjeta de producto.
Haga clic en Añadir bloque → Apps → Add to Wishlist Card.
Haga clic en Guardar.
El icono de corazón aparecerá entonces en cada tarjeta de producto de esa sección. Usted puede configurar la posición, el contador y los márgenes (offsets) del icono directamente en el bloque. Consulte Add to Wishlist Card para conocer todos los ajustes.
Si su tema no admite añadir bloques a la tarjeta de producto, utilice en su lugar el método de fragmento de código que se detalla a continuación.
Alternativa: añada el icono con un fragmento de código
Siga estos pasos para integrar el icono "Agregar a la lista de deseos" de forma manual:
Ve a panel de administración de Shopify → Tienda en línea → Temas → haga clic en el botón de los Tres puntos antes de Personalizar → seleccione Editar código.
Busque y abra un archivo de tarjeta de producto (o elemento de cuadrícula de producto) (varía según el tema de la tienda y/o el creador de páginas utilizado).
Agregue el siguiente código donde desee que aparezca el icono de "Agregar a la lista de deseos":
<div
class="gw-add-to-wishlist-product-card-placeholder"
data-gw-product-id="{{ product.id }}"
data-gw-variant-id="{{ product.variants.first.id }}"
data-gw-wishlist-counter-position="left-top"
style="display: block"
></div>
Descripción de los atributos
Atributo | Descripción |
class | Obligatorio. Identifica el marcador de posición como un widget de lista de deseos de Growave. |
data-gw-product-id | Obligatorio. Usa |
data-gw-variant-id | Obligatorio. Usa |
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. |
style="display: block" | Asegura la visibilidad cuando se agrega de forma dinámica. |
Notas específicas del tema
Dependiendo de su tema de Shopify, las expresiones Liquid exactas para los ID de producto y variante pueden diferir ligeramente. Las más comunes son:
{{ product.id }}{{ product.variants.first.id }}
Si esas no funcionan en su caso, puede localizar las expresiones correctas en su tema:
Ve a su panel de administración de Shopify → Tienda en línea → Temas.
Haga clic en el botón de los Tres puntos antes de Personalizar → selecciona Editar código.
Abre el archivo que renderiza tus tarjetas de productos, que generalmente se encuentra en:
snippets/product-card.liquidsnippets/product-grid-item.liquid
Busque líneas que hagan referencia a
product,variantu objetos relacionados para encontrar las expresiones Liquid correctas.
Si tiene algún problema con la integración, no dude en contactarnos en [email protected] o a través del icono de chat en la esquina inferior derecha de su panel de administración de Growave. ¡Estamos aquí para ayudarle! 🤗