Secretos magistrales de diseño de páginas de pago de alta rentabilidad (+ejemplos)

¿Quiere optimizar el diseño de su página de pago?

¿Su tienda está plagada de carritos abandonados?

¿Quiere recuperar las ventas perdidas optimizando el proceso de pago?

Si es así, no es el único que desea mejorar las tasas de conversión en su tienda de comercio electrónico.

• 70,9% de todos los carritos de la compra en línea se abandonan.
• 18% de esos abandonos se han reducido a un proceso de pago demasiado largo o complicado.

Esto significa que 1 de cada 5 compradores de su tienda que abandonan el carrito lo hacen porque el proceso de pago les parece demasiado complejo o largo.

Son muchas ventas perdidas.

Cada Tienda de comercio electrónico debería optimizar su checkout, razón por la cual hemos creado este post.

Siga leyendo:

• En ingredientes esenciales del diseño de la página de pago
• El éxito de las tiendas diseñar su caja para maximizar las ventas
• Pedido mejores prácticas de diseño de páginas
• 10 consejos prácticos para optimizar el proceso de pago para una mayor conversión

Al final, tendrás toda la información que necesitas para hacer frente a los carritos abandonados y conseguir más ventas.

Ingredientes esenciales de las páginas de pago de alta conversión

En primer lugar, analicemos rápidamente cómo debe ser el diseño de una página de pago optimizada.

Una página de pago debe incluir:

1. Contenido de la cesta y precios
2. Formulario de dirección para facturación y entrega
3. Método de envío, coste y plazo de entrega estimado
4. Formas de pago
5. Un botón de compra

Estos son los ingredientes mínimos de una página de pago funcional. Cuanto más se añada a la página, más se distraerá o frustrará el cliente.

Una página de pago de alta conversión debe ser:

• Corto - Debe contener los campos de formulario mínimos para completar una compra
• Simple - El cliente debe poder rellenar el formulario y pasar por caja sin tener que pensar demasiado.
• Fácil de seguir - La página de pago debe ser intuitiva y dirigir al visitante hacia la finalización del pago.
• Informativo - Proporcione a los clientes toda la información que necesiten, incluido el precio total, los gastos de envío, la fecha estimada de entrega y cualquier otra información esencial.
• Lleno de opciones - Incluya la opción de pago como invitado, el inicio de sesión en la cuenta, las opciones de entrega, las opciones de pago, las opciones de divisa y todo lo que sea relevante para su mercado objetivo.
• Tranquilizador - Añada señales de confianza, información sobre garantías y enlaces a sus políticas de devolución y privacidad.
• Bien diseñado - Reflejar el diseño de la tienda, minimizar la navegación y las oportunidades de abandonar la caja antes de terminar

Creemos que estas características son esenciales para minimizar los carritos abandonados y maximizar la conversión.

Téngalos en cuenta cuando construya el suyo y coseche los frutos.

10 consejos para diseñar páginas de pago optimizadas con ejemplos

En "5 cosas que hay que hacer para garantizar la mejor experiencia de pago a los clientes", discutimos formas de construir una página de pago extraordinaria usando WooCommerce.

Veamos algunos consejos para optimizar el pago con algunos ejemplos reales para que pueda verlos en acción.

1. Permitir el pago de invitados

24% de personas abandonan su carrito porque tienen que crear una cuenta.

Permitir el pago invitado es una forma sencilla de optimizar el pago y minimizar la fricción.

El visitante medio tendrá docenas de cuentas y probablemente no quiera más. Esto es especialmente cierto si se trata de una compra única o de un artículo de gran valor, ya que solo serían visitantes ocasionales.

En pasarelas de pago facilitan el pago a los invitados, no hay razón para no aceptarlos.

Ejemplos de pago de invitados en acción:

Big Chill

En Big Chill es una experiencia muy divertida que aprovecha el sentido de nostalgia de los clientes. La página de pago destila comodidad y modernidad.

