Botón de Lista de Deseos para Shopify

Si eres desarrollador o agencia Shopify sabes que los clientes piden con frecuencia funcionalidad de lista de deseos. Es una característica que aumenta la interacción, ofrece más flexibilidad a los compradores y puede incrementar las ventas. Implementarla de forma performante y personalizable puede ser delicado. Por eso presentamos el nuevo componente web para Wishlist Power: diseñado para integrarse fácil, ser accesible y mantener el control total del estilo y comportamiento.

Qué ofrece: integración drop-in para colocar el componente en páginas de producto, tarjetas de colección o la página de inicio sin escribir JavaScript adicional. Control total de estilos para que el componente respete el diseño de la tienda. Detección de variantes para rastrear variant id o permitir que el componente detecte cambios automáticamente. Accesibilidad integrada con atributos como aria-checked y aria-busy gestionados automáticamente. Soporte para conteo de variantes y aviso cuando el cliente ya tiene otra variante del mismo producto en su lista de deseos.

Ejemplo mínimo de uso (representado como código): <ooo-wl-wishlist-button product-id={{product.id}} handle={{product.handle}} loading><button type=button><span class=ooo-wl-wishlist-button-add>Añadir a la lista de deseos</span><span class=ooo-wl-wishlist-button-remove>Quitar de la lista de deseos</span></button> <p>Ya tienes <span></span> variantes en tu lista de deseos.</p></ooo-wl-wishlist-button>

Atributos clave del componente: product-id obligatorio para el ID de producto en Shopify; handle obligatorio para el handle del producto; loading usado para mostrar el botón solo cuando esté listo; variant-id opcional, si se usa debe actualizarse manualmente al cambiar la variante, de lo contrario se usa la detección automática.

Estilos y ejemplos (representado como CSS): /* Oculta el botón mientras carga */ ooo-wl-wishlist-button [ loading ] span { display : none ; } /* Oculta Añadir cuando el producto ya está en la lista */ button [ aria-checked = true ] .ooo-wl-wishlist-button-add { display : none ; } /* Oculta Quitar cuando el producto no está en la lista */ button [ aria-checked = false ] .ooo-wl-wishlist-button-remove { display : none ; } /* Mensaje de aviso de variante */ [ show-variant-warning = true ] p { display : block ; } /* Mostrar contador de variantes ya añadidas */ [ show-variant-warning = true ] p span ::before { counter-reset : count var ( --ooo-wl-variants-added-count ); content : counter ( count ); }

Atributos que el componente actualiza automáticamente: show-variant-warning para mostrar u ocultar el aviso, y la variable CSS --ooo-wl-variants-added-count con el número de variantes añadidas. Además, el elemento button interno recibe aria-checked para indicar si está en la lista y aria-busy para el estado de carga.

Notas y buenas prácticas: si usas variant-id recuerda que la detección no se actualizará sola al cambiar de variante, debes manejarlo desde tu tema. El componente funciona con el backend de Wishlist Power sin configuración adicional más allá de añadir el componente. Como los estilos no están encapsulados, prueba tus overrides en las plantillas del tema (producto, colección, etc.).

Por qué interesa a las agencias: ofrece máxima flexibilidad para diseñar la lista de deseos exactamente como quiere el cliente sin sacrificar el rendimiento. Acelera tiempos de desarrollo y facilita la réplica en otras páginas como tarjetas de colección o landing pages. Mantiene bajo el impacto en rendimiento porque controlas el CSS y la lógica de carga.

En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones ecommerce y en integrar componentes avanzados como este en tiendas Shopify. Ofrecemos servicios de software a medida y aplicaciones a medida para adaptar cualquier funcionalidad a las necesidades del cliente. Si necesitas integrar listas de deseos, personalizar componentes o desarrollar funcionalidades completas para tu tienda contamos con experiencia en inteligencia artificial, ia para empresas, agentes IA, ciberseguridad y pentesting, servicios cloud AWS y Azure, servicios inteligencia de negocio y Power BI.

Si te interesa una solución personalizada para tu tienda o quieres optimizar la arquitectura cloud y la seguridad, consulta nuestros servicios de software a medida y desarrollo de aplicaciones o conoce nuestras opciones de servicios cloud AWS y Azure. En Q2BSTUDIO podemos acompañarte desde la definición técnica hasta la puesta en producción, integrando inteligencia artificial y analítica avanzada con Power BI para mejorar la conversión y la experiencia del cliente.

Nos encantaría recibir feedback de desarrolladores que construyen temas personalizados: qué ajustes serían útiles y qué querrías ver en futuras versiones. Transformemos la integración de la lista de deseos en una ventaja competitiva para tus clientes.