Antes de continuar: esta guía asume que ya conoces el web component Wishlist Power. Si no lo has usado aún, te recomiendo comenzar con el artículo sobre el Wishlist Button Web Component para Shopify. En el tema Prestige puedes colocar fácilmente un ícono de corazón sobre la imagen del producto en la página de producto aprovechando el componente ooo-wl-wishlist-button. A continuación explico paso a paso cómo hacerlo editando el código del tema.
Paso 1 Abrir snippets/product-gallery.liquid Desde el administrador de Shopify ir a Online Store Themes Edit code. En el editor de código abre el archivo snippets/product-gallery.liquid.
Paso 2 Insertar el botón de lista de deseos Dentro del archivo, localiza el contenedor que tiene la clase product-gallery__image-list. Justo antes de ese div pega el componente de wishlist. En vez de mostrar aquí etiquetas HTML, busca la posición superior derecha de la imagen y añade el componente ooo-wl-wishlist-button con los atributos necesarios para identificar el producto, por ejemplo product id y handle. A continuación añade un botón interno que renderice el icono heart desde tu snippet de iconos. Añade también estilos CSS dentro del mismo snippet para posicionar el botón con position absolute y ajustar top y right hasta que quede en la ubicación deseada.
Consejos de estilo para el corazón: coloca z index alto y define tamaño del botón con width y height. Usa reglas para que cuando el estado aria checked sea true el icono aparezca relleno y cuando sea false quede outline. Oculta mensajes de variante por defecto y muestra solo cuando sea necesario. Añade una animación breve tipo pulse cuando el producto se añade a la wishlist y un estado loading con fondo gris y cursor not allowed.
Paso 3 Añadir el icono heart en snippets/icon.liquid Abre snippets/icon.liquid y dentro del case de iconos añade una opción when heart para que el sistema pueda renderizar el SVG del corazón cuando llames a render icon with heart. No copies aquí el SVG en esta guía si trabajas en el editor usa la plantilla de iconos y pega el bloque SVG correspondiente a heart respetando la sintaxis liquid del tema.
Paso 4 Guardar y previsualizar Guarda los cambios y recarga la página de producto. Deberías ver el corazón superpuesto en la esquina superior derecha de la imagen. Al hacer clic añade o elimina el producto de la wishlist. Cuando está activo el icono aparece relleno y cuando no está activo aparece solo contorno. Ajusta los valores top y right en el CSS hasta obtener la posición exacta que deseas.
Notas adicionales Si el tema usa lazy loading o autoplay de medios asegúrate de que el botón no interfiera con el control de lightbox. Para variantes múltiples muestra un mensaje que avise al usuario si necesita seleccionar variante antes de añadir a la wishlist. Si necesitas personalizar más el comportamiento del componente revisa la documentación oficial del Wishlist Button Web Component.
Sobre Q2BSTUDIO En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones modernas como inteligencia artificial e ia para empresas, ciberseguridad, servicios cloud aws y azure y servicios de inteligencia de negocio. Podemos ayudarte a integrar componentes frontend en tu tienda Shopify y a desarrollar funcionalidades a medida que mejoren la experiencia de usuario. Si buscas desarrollo de aplicaciones o software a medida conoce nuestros servicios en desarrollo de aplicaciones y software a medida. Para proyectos de inteligencia artificial y agentes IA consulta nuestras propuestas en servicios de inteligencia artificial para empresas.
Palabras clave Este artículo incorpora términos relevantes para mejorar posicionamiento como aplicaciones a medida, software a medida, inteligencia artificial, ia para empresas, agentes IA, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi.
Conclusión Añadir un ícono de lista de deseos dentro de la imagen del producto en el tema Prestige es una mejora visual y funcional que facilita a los clientes guardar productos. Con ajustes simples en snippets/product-gallery.liquid y snippets/icon.liquid obtendrás un botón elegante y totalmente personalizable. Si necesitas ayuda técnica o una integración completa a medida, en Q2BSTUDIO podemos acompañarte desde el diseño hasta la puesta en producción.