Nos gusta la página de pago de Big Chill porque hay:

• Sin barra de navegación superior.
• Migas de pan para indicarle lo que debe hacer a continuación.
• Un sello de certificado SSL en la página para mayor seguridad
• Los campos del formulario de contacto caen en una sola línea vertical para simplificar la cumplimentación
• Todo está formateado para que los clientes puedan rellenar fácilmente el formulario
• Pago WooCommerce utiliza dos páginas y dos pasos. También hace un trabajo fantástico estableciendo expectativas con los clientes desde el principio

Lo que nos gusta...

Nos gusta la opción de pago invitado, la barra de progreso en la parte superior, el sencillo resumen del pedido y el cuadro de prueba social de la derecha.

Qué podría ser mejor...

Los gastos de envío no se mencionan en la página del producto y aparecen en la página de pago. Los gastos de envío "sorpresa" desaniman a muchos compradores, aunque se esperen en los artículos grandes.

Lego

Lego tiene un diseño de página de pago minimalista que es muy amigable y accesible, como la marca. También hace bien el checkout de invitados.

Tiene la opción de pagar con PayPal en la página anterior o puede seleccionarlo en la página de pago. Es sencillo y agiliza la compra, que es lo que buscamos.

El resto de la página es sencillo, con un resumen del pedido a la derecha, los gastos de envío en el centro y campos de formulario ocultos que sólo se abren cuando es necesario.

Nos gusta el diseño de la caja de Lego porque:

• Es limpio, agradable y accesible
• Facilita la salida como invitado
• Existen múltiples opciones de pago
• El resumen del pedido es fácil de ver

Lo que nos gusta...

Nos gusta todo el diseño, incluido el registro de invitados, los colores de la marca, el diseño sencillo y el formulario dinámico.

Qué podría ser mejor...

No hay nada que cambiaríamos de este diseño ya que es uno de los mejores diseños de página de pago que hemos visto....

2. Permitir varios métodos de pago

Ya que hablamos de pasarelas de pago, también recomendamos permitir tantos métodos de pago como sea posible.

Esto es especialmente importante si atiende a clientes internacionales. Un método de pago popular en una región puede no estar disponible en otra.

No existe un límite práctico en cuanto al número de métodos que puede ofrecer, pero recomendaríamos 3-4 opciones para la mayoría de las tiendas.

Cuanto más incluya, más clientes podrán comprar.

Amazon

Una de las muchas cosas que Amazon hace bien son las opciones de pago. Puedes utilizar tantas como quieras, añadir tantas como quieras y seleccionar una para cada compra individual.

Utilizar tarjetas regalo o saldos existentes es igual de fácil. Al igual que seleccionar un método de entrega.

El resumen del pedido deja claro lo que se gasta y en qué, lo que contribuye a mejorar la experiencia.

Nos gusta la página de pago de Amazon porque:

• Los usuarios registrados pueden comprar con un clic
• Múltiples opciones de pago
• Selección sencilla del método de pago
• También se incluye la fecha de entrega prevista

Lo que nos gusta...

Nos gusta la opción de seleccionar entre varios métodos de pago, añadir otros nuevos, añadir cupones o detalles de la tarjeta regalo en un solo cuadro. También nos gusta el cuadro de resumen de la derecha.

Qué podría ser mejor...

Hay poco que criticar aquí, excepto que el diseño de la página de pago es un poco anticuado. Aunque eso es lo mismo para toda la marca Amazon.

Adidas

Adidas ofrece 10 opciones de pago, en gris en la parte inferior de la pantalla. Entre ellas están las principales como American Express, Mastercard, Visa, PayPal y la suya propia, AdiClub.

Eso permite a la empresa vender a una amplia gama de clientes en distintos territorios.

También nos gusta el diseño minimalista de la página de pago. La marca es clara en todo momento y la página se abre una vez que completas la sección anterior. Está muy bien diseñada.

La página de pago de Adidas es un buen ejemplo:

