La ficha de producto perfecta en un ecommerce: foto, texto, precio y botón

Si tuviera que elegir una sola página de una tienda online para dedicarle tiempo, elegiría la ficha de producto. La home inspira y las categorías ayudan a encontrar, pero la compra se decide en la ficha. Es el mostrador de la tienda: el sitio donde alguien coge el producto, le da la vuelta, pregunta por la talla y mira el precio antes de decidirse.

En el estudio solemos revisar fichas que tienen una foto preciosa y un botón grande, y aun así no venden como deberían. Casi nunca falta diseño. Lo que suele faltar es una respuesta: cuánto tarda en llegar, si se puede devolver, qué mide exactamente, cómo queda puesto. Cada duda sin resolver es una pausa, y en una tienda online muchas pausas terminan en otra pestaña.

Esta guía recorre la ficha de producto pieza a pieza, en el orden en que la mira quien va a comprar, con criterios concretos para cada parte.

01Cómo se lee una ficha de producto

Una persona que llega a una ficha suele hacer tres comprobaciones casi seguidas: si es lo que buscaba (foto y título), si se lo puede permitir (precio) y si se lo puede llevar (variante disponible, envío, botón). Solo cuando esas tres están resueltas baja a leer detalles, opiniones y letra pequeña.

De ahí sale la estructura clásica, que funciona porque sigue ese orden mental:

1. 01Zona de decisión (primer pantallazo): galería a la izquierda en escritorio, columna de compra a la derecha con título, precio, valoración, variantes, cantidad, botón y la información de envío más importante.
2. 02Zona de convicción: descripción, características, medidas, materiales, modo de uso.
3. 03Zona de confianza: reseñas, preguntas frecuentes, garantías.
4. 04Zona de continuidad: productos complementarios o similares, y camino de vuelta a la categoría.

En móvil, el orden se apila: galería, título y precio, variantes y botón, y a continuación el resto. La galería no debería ocupar más de un 60 o 70 % de la altura de la pantalla, para que título y precio asomen sin hacer scroll.

02La galería: lo que sustituye al tacto

Como en una tienda online nadie puede tocar el producto, las imágenes hacen ese trabajo. Una buena galería responde a las preguntas que uno se haría con el producto en la mano.

Para la mayoría de productos, esta secuencia funciona bien:

• →Foto principal sobre fondo limpio, la misma que aparece en la categoría, para que la persona reconozca lo que ha pulsado.
• →Otros ángulos: lateral, trasera, interior si lo tiene.
• →Detalle de material: textura, acabado, costura, cierre.
• →Producto en uso o en contexto: puesto, en una mesa, en una cocina.
• →Referencia de tamaño: en una mano, junto a un objeto conocido, o con las medidas dibujadas sobre la foto.
• →Vídeo corto si el producto tiene movimiento, caída o un mecanismo que merece verse.

En escritorio funcionan bien tanto las miniaturas verticales a un lado como una columna de imágenes grandes que se recorre con el scroll mientras la columna de compra queda fija. En móvil, un carrusel horizontal con indicador de posición y zoom con gesto de pellizco es lo que la gente espera. La primera imagen se carga con prioridad, porque casi siempre es el elemento que marca el LCP (el tiempo de pintado principal, que Google quiere por debajo de 2,5 segundos).

Si cada variante de color tiene sus fotos, al elegir el color la galería debe cambiar a las imágenes de ese color. Parece obvio, pero es una de las cosas que más dudas genera cuando falla. Para preparar luz, fondo y ángulos de forma consistente, en la guía de fotografía de producto contamos todo el proceso.

03Título, precio y variantes: la columna de compra

Un título que dice qué es

El título funciona mejor cuando nombra el producto como lo buscaría alguien: tipo de producto, rasgo diferencial y, si aplica, marca o colección. «Jarra de cerámica esmaltada 1 l, azul cobalto» se entiende mejor que «Jarra Mediterránea», aunque el nombre de la colección pueda aparecer encima, en un cuerpo más pequeño.

El precio, claro y completo

