Ir al contenido

Botones de compra

Personalice el área de compra del producto con opciones de pago, detalles de compra y comportamiento de compra fija.

Use este bloque para controlar las acciones principales de compra en una página de producto. Para obtener una visión general más amplia de cómo se organiza el contenido del tema, consulte documentación de Shopify sobre secciones y bloques. Además del botón de agregar al carrito, puede mostrar opciones de pago más rápidas, detalles de cumplimiento, mensajes de pago y una barra de compra fija que mantiene visibles las acciones clave mientras los compradores se desplazan.

Estos ajustes determinan cuánto soporte de compra aparece alrededor del botón principal. Una configuración sencilla funciona bien cuando los productos son simples y fáciles de decidir, mientras que una configuración más detallada puede reducir la indecisión en productos que necesitan más contexto.

El icono del botón es una pequeña mejora visual para la acción principal. Puede ayudar a que el botón de agregar al carrito destaque, especialmente cuando el formulario del producto incluye varios controles cercanos.

Los botones de pago adicionales son útiles cuando desea acortar el recorrido hasta la compra para clientes que ya están listos para comprar. Si su página ya tiene mucho contenido alrededor del formulario del producto, desactivarlos puede mantener la atención en la acción principal de agregar al carrito.

La información de envío gratis, las opciones de recogida local y los iconos de pago ayudan a responder preguntas comunes previas a la compra cerca del botón. Úselos cuando aporten claridad, pero evite acumular demasiados elementos de apoyo si el área de compra empieza a sentirse recargada.

La barra fija al desplazarse es más útil en páginas de producto largas. Mantiene las acciones de compra al alcance cuando los compradores pasan del área de compra inicial para leer detalles, explorar contenido multimedia o comparar información.

La opción de destinatario de la tarjeta regalo solo se aplica a los productos de tarjeta regalo. Cuando está activada, añade la opción de enviar la tarjeta regalo por correo electrónico a otra persona.

Mantenga este bloque centrado en la toma de decisiones y las acciones de compra. Activar todas las opciones disponibles puede hacer que el área de compra se vea recargada y reducir la prominencia del botón principal.

La información sobre cuotas es más útil para productos de mayor precio, donde la flexibilidad de pago puede aumentar la confianza. Si ese mensaje no es relevante para su catálogo o configuración, dejarlo desactivado puede mantener el bloque más limpio.

Este bloque usa el estilo principal de botón de su tema, a menos que lo sobrescriba aquí. Use los controles de color cuando el botón de compra necesite más contraste, mejor alineación visual con el diseño circundante o un estado de hover personalizado para esta área específica del producto.

Mantenga los estados predeterminado y hover conectados visualmente para que el botón siga pareciendo una única acción coherente. Compruebe cuidadosamente las combinaciones de texto, borde y fondo para preservar la legibilidad y la prominencia.

Use los controles de visibilidad para mostrar u ocultar este bloque en escritorio o en móvil. Esto resulta útil cuando está creando distintos diseños de página de producto para pantallas pequeñas y grandes.

Si oculta el bloque en un tamaño de dispositivo, asegúrese de que la ruta de compra siga apareciendo claramente en otro lugar de ese diseño.

  1. Mantenga simple el área de compra. Muestre los detalles de apoyo que ayudan a los clientes a decidir y elimine los que añaden ruido.
  2. Use la compra fija en páginas largas. Active la barra fija cuando sea probable que los compradores se desplacen mucho más allá del formulario principal del producto.
  3. Adapte las funciones al tipo de producto. Las opciones de destinatario de tarjeta regalo encajan con productos de tarjeta regalo, mientras que los mensajes sobre cuotas son más valiosos para artículos de mayor precio.
  4. Compruebe el contraste del botón. Si sobrescribe los colores, asegúrese de que el botón siga siendo fácil de ver y leer tanto en el estado predeterminado como en el estado hover.
  5. Planifique por separado móvil y escritorio. Revise ambos tamaños de vista cuando use los controles de visibilidad, porque el área de compra puede presentarse de forma diferente según el diseño.
  6. Mantenga legibles los estados del formulario. Si su área de compra incluye entrada de cliente, asegúrese de que los estados vacíos, de validación y enviados sigan siendo fáciles de revisar, especialmente cuando se muestran varias opciones de compra.