• Ofrecer múltiples métodos de pago para un mayor atractivo
• Diseño minimalista de la página de pago
• Diseño de formularios dinámicos en los que los campos se abren cuando es necesario
• Mostrar un resumen claro del pedido con precios transparentes

Lo que nos gusta...

Nos gusta que estén cubiertos todos los métodos de pago que utilizamos habitualmente. También nos gusta que el resumen del pedido muestre claramente los gastos de envío o la ausencia de ellos.

Qué podría ser mejor...

El diseño de formularios dinámicos es estupendo, pero no estás seguro de si el envío es gratuito o no hasta que llegas a esa parte del formulario.

3. Minimizar los campos obligatorios del formulario

Cuanto más trabajo tenga que hacer un cliente para conseguir lo que quiere, menos probable es que lo intente. Por eso recomendamos encarecidamente que los formularios de pago sean lo más breves y sencillos posible.

Minimice los formularios siempre que sea posible y utilice una casilla de verificación para "¿Igual que la dirección de entrega?" para reducirlos aún más. Si puedes rellenar previamente los campos de los formularios para los clientes registrados, mucho mejor.

Cuanto más corto sea el formulario, menos estorbará al cliente en el momento de la compra.

Manzana

Como una de las empresas más grandes del mundo, uno esperaría que Apple hiciera bien su página de pago. Y así es.

La empresa utiliza un sistema de pago de varias páginas con un contenido mínimo en cada una de ellas. Ofrecen un proceso de pago para invitados, utilizan un lenguaje accesible y ofrecen opciones en cada paso del proceso.

Nos gusta especialmente esta página, en la que puedes elegir que te entreguen el iMac o recogerlo en el Apple Store más cercano. La llamada a la acción "Continuar con la dirección de envío" también deja claro lo que viene a continuación.

El diseño de la página de pago de Apple es:

• Mínima y dividida en etapas
• Escrito en un lenguaje accesible como el resto de la marca
• Fácil de entender lo que hay que hacer y lo que viene a continuación
• Informativo, te dice cuánto pagas y cuándo esperas la entrega

Lo que nos gusta...

Nos gusta que la página de pago refleje con precisión el núcleo de la marca Apple y te guíe a través del proceso de pago sin ser prepotente.

Qué podría ser mejor...

Somos fans de las cajas de una página, pero aquí hay muy poco que criticar.

LatePoint

LatePoint es un plugin de reservas para WordPress que simplifica la tarea de añadir reservas de citas a un sitio web WordPress. Está aquí porque la página de pago es de lo más sencillo que hay.

Se trata de un formulario de una sola página con los campos mínimos necesarios. Puede ver inmediatamente qué información se necesita y dónde y con qué rapidez puede comprar.

Los productos digitales tienen ventaja en este aspecto, pero LatePoint hace un gran trabajo simplificando las cosas.

Nos gusta la página de pago de LatePoint porque:

• El pago en una página siempre es bienvenido
• Mínimos campos de formulario que rellenar
• Ofrece dos opciones de pago muy populares
• Señal de confianza en la parte inferior "pago seguro y encriptado".

Lo que nos gusta...

Nos gusta que la página de pago pueda verse de una sola vez y que sea sencilla y mínima. Sabes que acabarás en segundos, lo que es una gran táctica de conversión.

Qué podría ser mejor...

Un par de señales de confianza más estarían bien, sobre todo porque la marca no es tan conocida como otras. También se agradecerían más opciones de pago, aunque lo básico está cubierto.

4. Indique el coste total del pedido con antelación

No a todo el mundo le gustan las sorpresas. Si esa sorpresa son tasas añadidas o costes ocultos en la página de pago, la cosa no acabará bien.

Según el Instituto Baymard, 17% de los carritos abandonados se deben a que los clientes no pudieron ver el coste total por adelantado. Son muchos clientes que perder por algo tan sencillo.

