Agregar Botón de Carrito Sobre la Imagen del Producto

¿Por qué agregar un botón de carrito encima de la imagen?

Colocar el Añadir al Carrito directamente sobre la imagen del producto ayuda a los clientes a comprar de manera más rápida y conveniente.  

En lugar de desplazarse hacia abajo para encontrar el botón, pueden añadir artículos al carrito inmediatamente con un solo clic.

Beneficios:

• Reducir la fricción: Los clientes no tienen que buscar el botón del carrito debajo de los detalles del producto.
• Fomentar las compras impulsivas: Una opción de añadir rápidamente facilita que los clientes agreguen múltiples productos de una vez.
• Mejorar la experiencia móvil: En pantallas pequeñas, una superposición de botones ahorra espacio y mantiene el diseño limpio.
• Promociones destacadas: Puede personalizar el estilo del botón para que coincida con campañas estacionales o descuentos, haciéndolo destacar sobre la imagen.

¿Cómo Mostrar el Botón de Carrito Sobre la Imagen del Producto?

Dentro de GemPages v7, puede diseñar su propia sección de lista de productos con un botón "Agregar al Carrito" sobre la imagen.

Primero, desde su administrador de Shopify, navegue al Panel de Control de GemPages > Páginas. Haga clic en la página de destino para abrir el editor.

Luego, siga estos pasos:

Paso 1: Agregar un elemento Lista de Productos a su página

• Desde la barra lateral izquierda, busque el Elemento Lista de Productos, luego arrastre y suelte el elemento en su página.

• Para garantizar un diseño limpio, puede eliminar varios elementos secundarios anidados en el elemento Lista de productos. 

Por ejemplo, elimine las Variantes de Producto y Muestras haciendo clic en el elemento y presionando el ícono de papelera .

Paso 2: Agregar un elemento Fila al elemento Lista de Productos

• Desde la barra lateral izquierda, agregue un Elemento Fila a la lista de productos que ha creado en el Paso 1.

• Arrastre y suelte los elementos Imagen del Producto y el botón Agregar al Carrito en esta fila.

Paso 3: Configurar la posición del Botón de Carrito

• Haga clic en el elemento del botón Agregar al Carrito para abrir su panel de configuración.
• Vaya a la Avanzado > Posición.

• En el menú desplegable, seleccione posición Absoluto .

Entonces, el botón del carrito estará sobre la imagen del producto.

• Configure Inferior = 0 para mostrar el botón en la parte inferior de la imagen.

• Regrese a la pestaña Configuración para configurar la visibilidad del botón según prefiera. Por ejemplo, puede eliminar el texto, cambiar el color de fondo, o configurar el estado hover.

Para mayor información sobre cómo configurar el elemento Botón Agregar al Carrito, consulte este artículo.

Paso 4: Guardar y Publicar

• Puede realice una vista previa r para verificar los resultados presionando el ícono del ojo en la barra superior.
• Si todo está bien, guarde los cambios y presione el botón Publicar para republicar su página.

Resultado: