Construye y publica una página de checkout
El checkout builder de AtomicPay es el espacio de trabajo visual usado para personalizar la experiencia de checkout para compradores de un producto, plan u oferta.
Usa el builder para agregar componentes, editar secciones de página, previsualizar layouts de escritorio y móvil, guardar cambios en borrador y publicar el checkout cuando esté listo para compradores.
Qué puedes hacer en el checkout builder
| Área | Propósito |
|---|---|
| Barra lateral de componentes | Muestra componentes de checkout disponibles que pueden agregarse a la página. |
| Canvas | Muestra el layout de checkout que se está editando. |
| Áreas droppable | Organizan contenido en secciones superior, lateral e inferior del checkout. |
| Editor de componentes | Permite editar el contenido y configuración del componente seleccionado. |
| Configuración de tema | Controla estilo visual como colores y tema de checkout. |
| Configuración de página | Controla ajustes de checkout a nivel de página cuando estén disponibles. |
| Modo preview | Permite comparar versiones de checkout en borrador y publicadas. |
| Vista de dispositivo | Permite revisar layouts de checkout de escritorio y móvil por separado. |
| Acción de publicar | Hace visibles los cambios de checkout en borrador para compradores. |
Tipos de componentes disponibles
El builder incluye componentes básicos y avanzados para contenido de checkout y soporte de conversión.
| Componente | Úsalo para |
|---|---|
| Text | Agregar títulos, descripciones, garantías, instrucciones o copy de oferta. |
| Image | Agregar visuales de producto, assets de marca o imágenes que generen confianza. |
| Benefits | Listar lo que recibe el comprador o por qué importa la oferta. |
| Badge | Destacar confianza, seguridad, escasez o etiquetas de oferta. |
| Header | Agregar un área estructurada con imagen y texto. |
| Timer | Agregar una cuenta regresiva cuando forma parte de una campaña real o fecha límite de oferta. |
| Testimonial | Agregar prueba social o feedback de compradores. |
Layout del builder
El checkout builder separa la edición en borrador de la experiencia publicada del comprador.
- Usa la barra lateral de componentes para elegir qué agregar.
- Arrastra componentes al área superior, lateral o inferior del checkout.
- Selecciona un componente para editar su contenido o configuración.
- Cambia entre vistas de escritorio y móvil para ajustar el layout.
- Usa la vista previa de borrador mientras editas.
- Compara con la versión publicada cuando sea necesario.
- Publica solo después de revisar el checkout.
Crear o editar una página de checkout
- Confirma que el producto y los precios estén listos.
[Captura: Producto y plan u oferta vinculados — listos antes de abrir el builder.]
- Abre el diseño de checkout o checkout builder del producto.
[Captura: Entrada al checkout builder — acción Editar diseño o Abrir builder.]
- Agrega los componentes de contenido principales necesarios para la oferta.
[Captura: Barra lateral de componentes — Text, Benefits, Image o Badge arrastrados al canvas.]
- Edita texto, imágenes, benefits, badges, timer o testimonios.
[Captura: Editor del componente seleccionado — titular y copy del cuerpo actualizados.]
- Configura tema y ajustes de página.
[Captura: Panel de tema o configuración de página — colores y opciones de checkout.]
- Previsualiza el layout de escritorio.
[Captura: Vista previa de escritorio — layout y área de pago visibles.]
- Previsualiza el layout móvil.
[Captura: Vista previa en dispositivo móvil — checkout legible en ancho de teléfono.]
- Guarda o mantén cambios en borrador según sea necesario.
[Captura: Indicador de borrador guardado — cambios no publicados almacenados en el builder.]
- Publica el checkout cuando esté listo para compradores.
[Captura: Botón Publicar — estado de checkout cambiado a Publicado.]
- Abre el enlace de checkout como comprador y prueba el camino de pago.
[Captura: Checkout en vivo abierto desde enlace copiado — coincide con el builder publicado.]
Borrador vs checkout publicado
| Versión | Significado |
|---|---|
| Borrador | La versión que se está editando actualmente. Puede incluir cambios no publicados. |
| Publicado | La versión que ven los compradores después de publicar los cambios. |
No asumas que un cambio en borrador está en vivo. Si el checkout tiene cambios no publicados, publica el diseño antes de enviar tráfico al enlace.
Comprobaciones de checkout responsive
Las páginas de checkout pueden comportarse distinto en escritorio y móvil. Siempre revisa ambas.
| Vista | Qué comprobar |
|---|---|
| Escritorio | Balance del layout, contenido lateral, imágenes, testimonios y claridad del checkout. |
| Móvil | Longitud del texto, tamaño de imagen, visibilidad del botón, espaciado y legibilidad del flujo de pago. |
La revisión móvil es especialmente importante para tráfico pagado porque muchos compradores abren enlaces de checkout desde anuncios, email, WhatsApp o apps sociales.
Buenas prácticas
- Mantén el copy del checkout claro y cercano a la oferta real.
- Usa benefits para explicar lo que recibe el comprador.
- Usa timers solo cuando la fecha límite sea real.
- Evita agregar demasiados componentes visuales antes del área de pago.
- Previsualiza escritorio y móvil antes de publicar.
- Publica cambios antes de compartir enlaces de checkout con compradores.
- Prueba el enlace de checkout después de publicar, no solo dentro del builder.
FAQ
¿Por qué veo cambios en borrador pero los compradores no?
El builder puede almacenar cambios en borrador por separado del checkout publicado. Publica el checkout antes de esperar que los compradores vean las últimas ediciones.
¿Debo diseñar escritorio y móvil por separado?
Revisa ambas vistas. El mismo contenido de checkout puede necesitar distinto espaciado, tamaño de imagen u orden en móvil, especialmente cuando los compradores vienen de anuncios o apps de mensajería.
¿Cuándo debo usar un timer?
Usa un timer solo para una fecha límite real o condición de campaña. La urgencia falsa puede reducir la confianza y crear problemas de soporte.
¿Qué debo probar después de publicar?
Abre el enlace de checkout como comprador, confirma producto y precio, revisa el layout móvil, prueba el camino de pago cuando sea posible y confirma que la venta aparece en los informes de AtomicPay.