Informe a los clientes de las opciones y costes de entrega en las páginas de productos. Hágales ver de inmediato cuánto cuesta la entrega y los plazos aproximados, si es posible.

No lo dejes para la página de pago.

Bed Bath & Beyond

Bed Bath & Beyond sabe lo que hace cuando se trata de venta al por menor. Su tienda de comercio electrónico tampoco está nada mal.

Aquí pasan muchas cosas, pero puedes ver claramente lo que has pedido, lo que cuesta, cuánto cuesta el envío y el total del pedido. También tienes opciones de compra ahora, pago después (BNPL) si las quieres.

Es lo contrario del diseño minimalista de la página de pago, pero se ha hecho de tal forma que se puede ver claramente lo que hay que hacer.

La página de pago de Bed Bath & Beyond es:

• Completo y fácil de seguir
• Información clara sobre los gastos y el coste total
• Accesible, con múltiples opciones de pago, incluida la BNPL
• Bien diseñado y se ajusta a su marca

Lo que nos gusta...

Nos gusta que todo esté muy claro y que sepas exactamente cuánto cuesta el producto, cuánto cuesta el envío y el coste total de tu pedido.

Qué podría ser mejor...

La página está un poco recargada. Tampoco somos partidarios de hacer upselling en la página de pago. Hay un momento y un lugar para eso y no creemos que sea aquí.

Tredz

Tredzun minorista de bicicletas en línea, acierta de pleno con el diseño de la página de pago. El diseño es minimalista, hay muy pocas distracciones y el coste total del pedido se mantiene destacado en todo momento.

La página también incluye menciones a una garantía de devolución del dinero, enlaces al chat y una guía de compra para ayudar a superar las objeciones. Aunque suponen una posible escapatoria de la caja, su valor compensa el riesgo.

Es una sencilla página de pago bien hecha.

Nos gusta la página de Tredz porque:

• Tiene un resumen claro del pedido
• Es sencillo y directo
• Contiene un mínimo de distracciones
• Tranquiliza con menciones de garantías y chat

Lo que nos gusta...

Nos gusta que el resumen del pedido sea claro, incluso cuando se trata de un artículo de gran valor. También nos tranquiliza la ayuda adicional y la garantía de devolución del dinero.

Qué podría ser mejor...

No estamos convencidos de que la página de pago sea el lugar adecuado para una guía de compra. Lo ideal sería verla en una fase más temprana del embudo de ventas para ayudar a la conversión.

5. Crear un flujo lógico en la página de pago

El público occidental tiende a leer de izquierda a derecha y de arriba abajo. Diseña tu página de pago en función de esta tendencia.

Coloque el formulario a la izquierda y vaya bajando por la página de forma lógica hasta llegar al botón "Comprar ahora". Es una sensación familiar y tranquilizadora, que debería ayudar a la conversión.

Si puede añadir un resumen del pedido, opciones de entrega e insignias de confianza a la derecha o en un lugar destacado de la página, ¡mejor que mejor!

Algunos ejemplos de flujo lógico son:

Amplificadores Orange

Orange Amps es un conocido fabricante de equipos musicales y vende algunos de ellos por Internet. El diseño de la tienda no es el más intuitivo, pero la página de pago es un gran ejemplo de cómo hacerlo.

En general, esta página de pago hace un buen trabajo de racionalización del paso final a la conversión. También es un buen ejemplo de una empresa que ha optado por descargar el procesamiento de pagos a un tercero de confianza (PayPal o Sage).

Creemos que esta es una página de pago bien diseñada porque:

• Los clientes tienen la opción de entrar o salir como invitados
• Una solicitud de creación de cuenta se produce después de que el formulario
• Los campos de los formularios están estructurados de forma lógica y son fáciles de tabular
• No es necesario volver a introducir los datos de envío si son los mismos que los de facturación.
• Los métodos de pago incluyen logotipos claramente reconocibles y de confianza

Lo que nos gusta...

