Saltar al contenido principal

Cómo agregar comportamiento de checkout o producto al botón

Usa esto cuando un CTA debe llevar visitantes al checkout o iniciar una ruta de compra de producto. Atomicat admite checkout mediante CTAs de Product del catálogo y mediante acciones de clic de Button 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 Page Builder.
  • URLs de checkout HTTPS de tu proveedor de pagos para compra única (y suscripción, si se usa).

Paso 1: Confirmar URLs de checkout del producto​

  1. Abre Products y edita la oferta que comprarán los visitantes.
  2. En Call to action, confirma:
    • Button text (por ejemplo Add to Cart o Buy now)
    • Button URL (checkout link)
  3. Si usas quantity tiers, confirma:
    • Use same link for all tiers, o
    • URLs únicas / de suscripción por tier

Consulta Cómo usar quantity tiers y Subscribe and Save.

Paso 2: Elegir bloque Product o Button independiente​

EnfoqueMejor cuando
Bloque ProductQuieres precio del catálogo, tiers, variantes, sellos de confianza y el CTA del producto juntos.
Button con enlace / comportamiento de checkoutNecesitas un CTA hero personalizado que aún abra la misma URL de checkout.

Opción A — CTA de bloque Product​

  1. Inserta un elemento Product.
  2. Selecciona el producto del catálogo.
  3. Activa Show full product si los visitantes necesitan imágenes, detalles y selectores de tier.
  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 Product.

Opción B — Button con clic al checkout​

  1. Añade un Button donde quieras un CTA destacado.
  2. Configura la etiqueta para que coincida con la acción de compra.
  3. En la configuración de 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 query que requiera tu herramienta de pago).

Consulta Elemento Button (referencia).

Paso 3: Alinear seguimiento y ruta del embudo​

  1. Si los anuncios dependen de clics de intención de compra, adjunta eventos de pixel del botón. Consulta Cómo rastrear clics de botón con pixel.
  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 Button hero a un SKU distinto del bloque Product de abajo.

Paso 4: Previsualizar rutas de precio​

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

Consulta Vista previa de producto.

Paso 5: Publicar y probar en vivo​

  1. Save y Publish la página.
  2. Prueba en una ventana incognito.
  3. Completa (o alcanza) el checkout del CTA principal.
  4. Vuelve a probar tras editar precio o tier en el catálogo — republica para que las páginas en caché sigan siendo precisas.

Solución de problemas​

ProblemaQué probar
El botón abre oferta incorrectaSincroniza la URL del Button con el CTA del producto; evita hardcodear enlaces desactualizados.
El tier muestra checkout incorrectoRevisa URLs por tier 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 móvilPrueba URLs HTTPS absolutas; evita enlaces javascript:.

Resultado​

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

Documentación relacionada​

Preguntas frecuentes​

¿Debo usar un bloque Product o un Button para checkout?

Usa un bloque Product cuando los compradores necesitan ver opciones de precio y merchandising. Usa un Button cuando solo necesitas un CTA fuerte que abra la misma URL de checkout.

¿El checkout del Button puede reutilizar la URL del producto?

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

¿Los bundles funcionan igual?

Sí para ubicación. Los bundles aparecen en el selector Product con etiqueta (Bundle). El CTA sigue usando el enlace de checkout guardado del bundle.