El precio va justo debajo del título, con un tamaño que destaque sin gritar. Algunos criterios que aplicamos:

• →Precio final con impuestos incluidos, que es lo que la normativa de consumo exige mostrar en España a clientes particulares.
• →Si hay descuento, precio anterior tachado al lado. Desde la transposición de la directiva europea Ómnibus, el precio anterior de referencia tiene que ser el más bajo aplicado en los 30 días previos a la rebaja.
• →Si el precio cambia con la variante, se actualiza al instante al elegirla.
• →Si hay pago aplazado o precio por unidad (por kilo, por litro), se muestra como información secundaria debajo.

En la guía de psicología del precio hablamos de cómo influyen las anclas y el formato de los números; aquí basta con recordar que la claridad siempre suma.

Variantes que se eligen sin pensar

Talla, color, capacidad, acabado. La forma de presentarlas cambia mucho la experiencia:

• →Botones visibles en lugar de desplegables cuando hay pocas opciones (hasta ocho o diez). Se ven todas de un vistazo y se eligen con un toque.
• →Muestras de color reales (una pequeña foto del tejido o del acabado) mejor que círculos de color plano, que a menudo no se parecen al producto.
• →Opciones agotadas visibles pero marcadas, tachadas o atenuadas, con aviso de reposición.
• →Ayuda contextual al lado: «Guía de tallas», «¿Qué capacidad necesito?».
• →Una opción preseleccionada solo cuando tiene sentido (un único color, por ejemplo). Con las tallas es mejor que la persona elija activamente.

Cada botón de variante debería tener un área táctil generosa. WCAG 2.2 fija como mínimo 24×24 px; nosotros diseñamos con 44 px de alto como referencia, que es lo que recomienda Apple para pantallas táctiles.

04El botón de compra y lo que lo rodea

El botón de añadir a la cesta es el elemento con más peso visual de la columna de compra: el color de acción de la marca, ancho completo de la columna en móvil y un texto que diga lo que hace («Añadir a la cesta», «Comprar ahora»). Si falta elegir talla al pulsarlo, lo que funciona es señalar el selector con un mensaje amable en lugar de deshabilitar el botón sin explicación.

Justo debajo del botón, en dos o tres líneas cortas, va la información que más tranquiliza:

• →Plazo de entrega estimado («Recíbelo entre el jueves y el viernes»), mejor que «envío en 24-72 h».
• →Coste de envío o umbral de envío gratuito.
• →Devoluciones: plazo y si son gratuitas.
• →Métodos de pago destacados, si la tienda acepta alguno muy usado en su público (Bizum, Apple Pay, Google Pay).

Al pulsar el botón, la persona necesita una confirmación clara: un panel lateral con la cesta, un mensaje visible o un contador que cambia con una pequeña animación. Lo que mejor funciona en la mayoría de tiendas es el panel lateral, porque confirma, muestra el subtotal y ofrece dos caminos (seguir comprando o finalizar) sin sacar a nadie de la página.

En móvil, una barra fija inferior con el precio y el botón, que aparece cuando el botón original sale de pantalla, mantiene la acción siempre a mano.

05Descripción, especificaciones y medidas

Por debajo del primer pantallazo empieza la parte que lee quien ya está interesado y quiere confirmar. Aquí ayuda separar dos tipos de texto:

• →Descripción: dos o tres párrafos breves que cuentan para qué sirve, qué lo hace especial y cómo se usa. Es el texto de marca, el que transmite. El cómo escribirlo da para una guía entera, y la tendremos dedicada al copy de fichas.
• →Especificaciones: una lista o tabla con datos objetivos. Medidas en centímetros, peso, materiales, capacidad, compatibilidades, cuidados, origen, garantía.

En móvil, lo más cómodo son desplegables con títulos claros (Descripción, Medidas, Materiales y cuidados, Envíos y devoluciones), con el primero abierto por defecto. En escritorio se pueden mostrar abiertos si no son muy largos.