Nos gusta la sencillez del formulario y su fluidez. La solicitud de crear una cuenta después de permitir el pago a invitados también es un buen detalle.

Qué podría ser mejor...

No se mencionan los gastos de envío, el servicio de mensajería ni los plazos de entrega estimados. Recomendamos que todas las páginas de pago incluyan esa información.

G-Shock

G-Shock utiliza una página de pago dinámica en la que la siguiente parte del formulario sólo se muestra cuando se completa la anterior. Ofrece un gran flujo por la página.

Hay un esquema para que pueda ver cuántos campos están implicados y los pasos lógicos.

Elija la entrega, pase por caja como invitado o no, añada la dirección y los métodos de pago o elija la opción de pago exprés. Todo es muy fácil.

G-Shock hace muchas cosas bien con el diseño de su página de pago:

• Una página dinámica que se despliega a medida que avanza
• Flujo lógico en todo el formulario
• Los costes se indican claramente en el resumen del pedido
• Opción de pago exprés para un pago aún más rápido

Lo que nos gusta...

Nos gusta cómo el formulario se desarrolla como una historia a medida que avanzas. También nos gusta que el resumen del pedido permanezca visible en todo momento.

Qué podría ser mejor...

Los distintivos de confianza son diminutos y están en la esquina inferior derecha. Aunque la marca tiene mucha confianza, las haríamos más visibles.

6. Añada señales de confianza siempre que sea posible

Siguiendo por un momento con el tema de las señales de confianza. El estudio del Instituto Baymard que citábamos antes decía 19% de carritos abandonados eran porque el cliente no confiaban los datos de su tarjeta de crédito a la tienda.

Las señales de confianza desempeñan un papel fundamental en la conversión. Es mucho más probable que los clientes compren si ven "Verified by Visa", "McAfee Secure", "Secured by SSL" y otros.

Añada menciones a su garantía de devolución del dinero y enlaces a sus políticas de devolución y privacidad, y dará a los clientes todo lo que necesitan.

Vea las insignias de confianza en acción aquí:

Astra

Creemos que nuestra propia página de pago de Astra tiene un gran diseño. Es breve, sencilla y añade claras señales de confianza para superar las objeciones.

La página también incluye múltiples opciones de pago, menciona la garantía de devolución del dinero y el pago seguro. Todo diseñado para asegurar a los compradores que están en buenas manos.

La barra de progreso en la parte superior también es un buen detalle para que los clientes sepan exactamente lo que está pasando.

El diseño de la página de pago de Astra es:

• Tranquilidad con múltiples distintivos de confianza
• Corto y conciso
• Fácil de usar con múltiples opciones de pago
• Transparencia con enlaces a las páginas de las políticas

Lo que nos gusta...

Nos gusta lo breve que es el formulario, que se acorta al no tener que hacer envíos. También nos gusta la tranquilidad que dan los distintivos de confianza y las garantías.

Qué podría ser mejor...

En realidad, no hay mucho que quisiéramos cambiar aquí, ¡si no, lo haríamos!

GhostBed

GhostBed es inteligente al hacer todo lo posible para aventajar a la competencia. Además de tener un sitio web WordPress muy bien diseñado, la página de pago de WooCommerce está muy bien optimizada.

Pero en realidad no es ahí donde queremos centrar su atención. GhostBed hace un buen trabajo agilizando el proceso de pago y fue un acierto lo de las marcas de confianza.

Puede ver "Pago seguro" en la parte superior, "Ayuda para dormir" a la derecha y premios en la parte inferior derecha. Todo para que te sientas mejor al comprar.

Entre los aspectos más destacados de la página de pago de GhostBed se incluyen:

• Insignia de confianza de pago seguro
• Formulario de pago sencillo
• Todos los precios, impuestos y gastos de envío claramente expuestos
• Múltiples opciones de pago de diversos proveedores
• Opción BNPL
• Opción de chat en directo

Lo que nos gusta...

