Saltar al contenido principal

Cómo Agregar Comportamiento de Checkout o Producto al Botón

Usa esto cuando un CTA deba llevar visitantes al checkout o iniciar una ruta de compra de producto. Atomicat admite checkout mediante CTAs de Producto del catálogo y mediante acciones de clic de Botón que abren URLs de checkout/producto.

Antes de Empezar​

Asegúrate de tener:

  • Un producto (o bundle) guardado con un enlace de checkout válido. Consulta Cómo crear un producto.
  • Una página de ventas abierta en el Constructor de Páginas.
  • URLs de checkout HTTPS de tu proveedor de pagos para compra única (y suscripción, si aplica).

Paso 1: Confirmar URLs de Checkout del Producto​

  1. Abre Productos y edita la oferta que comprarán los visitantes.
  2. En Call to action, confirma:
    • Button text (por ejemplo Agregar al carrito o Comprar ahora)
    • Button URL (checkout link)
  3. Si usas niveles de cantidad, confirma:
    • Use same link for all tiers, o
    • URLs de compra única / suscripción por nivel

Consulta Cómo usar niveles de cantidad y Suscribir y Ahorrar.

Paso 2: Elegir Bloque Producto o Botón Independiente​

EnfoqueMejor cuando
Bloque ProductoQuieres precios del catálogo, niveles, variantes, sellos de confianza y CTA de producto juntos.
Botón con enlace / comportamiento de checkoutNecesitas un CTA hero personalizado que aún abra la misma URL de checkout.

Opción A — CTA de bloque Producto​

  1. Inserta un elemento Producto.
  2. Selecciona el producto del catálogo.
  3. Habilita Show full product si los visitantes necesitan imágenes, detalles y selectores de nivel.
  4. El CTA de compra usa la configuración de checkout del producto.

Consulta Cómo agregar un producto a una página y Elemento Producto.

Opción B — Clic de Botón al checkout​

  1. Agrega un Botón donde quieras un CTA destacado.
  2. Configura la etiqueta para que coincida con la acción de compra.
  3. En los ajustes del evento de clic, elige comportamiento de checkout compatible cuando esté disponible, o configura un enlace normal a la URL de checkout del producto.
  4. Haz coincidir la URL exactamente con el CTA del catálogo (incluidos parámetros de consulta que requiera tu herramienta de pago).

Consulta Elemento Botón (referencia).

Paso 3: Alinear Seguimiento y Ruta del Embudo​

  1. Si los anuncios dependen de clics de intención de compra, adjunta eventos de píxel al botón. Consulta Cómo rastrear clics de botón con un píxel.
  2. Si esta página es un paso del embudo antes del checkout, mantén la siguiente página del embudo consistente con la misma oferta. Consulta Cómo crear un embudo.
  3. Evita apuntar el Botón hero a un SKU distinto del bloque Producto debajo.

Paso 4: Previsualizar Rutas de Precios​

  1. Usa Preview del producto y Preview de la página.
  2. Haz clic en cada opción visible: precio base, cada nivel, y suscripción vs compra única cuando ambos estén habilitados.
  3. Confirma que cada ruta aterriza en la URL de checkout correcta.

Consulta Vista previa del producto.

Paso 5: Publicar y Probar en Vivo​

  1. Save y Publish la página.
  2. Prueba en una ventana incógnito.
  3. Completa (o llega) al checkout del CTA principal.
  4. Vuelve a probar después de editar precio o niveles del catálogo — republica para que las páginas en caché sigan siendo precisas.

Solución de Problemas​

ProblemaQué intentar
El botón abre la oferta incorrectaSincroniza la URL del Botón con el CTA del producto; evita hardcodear enlaces desactualizados.
El nivel muestra checkout incorrectoRevisa URLs por nivel y Use same link for all tiers.
Producto no encontradoVuelve a seleccionar el producto del catálogo o restaura el producto en el proyecto correcto.
Checkout roto en mobilePrueba URLs HTTPS absolutas; evita enlaces javascript:.

Resultado​

Los visitantes pueden iniciar checkout desde el CTA de tu página — ya sea mediante el bloque Producto o un Botón independiente — con URLs que coinciden con tu oferta del catálogo.

Documentación Relacionada​

FAQ​

¿Debo usar un bloque Producto o un Botón para checkout?

Usa un bloque Producto cuando los compradores necesiten ver opciones de precio y merchandising. Usa un Botón cuando solo necesites un CTA fuerte que abra la misma URL de checkout.

¿Puede el checkout del Botón reutilizar la URL del producto?

Sí. Copia la Button URL del producto en la acción de enlace/checkout del Botón para que cada CTA siga sincronizado con el catálogo.

¿Los bundles funcionan igual?

Sí para la colocación. Los bundles aparecen en el selector de Producto con etiqueta (Bundle). Su CTA sigue usando el enlace de checkout guardado del bundle.