Una página de producto de la caja de compra personalizada para un tostador de café

Brew es un tostador de café de especialidad y una tienda de demostración que creamos para mostrar cómo puede ser una página de producto enfocada en la conversión en Shopify. El objetivo que nos propusimos fue sencillo: tomar una página de producto limpia pero convencional y convertirla en una que se encargue de vender, respondiendo justo al lado del botón a todo lo que un comprador de café indeciso pueda preguntarse.

Nota de transparencia: Brew es una tienda de demostración. La valoración, el número de reseñas, la reseña destacada y el texto de la garantía son textos de muestra, y no afirmamos haber obtenido resultados medibles de conversión. Este artículo trata sobre el diseño y la construcción, y por qué está cada elemento.

Antes (izquierda) y después (derecha): el mismo producto, Supremo colombiano, en un teléfono.

El punto de partida: una página que solo pide la venta

La página de producto original tenía los elementos habituales: un título, un precio, un campo de cantidad, un botón de Añadir al carrito y un selector de tamaño sencillo, seguidos de la descripción y una fila de recomendaciones. Funciona, pero deja que el comprador tenga que responder a todas las preguntas por su cuenta:

• ¿Es bueno este café y quién lo dice?
• ¿A qué sabrá y qué tan oscuro es el tueste?
• ¿Qué tamaño ofrece una mejor oferta?
• ¿Puedo suscribirme y cancelar?
• ¿Cuándo llegará y qué pasa si no me gusta?

Antes: precio, cantidad, Añadir al carrito y un selector de tamaño sencillo.

Lo que cambiamos

En lugar de acumular aplicaciones en la página, creamos un bloque de tema personalizado: un único bloque de compra que reemplaza los antiguos botones de compra, el selector de paquetes y el selector de variantes. Está organizado en el orden en que un comprador toma la decisión.

1. Prueba social y características del producto, por encima del pliegue

• Valoración con estrellas y número de reseñas justo debajo del título, con un enlace a las reseñas.
• Etiquetas de notas de cata (caramelo, avellana tostada, manzana roja), extraídas de un metacampos del producto.
• Un medidor de tueste hecho con granos de café, con el nombre del tueste y el origen a su lado, para que se entienda la intensidad de un vistazo.

Después: valoración, notas de cata, nivel de tueste y tarjetas de tamaño en la primera pantalla.

2. Tarjetas de tamaño que hacen obvia la mejor oferta

Los sencillos botones de tamaño se convirtieron en tarjetas. Cada una muestra el precio, el precio de comparación y el precio por 100 g, para que quede claro que la bolsa más grande ofrece una mejor relación calidad-precio. El tamaño intermedio está etiquetado como Más popular y el más grande como Mejor relación calidad-precio, lo que orienta al comprador hacia un pedido mayor.

3. Suscríbete y ahorra, preseleccionado

• Una tarjeta de Suscríbete y ahorra con una etiqueta de ahorro del 10 %, tres ventajas breves (envío gratis, omite o cancela en cualquier momento, acceso anticipado) y un menú desplegable de frecuencia de entrega, basada en los planes de venta de Shopify.
• Una opción de Compra única justo debajo, para que nadie se sienta obligado.
• El precio en cada tarjeta y en el botón se actualiza en tiempo real según el tamaño y la opción de compra.

4. Urgencia sutil y objetivo de envío gratis

• Un mensaje de Solo quedan X de este tamaño que aparece únicamente cuando se rastrea inventario real y es bajo, nunca inventado.
• Una barra de progreso para el envío gratis. En las compras únicas, aumenta hasta el umbral a medida que crece la cantidad, y en las suscripciones muestra el estado desbloqueado.
• Un botón de Añadir al carrito con un selector de cantidad que muestra el total en tiempo real y cambia a Suscríbete y ahorra cuando se selecciona esa opción.

Después: opciones de compra, mensaje de stock, progreso de envío gratis y el botón de compra.

5. Tranquilidad justo debajo del botón

• Una estimación de entrega con una fecha límite para realizar el pedido.
• Una garantía de 30 días y una promesa de frescura.
• Una reseña destacada de un cliente.
• Acordeones para la descripción, cómo preparar el café y envíos y devoluciones, para que la página se mantenga corta en un teléfono mientras las respuestas están a un solo toque de distancia.

Después: promesa de entrega, garantía, una reseña y acordeones ordenados.

6. Una barra fija de añadir al carrito

Una vez que el botón principal se desplaza fuera de la vista, aparece una barra delgada con el nombre del producto, la opción seleccionada y el precio, para que el botón de compra nunca esté a más de un pulgar de distancia.

Construido para ser robusto, no solo bonito

• Sin dependencias frágiles. El script del bloque de compra no depende de ninguna biblioteca externa para renderizarse. Si algo está bloqueado por una extensión del navegador o una red lenta, el precio, los tamaños, las opciones de suscripción y la barra de envío siguen funcionando.
• Comportamiento nativo del carrito. Añadir al carrito utiliza los propios eventos del carrito del tema, por lo que el cajón del carrito se abre exactamente igual que en cualquier otra parte de la tienda.
• Editable por el comerciante. La valoración, el número de reseñas, la reseña destacada, el texto de la garantía, el umbral de envío gratis y los colores son todos ajustes del editor de temas. Las notas de cata, el nivel de tueste y el origen son metacampos del producto.
• Basado en datos. Ocho cafés tienen cada uno tres tamaños, precios de comparación y un plan de Suscríbete y ahorra, para que todas las páginas de producto reciban la misma experiencia mejorada.

Antes y después de un vistazo

La página completa para móvil, antes (izquierda) y después (derecha).

Lo que muestra esta demostración, y lo que no

Cada elemento anterior existe para responder a una pregunta que el comprador de otro modo dejaría para averiguarla: prueba social, claridad sobre el valor, una forma sin riesgo de suscribirse y tranquilidad sobre la entrega y las devoluciones. Ese es el patrón que aplicamos a tiendas reales. Esta demostración no incluye cifras de ingresos antes y después, porque no tiene tráfico real, y preferimos decirlo antes que inventarlas. En una tienda activa, combinaríamos este tipo de reconstrucción con una prueba A/B frente a la página original para medir el incremento, no asumirlo.

¿Quieres esto en tu tienda?

Si tus páginas de producto hacen lo mínimo y te gustaría que trabajaran más, podemos auditarlas y crear algo similar para tus productos, marca y clientes. Reserva una llamada y analizaremos juntos tu página de producto más vendida.