Nos gusta lo limpio y sencillo que es el formulario a la vez que ofrece muchas opciones. Un buen uso de las insignias de confianza y un widget de chat en directo aumentan el atractivo.

Qué podría ser mejor...

En realidad no hay mucho que cambiar aquí, ya que este es uno de los mejores diseños de página de pago que conocemos.

7. Añadir prueba social si procede

Si además de señales de confianza puedes añadir pruebas sociales, estarás añadiendo más razones para que confíen en ti.

La prueba social puede incluir puntuaciones con estrellas, número de personas que utilizan su producto, reseñas y testimonios, ya sean dejados directamente con usted o con un tercero como Trustpilot.

Dondequiera que estén sus reseñas, incluya algunas de ellas en su página de pago.

Pueden ayudar a generar confianza y, junto con las insignias de confianza, dar a los clientes la seguridad necesaria para realizar el pago.

Zapatos Xero

Zapatos Xero añade pruebas sociales en el banner azul de la parte superior de la página. Dice 5.000 millas de garantía en la suela, 56.694 opiniones de 5 estrellas, ajuste, sensación y movimiento naturales y más de 1.000.000 de clientes satisfechos.

Naturalmente, nos interesa el número de reseñas y de clientes satisfechos. Es un buen uso de la prueba social en una página sin que se interponga en la compra.

Junto con una barra de progreso, un resumen claro del pedido y un flujo lógico, este es un gran ejemplo de diseño de página de pago bien hecho.

Valoramos Xero Shoes porque:

• El diseño es limpio y sencillo
• El banner azul refleja la marca e incluye pruebas
• Hay una barra de progreso
• Flujo lógico de la página hacia la caja

Lo que nos gusta...

Nos gusta el diseño sencillo que refleja la marca sin estorbar. La barra azul tranquiliza a los nuevos clientes y debería ayudar a convertirlos.

Qué podría ser mejor...

La barra azul está bien, pero hay que fijarse bien para leerla. Nosotros haríamos esos puntos mucho más grandes y formarían parte del cuadro de resumen del pedido.

Shoptimizer

Shoptimizer es una plantilla WooCommerce para WordPress. La página de pago es mínima, pero utiliza insignias de confianza y prueba social para ayudar a convertir.

Aunque todos sabemos que los comentarios más positivos serán los elegidos para esta página, no deja de ser tranquilizador saber que a la gente de verdad le gusta el tema. La conexión segura SSL es solo un extra.

El resto del diseño es simple y sencillo, haciendo que el formulario y la caja sean lo único que se vea.

Creemos que la caja de Shoptimzer destaca por:

• La prueba social está en primer plano
• El distintivo de confianza SSL es una ventaja añadida
• El formulario es sencillo con un flujo lógico
• No hay nada más que te distraiga de la caja

Lo que nos gusta...

Nos gusta la sencillez de la página, con una prueba social muy evidente. Incluir una insignia SSL y poco más también es un acierto.

Qué podría ser mejor...

La opción de pagar con PayPal se encuentra al final del formulario, lo que evitaría tener que rellenarlo. Lo cambiaríamos sin duda.

8. Asegúrese de que todo funciona en el móvil

Todos sabemos que el uso de la web móvil ha superado al de los ordenadores de sobremesa, por lo que es esencial que su tienda sea compatible con dispositivos móviles.

Un diseño web totalmente adaptable contribuye en gran medida a ello, pero presta especial atención a los formularios. Utiliza el tema de WordPress adecuado y tu formulario debería funcionar perfectamente, pero pruébalo todo antes de lanzarlo para asegurarte.

El recorrido del usuario móvil debe ser tan sencillo como el de la versión de escritorio, así que haga todo lo posible para que así sea.

eBay

eBay ofrece una experiencia excelente en el móvil, tanto si utilizas la aplicación como el navegador. El diseño de la página de pago es minimalista y también tiene un flujo lógico, algo que apreciamos.

