Coloca botones de añadir al carrito en las cuadrículas de productos

Ahora puedes añadir un botón de añadir al carrito en las listas de colección para que tus clientes lleguen a la caja aún más rápido. Solo tienes que arrastrar el elemento desde el panel de añadir a tu lista, darle el estilo que quieras y ¡listo!

Pero espera, ¡hay más! Si te sientes creativo, puedes configurar una interacción modal dentro de una lista de colección para crear una experiencia de "vista rápida" a tu medida.

Este ejemplo requiere conocimientos avanzados de interacciones, pero su estructura básica es la siguiente. Dentro de la celda de la lista de colección, crea un elemento para la superposición y posiciónalo de forma absoluta, en relación con la lista de colección principal para que ocupe toda la pantalla, sin importar desde qué celda se active. Dentro, añade todos los elementos que quieras que aparezcan en tu ventana modal, incluido el botón de añadir al carrito.

La parte de las interacciones consta de dos pasos: primero, crea la interacción que muestra la ventana modal al hacer clic en el icono de la lupa (aquí se logra cambiando la propiedad display a block y la opacidad de 0 a 100).

La segunda parte es básicamente lo contrario: crea la interacción inversa para el icono de la X en la ventana modal, reduciendo la opacidad a 0 y restableciendo el display a none, para que puedas devolver la ventana a su estado original.

Estas dos interacciones crean un ciclo que te permite abrir y cerrar la ventana modal tantas veces como quieras.