40+ Ejemplos de mejores diseños de página de carrito de compras

Con la ayuda de esta selección queríamos analizar cómo los minoristas en línea tratan el diseño de sus páginas de carrito de compras. Dichas páginas tienen el papel clave en el proceso de compra, aún con eso, a menudo parece que se crean sin mucha preocupación. De verdad, es muy difícil diseñar una página del carrito de compras exitosa.

Lo ideal sería incluir un resumen de producto, un campo para códigos de promoción, varias opciones de pago y métodos de envío, precios finales, la política de privacidad y devolución, un par de productos complementarios, opciones para continuar comprando o proceder al pago y muchas otras cosas importantes en la página del carrito de compras.

De hecho, el éxito futuro de tu trabajo depende directamente de tu capacidad de llevar a los clientes a la etapa de pago.


El objetivo principal de toda página del carrito de compras es guiar al cliente hacia el pago, pero ¿cómo hacerlo de manera más efectiva?

Los ejemplos de hoy revelan que los minoristas en línea en su mayoría:

  • resaltan el botón de pago con color diferente (26 veces);
  • a veces incrustan flechas visualmente complementarias (4 veces);
  • o añaden iconos del carrito de compras (1 vez) a la llamada a la acción textual.

Además, los textos en el botón de pago pueden ser diferentes:

  • en la mayoría de los casos vemos la palabra 'checkout' (pagar) - 24 veces;
  • otras palabras populares son 'proceed to checkout' (proceder al pago) - 10 veces;
  • 'proceed to purchase' (proceder a la compra) - 2 veces;
  • 'proceed with your order' (proceder con su pedido) - 1 vez;
  • 'go to checkout' (ir al pago) - 1 vez;
  • ‘proceed’ (proceder) - 2 veces;
  • ‘check out now’ (pagar ahora) - 2 veces;
  • ‘begin checkout’ (comenzar a pagar) - 1 vez.

Los sellos de seguridad se hicieron particularmente populares ya que aumentan la confianza y la credibilidad de una tienda para el 50% de clientes potenciales. Según el estudio realizado por Baymard, Norton parece ser el más confiable (35.6%), y McAffee es el segundo popular (22.9%). Con todo eso, sólo 12 tiendas de nuestra lista usan dichos sellos.

Cuando los usuarios deciden realizar el pago, quieren ver una lista final de todos los artículos del pedido, así como por lo menos un par de opciones de pago. Puedes ver que no todas las páginas del carrito de compras en esta lista muestran los logotipos de tarjetas de crédito al lado de opciones de pago; sin embargo, estas imágenes son muy convenientes. Además, todo carrito de compras bueno debería tener sellos de seguridad (hay pocos ejemplos aquí) para garantizar transacciones seguras y estándares altos de seguridad.

Ahora puedes obtener algunas ideas útiles al examinar cómo se crean otros carritos de compras. Te ayudamos un poco con estos 40 ejemplos de diseños eficientes de carritos de compras. No hay dudas de que ofrecen una experiencia de compra agradable a clientes.


1. Yoox.com


2. AE.com


3. Store.Nike.com


4. FaucetFace.com


5. DeathWishCoffee.com


6. Store.Apple.com


7. Gucci.com


8. Skinny-Teatox.com


9. SurfDome.com


10. RalphLauren.com


11. MarcJacobs.com


12. Shop.AcneStudios.com


13. Shop.Guess.com


14. JuicyCouture.com


15. Shop.Puma.com


16. TopShop.com


17. NoonCopenhagen.com


18. FlatSpot.com


19. UO.com.au


20. US.Burberry.com


21. Store.DolceGabbana.com


22. Triangl.com


23. NeedaBump.com


24. ShopAdidas.com


25. Crocs.com


26. Case-Mate.com


27. JCrew.com


28. CardinalCase.com


29. Zappos.com


30. Shop.Mango.com


31. NeimanMarcus.com


32. Fossil.com


33. Tiffany.com


34. US.Faconnable-Store.com


35. Store-US.HugoBoss.com


36. USA.Tommy.com


37. ShopBop.com


38. FredPerry.com


39. CharlotteRusse.com


40. ShopAdam.com


41. BobbiBrownCosmetics.com


42. TheGreetingFarm.com


Todos los aspectos del diseño del carrito de compras son importantes. Aquí está nuestra lista de comprobación que te ayudará a analizar tu página.

1. Resumen de producto: debería haber una imagen de producto, su nombre, descripciones adicionales (tamaño, color, etc.), una cantidad de artículos, un precio, una opción para eliminar el artículo del carrito de compras y para cambiar sus características, como tamaño, color o precio.

2. Métodos de envío: se debería no sólo enumerar ellos, sino mencionar la diferencia entre las opciones e indicar sus precios.

3. Campo para código promocional: si permites usar códigos promocionales, asegúrate de crear una sección especial para ellos en tu página del carrito de compras. Como el código promocional reduce el precio, eso influirá positivamente en la decisión del cliente.

4. Precio final: debería incluir el costo de todos los productos en el carrito + el precio del envío. Los clientes deberían ver la cantidad total de dinero que necesitan pagar por el pedido para evitar sorpresas desagradables.

5. Múltiples opciones de pago: si aceptas diferentes métodos de pago, debería enumerar todos ellos. Idealmente deberías ofrecer por lo menos dos opciones de pago que son las más populares entre tus clientes. Además, es mejor mostrar iconos al lado de tus opciones de pago (icono de PayPal, iconos de tarjetas de crédito). De esta manera, los clientes pueden estar seguros de que tiene una tienda confiable y pueden pagar sin problemas.

6. Sellos de seguridad: si tienes The VeriSign Seal o McAfee Secure Seal, deberías mostrarlo en tu página del carrito de compras. Esto sería una señal adicional de que los clientes pueden confiar en ti. Una alternativa gratuita a los sellos de pago es colocar un botón con un texto similar a 'Proceder al pago seguro'.

7. Política de privacidad y devolución: no te olvides de incluir los enlaces a estas páginas. También es preferible que se abran como ventanas emergentes (no como páginas separadas en nuevas pestañas) para que el cliente no abandone la página sin leerla.

8. Productos complementarios: con ofrecer productos complementarios puedes aumentar el 'total de transacción' promedio de tus ventas. Sin embargo, recuerda que para tener el resultado bueno, los productos deben ser realmente complementarios, no los que son menos populares en tu tienda. La mejor manera es ofrecer un descuento en un producto complementario. Otro punto importante es que el precio del producto complementario debería ser menos del 50% del precio del producto en el carrito.

9. Continuar comprando: este es un enlace muy importante para incluir ya que les da a los clientes la oportunidad de seguir llenando sus carritos de compras con más productos.

10. Proceder al pago: este es el botón más importante en la página del carrito de compras. Tu tarea es atraer la atención adicional a ella. ¿Cómo hacerlo? Puedes resaltar el botón con algún color contrastante y hacerlo más grande. Es mejor optar por una llamada a la acción más original, por ejemplo, 'pagar ahora' o 'proceder al pago' es mucho mejor que 'pagar'.

Fuente: "40+ Best Shopping Cart Page Design Templates" por Lilian Rigo


Diane Parks

Diane trabja como una redactora del blog MonsterPost España desde hace muchos años. No imagina su vida sin escribir, aprender algo nuevo cada día, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. ¡Síguela en Facebook!