Dependiendo del producto que compre, verá opciones de pago, opciones de entrega, un total del pedido y un botón claro de comprar ahora.

Es todo lo que necesitamos ver para comprar, por eso funciona tan bien.

Nos gusta el diseño de la caja de eBay porque:

• Refleja la marca con el nombre coloreado en la parte superior
• Es minimalista con muy poco diseño
• Hay varias opciones de pago en la parte superior
• Hay un flujo lógico con un desplazamiento mínimo

Lo que nos gusta...

Nos gusta que tengas la misma experiencia de pago independientemente del dispositivo que utilices. Las experiencias de la aplicación y el navegador también son muy similares.

Qué podría ser mejor...

Esta es otra página de pago que funciona bien. No cambiaríamos nada, ya que es uno de los mejores diseños de página de pago de esta página.

9. Minimizar las distracciones

Cuando un cliente entra en su página de pago, no queremos que nada se interponga en su camino para completar la compra. Ese es el único objetivo de la página, así que queremos minimizar las distracciones siempre que sea posible.

Recomendamos eliminar la navegación de cabecera y pie de página y no incluir nada que no sea absolutamente necesario.

Deje el inicio de sesión, las ventas adicionales, las ventas cruzadas, los vídeos promocionales y otras tácticas de conversión para las páginas anteriores. El pago debe ser el camino hacia la compra y nada más.

Dos ejemplos de páginas de pago mínimas son:

Tienda All Blacks

Los aficionados al rugby neozelandés ya estarán familiarizados con el All Blacks tienda. A lo que los fans quizá no hayan prestado atención es a lo impresionante que es esta página de pago.

Tienes la opción de iniciar sesión en la parte superior y el formulario está dividido en varias páginas para que cada una sea sencilla. La llamada a la acción es clara y a la derecha hay una descarada venta adicional.

La página de pago cumple todos los requisitos para ofrecer una experiencia de primera calidad:

• El proceso de pago es muy sencillo
• El formulario de contacto sólo pide lo necesario
• Opción de utilizar una cuenta (pero no es obligatorio)
• Duplicación automática de la información de facturación en los campos de envío
• Widget sencillo de revisión de pedidos
• Opciones de pago bien reconocidas

Lo que nos gusta...

El objetivo es la simplicidad. La página de pago requiere la mínima información de los clientes y elimina al máximo la fricción de la compra.

Qué podría ser mejor...

Es difícil criticar algo que es muy bueno, pero personalmente evitaríamos las ventas adicionales en la página de pago. Las añadiríamos antes, pero así somos nosotros.

10. Incluir un resumen completo del pedido

Un resumen completo del pedido debe incluir lo que hay en la cesta, el importe del envío, el plazo de entrega, la forma de pago, el número o referencia del pedido, el lugar de entrega y cualquier otra información pertinente.

Si además puede ofrecer a los clientes la posibilidad de añadir o eliminar artículos, mucho mejor. Aunque puede perder una o dos ventas por este motivo, apostamos a que verá un aumento general.

Facilite al cliente toda la información que necesite en la página y en el correo electrónico de confirmación.

Bajo Armadura

Bajo Armadura tiene un resumen de pedido claro y fácil de entender que nos gusta especialmente. El botón rojo de pago también es eficaz y no deja lugar a dudas.

La mayoría de los ejemplos de este post tienen buenos resúmenes de pedido, con precios claros, códigos de descuento cuando procede y gastos de envío, pero nos gusta éste.

Ese botón rojo de llamada a la acción y el fondo sombreado hacen que destaque por todas las razones correctas.

Valoramos el diseño de la página de pago de Under Armor porque:

• El resumen del pedido es claro y está bien diseñado
• El botón rojo de llamada a la acción llama la atención
• La sección "Has ahorrado" es especialmente buena para la conversión
• La imagen del producto también es buena

Lo que nos gusta...