Un recurso que resuelve muchas dudas en muebles, bolsos, ropa o electrodomésticos es un pequeño dibujo técnico con las cotas principales. Una línea con «alto 82 cm» sobre el contorno del producto se entiende antes que una tabla.

06Reseñas, garantías y prueba social

Las opiniones de otros compradores son, para mucha gente, el último empujón. Para que cumplan esa función:

• →La valoración media y el número de opiniones aparecen junto al título, enlazadas a la sección de reseñas.
• →Las reseñas se pueden ordenar (más recientes, más útiles) y filtrar por puntuación.
• →Las fotos de clientes, cuando las hay, aportan mucho y se muestran en una fila propia.
• →Las opiniones con datos útiles («mido 1,65 y la M me queda holgada») se destacan.
• →Las respuestas de la marca a opiniones críticas muestran que hay alguien al otro lado.

Una tienda nueva sin reseñas puede apoyarse en otras señales: garantía clara, política de devoluciones generosa bien explicada, sellos de confianza reales, una línea sobre quién está detrás de la marca. En la guía de señales de confianza digital repasamos cuáles pesan más.

07Lo que no se ve: datos estructurados y rendimiento

Una ficha bien diseñada también tiene que leerse bien por dentro. Los datos estructurados en formato JSON-LD permiten a Google entender el producto, su precio y su disponibilidad, y mostrarlos en los resultados. Este es un ejemplo mínimo:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Jarra de cerámica esmaltada 1 l, azul cobalto",
  "image": ["https://tutienda.es/img/jarra-azul-1.avif"],
  "description": "Jarra de gres esmaltado a mano, apta para lavavajillas.",
  "sku": "JAR-AZ-1L",
  "brand": { "@type": "Brand", "name": "Tu Marca" },
  "offers": {
    "@type": "Offer",
    "price": "34.90",
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock",
    "url": "https://tutienda.es/jarra-ceramica-azul"
  }
}

A esto se pueden añadir valoraciones agregadas, política de devoluciones y datos de envío. La mayoría de plataformas lo generan solas, pero conviene revisarlo con la herramienta de pruebas de resultados enriquecidos de Google. Lo explicamos a fondo en la guía de datos estructurados con schema.org.

En rendimiento, las claves de la ficha son la primera imagen con prioridad de carga, el hueco de cada imagen reservado para que nada salte (CLS por debajo de 0,1) y un control estricto de las aplicaciones de terceros, que en las fichas suelen acumularse: reseñas, recomendadores, chats, aplazamiento de pago.

08Checklist de la ficha de producto

Antes de dar por buena una ficha, la recorremos con esta lista, primero en un móvil y después en escritorio:

1. 01Título, precio y botón se ven sin hacer scroll en móvil.
2. 02La foto principal coincide con la de la categoría.
3. 03La galería incluye ángulos, detalle, uso y referencia de tamaño.
4. 04Al elegir una variante cambian la foto, el precio y la disponibilidad.
5. 05Las variantes agotadas se ven y permiten aviso de reposición.
6. 06El botón de compra destaca y explica qué falta si no se puede pulsar.
7. 07Plazo, coste de envío y devoluciones se leen junto al botón.
8. 08Medidas y materiales están en una sección propia y fácil de encontrar.
9. 09La valoración media enlaza a las reseñas.
10. 10Hay productos complementarios y un camino de vuelta a la categoría.
11. 11Los datos estructurados pasan la prueba de resultados enriquecidos.
12. 12La primera imagen carga con prioridad y la página no salta al cargar.

09Una ficha que trabaja como un buen dependiente

La ficha de producto perfecta no es la más llamativa, sino la que acompaña: enseña bien, responde antes de que preguntes y deja la decisión fácil. Cuando cada pieza está en su sitio, el diseño casi desaparece y lo que queda es el producto y la confianza.

En SIMA diseñamos y desarrollamos tiendas online dentro de nuestro servicio de diseño web y experiencia digital, cuidando la ficha como la pieza central que es. Si tu tienda recibe visitas pero las fichas no terminan de convertir, escríbenos y le echamos un vistazo juntos.