Diseño de páginas de producto para ecommerce: anatomía y ejemplos
Diseño de páginas de producto para ecommerce
Diseño de página de producto: anatomía, ejemplos en vivo y checklist | We.Inc
La anatomía de una página de producto de ecommerce con diseños editables en vivo, una lista de comprobación y datos estructurados Product que cumplen los requisitos actuales de Google.
Una página de producto tiene que responder tres cosas antes del botón de compra: qué es, si me sirve y qué pasa después de pagar. En escritorio, coloca fotos claras, el nombre, el precio y las opciones en la parte visible sin desplazarte; debajo, la entrega, las devoluciones y los detalles, y marca el precio y la disponibilidad con datos estructurados Product.
Anatomía de una página de producto, de arriba abajo
Parte
Función
Fallo habitual
Galería
Muestra el artículo desde todos los ángulos, en uso y a escala
Una sola foto de estudio
Nombre y precio
Confirma que es lo correcto y a un coste conocido
Precio oculto hasta el pago
Opciones
Talla, color y cantidad con el estado de stock claro
Agotado descubierto después de elegir
Añadir al carrito
La única acción principal
Botones rivales con el mismo peso
Entrega y devoluciones
Elimina la preocupación posterior a la compra
Política solo en el pie de página
Detalles y especificaciones
Materiales, dimensiones, cuidados
Muro de texto sin títulos
Preguntas
Respuestas a lo que frena la decisión
Ausentes por completo
En lugar de capturas de otras tiendas, esta guía construye parte por parte, en HTML y CSS sencillos, la página de producto de un taller de cerámica inventado. Usa la lista de comprobación para puntuar tu propia página y copia los datos estructurados que cumplen las reglas actuales de Google.
Puntúa tu página de producto actual con la lista de comprobación y mira qué partes faltan.
Abre los ejemplos de diseño en vivo y edítalos con los datos de tu propio producto.
Copia el JSON-LD de Product y rellénalo con el mismo precio y stock que muestra la página.
Prueba el marcado en la Prueba de resultados enriquecidos de Google antes de publicar.
Escribe la fecha o el plazo de entrega cerca del botón, no solo el coste. La gente se organiza según cuándo llega.
Muestra el estado de stock de cada opción antes de elegirla, para que nadie escoja una talla agotada.
Usa dimensiones reales y una foto con algo conocido para dar escala, como una mano o una taza.
Usa una etiqueta de botón concreta e igual en todas partes, como Añadir a la cesta.
Los datos estructurados deben coincidir con la página. Un precio en el marcado distinto al de la pantalla es motivo para que Google lo ignore.
Preguntas frecuentes
¿Qué debe verse sin desplazarse en una página de producto?
En escritorio: la foto principal, el nombre del producto, el precio, los selectores de opciones y el botón de añadir al carrito. En el móvil la foto suele ocupar la primera pantalla, así que asegúrate de que el nombre y el precio vayan justo después, con el botón muy cerca.
¿Qué datos estructurados necesita una página de producto?
Para las páginas donde se puede comprar, la documentación de fichas de comerciante de Google exige Product con name, image y offers, y un Offer con un precio mayor que cero y un priceCurrency. Se recomiendan la disponibilidad, los detalles de envío, la política de devoluciones, la marca y el GTIN.
¿Qué diferencia hay entre los fragmentos de producto y las fichas de comerciante?
Los fragmentos de producto son para páginas donde no se puede comprar directamente, como las reseñas, y necesitan un nombre más review, aggregateRating u offers. Las fichas de comerciante son para páginas que venden el producto y necesitan el precio y la moneda.
¿Debo mostrar reseñas en las páginas de producto?
Si las tienes reales, sí, cerca del precio o debajo de los detalles. Nunca inventes reseñas ni valoraciones, y añade el marcado aggregateRating solo cuando la valoración se muestre en la página y venga de clientes reales.
Las fotos hacen la mayor parte de la venta
Planifica la galería como un conjunto: frente, parte trasera o lateral, primer plano del material, el artículo en uso y una foto con algo que dé escala. Cada imagen necesita un texto alternativo que describa lo que muestra esa vista.
Reserva el espacio de la galería con width y height o aspect-ratio, para que la página no salte mientras cargan las imágenes.
El bloque de compra
Agrupa el precio, las opciones, la cantidad y el botón, con el resumen de entrega y devoluciones justo debajo. Ese único bloque debería responder la mayoría de las preguntas sin desplazarse.
Las opciones desactivadas necesitan algo más que texto gris. Añade la palabra Agotado a la etiqueta para que el estado quede claro para todos, incluidas las personas que usan lector de pantalla.
Detalles que reducen las devoluciones
Las dimensiones, los materiales, las instrucciones de cuidado y el contenido de la caja van en secciones fáciles de recorrer y con títulos. Una breve nota sobre la talla o el ajuste evita muchos pedidos equivocados.
Responde en la propia página las dos o tres preguntas que más hacen los clientes y enlaza a las preguntas frecuentes completas para el resto.
Ejemplos de diseño de página de producto
Página de producto a dos columnas con galería y bloque de compra
Galería a la izquierda y bloque de compra a la derecha en pantallas anchas; en el móvil se apilan. La talla agotada lo dice con palabras, no solo en gris.
Detalles en secciones con título
Las secciones cortas con título se recorren mejor que una descripción larga. La primera está abierta porque responde la pregunta más habitual.
Datos estructurados Product para una página que vende
name, image y offers con price y priceCurrency son los campos obligatorios de las fichas de comerciante; availability y el resto son recomendados. Los valores deben coincidir con la página.
Al menos cuatro fotos, incluida una en uso y una que muestre la escala
Cada imagen tiene un texto alternativo que describe esa vista
Precio visible junto al nombre del producto
Estado de stock visible en cada opción antes de elegirla
Un único botón principal de añadir al carrito, bien claro
Coste y plazo de entrega visibles cerca del botón
Política de devoluciones resumida cerca del botón
Dimensiones, materiales y cuidados en secciones con título
Las preguntas más habituales respondidas en la página
Funciona a 375 px de ancho sin desplazamiento lateral
Los datos estructurados Product coinciden con el precio y el stock visibles
Solo reseñas reales, si se muestra alguna
Lista de comprobación de la página de producto
Marca lo que tu página de producto ya hace. La puntuación muestra lo que queda por corregir; no se guarda ni se envía nada.