Nos gusta la página de pago en su conjunto, ya que es joven, enérgica y refleja la marca. El resumen del pedido es especialmente bueno.

Qué podría ser mejor...

Hay un cuadro de venta cruzada debajo del resumen del pedido principal. Esa es una oportunidad para salir y no sugerimos hacer eso.

Doctor Martens

Doctor Martens va en una dirección diferente a Under Armor con su resumen de pedido, ya que literalmente todo está en la misma caja.

Puedes ver las opciones de entrega, las opciones de pago, el total del pedido y añadir un código promocional si lo tienes. Hay muchas cosas, pero todas son fáciles de entender.

El elemento de opciones de envío es un buen detalle, ya que también muestra el coste y el tiempo aproximado.

Nos gusta esta caja porque:

• Todo está en el resumen del pedido
• Incluir los gastos y plazos de envío es inteligente
• Refleja una marca conocida
• Se incluyen múltiples opciones de pago

Lo que nos gusta...

Nos gusta el diseño de la página de pago, el espaciado y el resumen del pedido. Nos gusta cómo incluye todo lo que necesitas saber junto con el precio total.

Qué podría ser mejor...

La sección central parece un poco vacía. Incluso la venta adicional parece colocada de forma extraña. Mejoraríamos un poco el diseño para que pareciera más uniforme.

¿Te inspira alguna de estas ideas?

Conclusión

Si utiliza WooCommerce o un tema como Astra a cree su tienda en línea...has empezado con buen pie.

Pero su viaje no termina ahí.

El comercio electrónico es una maratón, no una carrera de velocidad, e implica analizar continuamente la tienda y las existencias para ver qué funciona y qué no.

Siga los consejos de esta página y estará preparado para el éxito. Más ventas, más beneficios y una tienda con más éxito. ¿Quién no quiere eso?

¿Tiene algún consejo sobre el diseño de páginas de pago que compartir? ¿Alguna historia que contar? Ya sabes lo que tienes que hacer...

Preguntas frecuentes sobre el diseño de la caja

¿Tiene preguntas sobre las páginas de pago o el diseño? Tenemos respuestas.

¿Cómo puedo crear una página de pago?

Puede crear una página de pago con WordPress, WooCommerce o SureCart. las plataformas de comercio electrónico vienen con una página de pago ya hecha. Puedes personalizarla para adaptarla a tus necesidades o utilizar bloques para crear una desde cero de la misma forma que crearías cualquier página. Esta guía le muestra cómo crear o personalizar una página de pago.

¿Cómo puedo optimizar mi página de pago?

Puedes optimizar tu página de pago siguiendo los consejos de este post. Mantenga el mismo diseño, utilice el mínimo de campos de formulario y reduzca la página al máximo. Quieres que haya el menor número posible de barreras entre el cliente y el botón de comprar ahora. Hazlo y tendrás una página de pago optimizada.

¿Cuál es la diferencia entre una página de ventas y una página de pago?

Las páginas de venta son mucho más largas y tienen que vender el producto. La página de pago cierra el trato y convierte el deseo en acción. Una página de ventas debe promocionar el producto y convencer al cliente para que lo compre. La página de pago le permite comprar.

¿Cómo puedo facilitar el pago?

Puede facilitar el proceso de pago teniendo en cuenta el recorrido del cliente. Utilice los pasos mínimos, ofrezca varios tipos de pago, distintas opciones de entrega, indique al cliente cuándo puede esperar su producto y cuánto costará todo. Por último, añada un botón de compra clara para que el cliente sepa exactamente qué hacer. Si hace todo esto, el proceso de compra será de lo más sencillo.

¿Qué es la tasa de abandono en caja?

La tasa de abandono de compras, también llamada tasa de abandono de carritos, es el porcentaje de ventas que se pierde cuando los clientes añaden artículos a su carrito pero no los compran. Algo más del 70% de todas las compras online se abandonan, por eso son tan importantes las herramientas de optimización del checkout y de abandono del carrito.