El usuario no compra en la home. Compra en la ficha. Ahí decide si se fía de la tela, del talle, del plazo y de ti. Si esa página es un collage de bloques de plantilla —galería minúscula, precio escondido, variantes que recargan, reviews a 4.000 píxeles— no tienes un problema de tráfico. Tienes un problema de diseño.
Las fichas de producto ecommerce no son «poner la foto grande y el botón». Son un argumento de venta ordenado: qué es, para quién, cuánto, en qué opción, con qué prueba y qué pasa si no encaja. Cada hueco vacío es una duda. Cada duda es una pestaña a la competencia.
En Truman diseñamos esa página como parte del diseño UX/UI, no como un leftover del tema. Este artículo va a la jerarquía que sí vende, a lo que las plantillas suelen romper, y a cómo lo hemos trabajado en tiendas como Ceylan y Base85.
La jerarquía de las fichas de producto ecommerce que sí venden
Arriba, sin scroll de más, el usuario tiene que ver: de qué producto se trata, el precio con impuestos claros, la disponibilidad, las variantes y el botón. No el storytelling de marca. No un vídeo de 40 segundos con autoplay. Eso puede vivir más abajo. La decisión de «¿sigo?» es de tres segundos y es visual.
Justo debajo o al lado, según viewport: envío, devolución, y una línea de prueba —nota, número de reseñas, o un extracto corto. Baymard documenta que el 43 % de los sitios no pone información de envío —incluido el coste— en la ficha, y que el 64 % de los usuarios la busca ahí. Si tu plazo está en una página de «envíos», has escondido el argumento.
43%
de webs no muestran coste o condiciones de envío en la ficha, aunque 6 de cada 10 usuarios lo buscan en esa misma página.
Baymard Institute, estadísticas de UX en fichas de producto
El cuerpo de la ficha no es un muro de SEO. Es bloques con título: para quién es, materiales, medidas, cuidado, qué incluye. Tabs horizontales esconden contenido. En tests de Baymard, una parte de los usuarios ni siquiera abre la pestaña donde está lo que buscan. Acordeones en móvil, bloques visibles en desktop. El texto largo se escanea; el H3 trabaja.
Fotos, zoom y lo que las plantillas estropean
Una plantilla típica de Shopify o WooCommerce te da un carrusel de 600 px, thumbnails que no se leen y un zoom que pixeliza. Baymard midió que el 25 % de los sitios grandes no ofrece resolución o zoom suficientes ni en sus productos estrella. En moda y hogar eso es abandono: no se toca el producto, se inspecciona.
Lo que pedimos en un diseño a medida: imagen principal grande, zoom que aguante el detalle (costura, etiqueta, textura), fotos de contexto y al menos una de escala. El 47 % de los sitios que Baymard revisó no da una imagen «a escala». El usuario no sabe si el jarrón es de 20 cm o de 50. Eso no se arregla con un número en una tabla a 1.200 px del fold.
Zoom real, no lupa de juguete
Foto de escala o en uso
Qué incluye, sin ambigüedad
Otro clásico de plantilla: la galería se resetea al cambiar de color, o el alt de las imágenes es «IMG_4032». El primero pierde orientación. El segundo pierde SEO y accesibilidad. En Ceylan el catálogo pide fotos de producto que se entiendan en móvil, no un moodboard. En Base85, la ficha tiene que sostener una decisión de compra con menos teatro y más dato. El diseño sigue al tipo de producto, no al demo del tema.
Variantes, stock y el botón que no miente
Talla y color se eligen antes de añadir. Si una combinación no existe, se ve antes: tachada, deshabilitada, con alternativa. Mostrar «añadir» y fallar después es el error que más rabia genera. El precio debe actualizarse con la variante —packs, extras, personalización— en el mismo bloque, no en un recálculo que el usuario no ve.
| Elemento | Plantilla típica | Ficha que vende |
|---|---|---|
| Precio e impuestos | A veces en checkout | Visibles junto al CTA |
| Variante agotada | Error al añadir | Deshabilitada antes |
| Envío y devolución | Footer o PDF | En el bloque de compra |
| Reviews | Solo al final | Resumen arriba + detalle abajo |
| Stock | «Disponible» eterno | Unidades o plazo real |
| Descripción | Tab único de relleno | Bloques por pregunta |
Si el usuario elige mal y el carrito se llena de la talla incorrecta, no es un fallo de checkout: es un fallo de ficha. La guía de talla tiene que estar a un clic del selector, no en un menú de ayuda. Y si vendes online desde València con envíos a toda España, el plazo no puede ser «2-5 días» genérico cuando un SKU sale de otro almacén. Mentir en la ficha es abandonar más tarde, con más cabreo. Eso conecta con el carrito abandonado: una parte se pierde aquí, no en el pago.
Prueba social y el copy que no es un folleto
Las estrellas sin número de reseñas no valen. Un 5,0 con dos opiniones parece trampa. Un 4,3 con 180 y un extracto («la tela pilla, talla grande») sí mueve. El extracto va arriba; el listado, abajo, filtrable. No hagas scroll de 40 reseñas entre el botón y los gastos de envío.
El copy de ficha responde dudas, no adjetivos. «Algodón 220 g, encoge un 3 % si lo secas a máquina» vende más que «calidad premium». Si 1 de cada 10 sitios grandes tiene descripciones insuficientes —Baymard otra vez— el listón no está alto. Superarlo es concreto: medidas, composición, incompatibilidad, para quién no es el producto. Decir para quién no es reduce devoluciones.
Si quitas la marca y el mood, ¿el usuario sabría qué está comprando, en qué talla y qué pasa si no le vale? Si la respuesta es no, la ficha todavía no está diseñada.
Los mismos patrones se repiten en muchas tiendas online de València que heredan el tema y no tocan la PDP. El catálogo se ve «bonito» en el preview y no aguanta una compra con el dedo en el móvil, en el metro, comparando dos URLs. Ahí se ve si hay diseño o hay plantilla. Amplíamos ese inventario de fallos en errores de diseño en ecommerce.
Móvil, velocidad y el resto de la página
En móvil la galería es el 40 % del primer pantallazo. Si pesa 4 MB, el botón llega tarde. Imágenes en tamaño real, lazy en las que no se ven, y el bloque de compra sticky cuando el usuario ya ha bajado a leer. Sticky mal hecho tapa el selector de talla: peor que no tenerlo.
Relacionados y «completar el look» van después de la decisión, no antes. Si los pones en medio de la descripción, interrumpes. Cross-sell sí, cuando el producto ya está entendido. Y el stock de esos relacionados tiene que ser real: un «también te gusta» agotado enseña descuido.
Tip técnico: un SKU, una URL, un precio visible
Cada variante indexable que merezca tráfico propio puede tener URL y canonical bien pensados. Las que solo cambian talla suelen vivir bajo la misma ficha, con el estado en el selector. El precio en JSON-LD tiene que coincidir con el que se ve. Si el marked-up dice 49 y la página 59, no solo mientes al usuario: liás a Google. Y el botón no se llama «comprar» si aún faltan talla o color: se llama «elige talla» hasta que pueda añadir. Menos errores, menos rabia.
La ficha no es una galería con un botón. Es el único momento en el que el producto tiene que defenderse sin un dependiente. Si la plantilla no deja enseñar talla, plazo y foto de verdad, no es un tema. Es un techo de ventas.
Antes de dar por buena una ficha, verifica esto
- ¿Precio, impuestos, variantes y CTA se entienden sin hacer scroll en móvil?
- ¿El zoom permite ver costura, etiqueta o material, no solo el recorte de campaña?
- ¿Hay foto de escala o de contexto, no solo still de estudio?
- ¿Las combinaciones agotadas se ven antes de añadir al carrito?
- ¿Envío y devolución están en el bloque de compra, en lenguaje claro?
- ¿Las reviews tienen resumen arriba y el detalle no se interpone al CTA?
- ¿La guía de talla o medidas está a un toque del selector?
- ¿El precio de la variante y el de schema coinciden con lo que se cobra?
Preguntas frecuentes sobre fichas de producto en ecommerce
¿Qué debe incluir una ficha de producto para vender?
Lo que el usuario no puede tocar: fotos con zoom, precio claro, variantes honestas, envío, devolución, medidas o talla, y una prueba social visible. El resto —marca, lookbook, relacionados— sostiene, no sustituye. Si falta un dato de decisión, la ficha está incompleta.
¿Por qué las plantillas de ecommerce suelen fallar en la ficha?
Porque están hechas para un producto genérico y un merchant que no toca código. Galería débil, tabs que esconden specs, variantes que recargan, envíos en el footer. Funcionan de demo. No funcionan cuando tu catálogo tiene excepciones.
¿Cuántas fotos hace falta en una ficha de producto?
Las suficientes para inspeccionar, no un número mágico. Un básico de moda: frente, espalda, detalle, tejido, talla en cuerpo. Un mueble: ángulos, escala en habitación, acabado. Si con cinco no se entiende el tamaño, añade escala, no otra foto de mood.
¿Cómo se diseña la ficha en móvil sin perder conversión?
Galería usable, bloque de compra compacto, sticky que no tape selectores, acordeones para el detalle, y nada de popups encima del CTA. El pulgar tiene que elegir talla y añadir sin cazar un botón de 32 px pegado al chat.
