Diseño de páginas de producto en PrestaShop: buenas prácticas de conversión

Última revisión: junio de 2026 — comprobado con PrestaShop 1.7, 8 y 9. Las rutas de plantillas, los hooks y las ubicaciones del back office indicados abajo están actualizados; en PrestaShop 9, las URL de producto ya no incluyen por defecto la ruta de la categoría, algo importante si cambias el nombre de los productos (se trata en las secciones de móvil y estructura de la mitad inferior).

Tu página de inicio recibe la mayor atención de los diseñadores, pero tu página de producto recibe la mayor atención de los compradores. Es la última pantalla que ve un visitante antes de hacer clic en "Añadir al carrito" o volver atrás, y en la mayoría de tiendas PrestaShop también es la más descuidada: se configura una vez al instalar el tema y luego no se vuelve a tocar. Esta guía trata de una cosa muy concreta: el diseño de esa página. No la fotografía, ni la redacción, ni qué widget de confianza conviene comprar — cada uno de esos temas tiene su propio tratamiento más abajo — sino las decisiones de maquetación que determinan si un visitante que ya quiere el producto puede llegar realmente al botón de compra sin fricción.

Aquí, "diseño" no significa hacer la página más bonita. Significa en qué orden aparecen las cosas, qué queda por encima del pliegue, cómo viaja la mirada desde el precio hasta el botón y qué archivos de plantilla y ajustes del tema de PrestaShop tienes que tocar para cambiarlo. Si la disposición falla, incluso una página llena de fotos preciosas y textos bien escritos convierte mal, porque el cliente nunca llega a la parte que importaba.

Qué significa "diseño de página de producto" específicamente en PrestaShop

En una tienda PrestaShop 1.7, 8 o 9, la página de producto la renderiza el controlador product y se compone a partir de un puñado de plantillas Smarty situadas en themes/your-theme/templates/catalog/: principalmente product.tpl, con el área de compra de la derecha construida a partir de parciales bajo catalog/_partials/ (reconocerás product-add-to-cart.tpl, product-prices.tpl, product-variants.tpl, product-flags.tpl). La disposición de dos columnas — imágenes a la izquierda, bloque de compra a la derecha — que usan la mayoría de tiendas es el diseño por defecto del tema Classic. Entender esto importa porque casi todos los cambios de diseño que querrás hacer son una edición de plantilla en esa carpeta, un cambio de posición de hook o un ajuste en el back office; no un misterio que exija un rediseño completo.

Los hooks que controlan lo que aparece alrededor del bloque de compra principal son los que más utilizarás: displayProductActions y displayProductPriceBlock están dentro del área de compra, displayProductAdditionalInfo queda justo debajo, displayProductExtraContent alimenta las pestañas inferiores del producto y displayFooterProduct controla los bloques bajo el producto. ¿Y eso qué significa para ti? Que cuando quieres colocar una insignia, una estimación de entrega o una línea de tranquilidad en un punto concreto, estás eligiendo un hook, no editando archivos del tema y cruzando los dedos para que la próxima actualización no lo borre. Cualquier módulo bien construido se engancha a estos hooks en lugar de bifurcar tu product.tpl, que es precisamente lo que mantiene vivos tus cambios de diseño durante las actualizaciones.

Si quieres reordenar los módulos que aparecen en el área de compra en lugar de reescribir una plantilla, la vía más rápida está en el back office: Diseño → Posiciones lista todos los módulos asociados a cada hook y te permite arrastrarlos hacia arriba o hacia abajo. Ahí es donde corriges que "un módulo está empujando mi botón por debajo del pliegue" sin tocar ni un solo archivo .tpl.

El bloque de compra por encima del pliegue es la única decisión de diseño que siempre importa

Todo lo que un comprador necesita para tomar la decisión debe ser visible sin desplazarse: el nombre del producto, el precio, la imagen principal, el selector de variantes, la línea de stock/disponibilidad y el botón Añadir al carrito. Esta es la única regla de diseño que sobrevive a cualquier tendencia de rediseño. Si un visitante tiene que desplazarse más allá de una descripción de 500 palabras para encontrar el precio, una parte significativa se irá sin más: lee "esta tienda me está haciendo trabajar" antes de leer una sola palabra de tu texto.

En el tema Classic de PrestaShop el bloque de compra ya está arriba, pero hay tres cosas que suelen empujarlo hacia abajo o romperlo:

• Una columna de imágenes sobredimensionada. Si las imágenes de tus productos se suben con relaciones de aspecto incoherentes, la columna de la galería crece demasiado y expulsa el bloque de compra de la pantalla en portátiles pequeños. Corrige las dimensiones de imagen en origen — se explica en fotografía de producto para comercio electrónico — y no con apaños de CSS.
• Un muro de texto en la descripción corta. PrestaShop muestra la descripción corta (el campo Resumen, description_short) justo dentro de la columna de compra. Limítala a dos o tres líneas de beneficio; la descripción larga pertenece más abajo. La disciplina de escribir bien ese campo corto es un oficio propio: consulta cómo escribir descripciones de producto que posicionen y conviertan.
• Módulos apilados por encima del botón. Cada módulo enganchado a displayProductActions o al bloque de precio empuja el botón hacia abajo. Audita qué se está ejecutando realmente ahí.

La jerarquía visual: dónde debe caer la mirada, en orden

Una página de producto que convierte guía la mirada por un recorrido deliberado: primero la imagen (confirma "sí, esto es lo que estaba buscando"), luego el nombre y el precio (los dos datos que deciden si seguir o no), después la variante y la línea de stock (¿puedo comprar la opción que quiero?) y, por último, el botón. Reseñas, entrega y mensajes de tranquilidad actúan como señales de apoyo alrededor de esa columna vertebral, pero nunca compiten con ella por la primera mirada.

El error de diseño habitual es dar peso visual principal a elementos secundarios. Un enorme banner de "ENVÍO GRATIS" encima del nombre del producto, un carrusel estridente de venta cruzada antes de que el cliente haya decidido siquiera comprar este producto, un vídeo con reproducción automática que secuestra la atención: todos roban foco a la columna vertebral. La prueba es brutalmente sencilla: carga tu página de producto, mírala durante un segundo y aparta la vista. ¿Podrías decir el nombre del producto, el precio y dónde está el botón? Si no, tu jerarquía está peleándose consigo misma.

Decisiones de ubicación que marcan la diferencia

La mayor parte del trabajo de diseño de una página de producto consiste en decidir dónde va un puñado de elementos. Estas ubicaciones son decisiones de plantilla/hook, y cada una tiene una respuesta correcta que funciona en la mayoría de tiendas:

La línea de tranquilidad bajo el botón merece una nota especial porque es la mejora de diseño con mayor impacto y menor esfuerzo de toda la página: una sola fila que indique la política de devoluciones, los métodos de pago aceptados y una señal de seguridad, colocada justo donde ya está la mirada en el momento de duda. La forma visual que adoptan esas señales — y si de verdad generan confianza o solo añaden ruido — es un tema en sí mismo; consulta sellos de confianza y la cuestión más amplia de si tu tienda parece fiable.

Organizar la mitad inferior: pestañas frente a un desplazamiento largo

Debajo del bloque de compra está la mitad de detalle de la página: descripción larga, especificaciones, reseñas, información de envío. La decisión de diseño aquí es la estructura: un desplazamiento único e interminable entierra todo lo que queda más allá de la primera pantalla, mientras que unas pestañas bien construidas permiten a quien busca detalles saltar directamente a las especificaciones o reseñas. El tema Classic de PrestaShop ya presenta en pestañas la descripción y la ficha técnica; la pregunta es si necesitas más secciones (guía de instalación, garantía, tallas) de las que permiten las dos pestañas nativas. Ese es un tema específico con su propia vía de módulo: pestañas de producto: añadir especificaciones, guías y contenido personalizado explica exactamente cómo añadir pestañas personalizadas sin editar archivos del tema. Si quieres añadir esas secciones desde el back office en lugar de desde la plantilla, nuestro módulo Product Extra Info Tabs se engancha a displayProductExtraContent y te permite combinar pestañas para todo el catálogo (una pestaña "Envío" compartida en todas partes) con pestañas por producto, de modo que la mitad inferior se mantenga organizada sin una bifurcación del tema que la próxima actualización pueda borrar.

Una regla de diseño para la mitad inferior, la estructures como la estructures: no dejes que un widget de reseñas con desplazamiento infinito se alargue sin fin, porque empuja el pie de página — con su política de devoluciones, datos de contacto y señales de confianza — permanentemente fuera de alcance. Pagina las reseñas para que la página tenga un final.

El móvil es un diseño distinto, no el mismo reducido

Más de la mitad del tráfico de páginas de producto en una tienda PrestaShop típica es móvil, y una disposición que funciona en escritorio no funciona automáticamente en un teléfono. La estructura de dos columnas de escritorio se colapsa en una sola columna apilada, y el orden de esa pila se convierte ahora en una decisión de diseño que debes tomar deliberadamente. Si aciertas, la página se siente nativa; si fallas, el precio acaba debajo de una imagen a pantalla completa y el botón queda perdido a lo lejos.

• Orden de apilado: imagen, nombre, precio, variante, botón; después, descripción. La decisión de compra debe estar al alcance con el mínimo desplazamiento.
• Galería deslizable: el área de imagen debe deslizarse horizontalmente, no obligar a una lista vertical de miniaturas que se come la pantalla antes de que aparezca el precio.
• Añadir al carrito fijo: una barra inferior fija con el precio y el botón mantiene la acción de compra al alcance, por mucho que el cliente baje hasta especificaciones y reseñas. Es el patrón de diseño móvil con mayor impacto.
• Secciones plegables: descripción, especificaciones y reseñas como acordeones, mostrando las primeras líneas con un conmutador de "leer más", para que la página tenga una longitud razonable en una pantalla pequeña.

Si construyes tú mismo la barra móvil fija, se trata de un pequeño bloque en el product.tpl de tu tema hijo que reutiliza los mismos parciales de precio y añadir al carrito que ya renderiza el bloque de compra principal, mostrado solo en viewports pequeños. La clave es reutilizar los parciales existentes, no duplicar el marcado, para que un futuro cambio en el bloque de precio actualice ambos a la vez:

{* themes/your-child-theme/templates/catalog/product.tpl — sticky mobile buy bar *}
<div class="mpr-sticky-buy d-md-none">
  {block name='product_prices'}
    {include file='catalog/_partials/product-prices.tpl' product=$product}
  {/block}
  {block name='product_add_to_cart'}
    {include file='catalog/_partials/product-add-to-cart.tpl' product=$product}
  {/block}
</div>

/* custom.css — pin it to the bottom on phones only */
.mpr-sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1030; background: #fff;
  padding: .5rem .75rem;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}

(La utilidad de Bootstrap d-md-none la oculta a partir del ancho de tableta, de modo que en escritorio se mantiene el botón normal dentro del flujo.)

Decisiones de diseño que te cuestan conversiones en silencio

Algunas decisiones populares de "diseño" trabajan activamente contra la página. Ninguna de ellas va de gustos: cada una elimina una razón real por la que un comprador preparado se marcha:

• Vídeo de producto con reproducción automática. Ralentiza la página, consume datos móviles y secuestra la columna vertebral visual. Muestra un botón de reproducción en su lugar. (Si el vídeo vende tu producto, la forma correcta de usarlo se explica en integración de YouTube para vídeos de producto.)
• Ventanas emergentes de "los clientes también vieron". Interrumpen la decisión en el peor momento. Deja que las ventas cruzadas vivan en la página, por debajo del pliegue, donde pertenecen; la estrategia para ello está en venta cruzada y venta adicional.
• Ocultar el precio detrás de "solicitar presupuesto". En una tienda B2C esto pierde al grueso de visitantes al instante. Si tu modelo realmente lo exige, muestra un rango para que la página no sea un callejón sin salida.
• Un campo de cupón llamativo y vacío. Llamar la atención sobre una caja de descuento para la que el cliente no tiene código lo manda a Google a buscarlo, y algunos nunca vuelven.

La velocidad de la página es una restricción de diseño, no una ocurrencia tardía

Las páginas de producto son las más pesadas de una tienda PrestaShop: galería, JavaScript de variantes, reseñas y módulos de venta cruzada cargan todos aquí. Un diseño que parece perfecto pero tarda cuatro segundos en renderizar en un teléfono ya ha perdido al cliente cuya atención te esforzaste en ganar con la maquetación. Trata el presupuesto como parte del diseño: apunta a un Largest Contentful Paint por debajo de 2,5 segundos en móvil, y mantén la página dentro de ese límite cargando de forma diferida las imágenes de ventas cruzadas y reseñas situadas por debajo del pliegue, aplazando los módulos de reseñas hasta que el cliente se acerque a ellos al desplazarse, precargando la primera imagen de producto y siendo implacable con la cantidad de scripts de terceros (chat, mapas de calor, analítica) que dejas entrar en la página.

Cómo saber si tu diseño convierte de verdad

Las opiniones sobre diseño son baratas; el único veredicto honesto viene de una métrica: la tasa de añadido al carrito en la página, es decir, la proporción de visitantes de la página de producto que añaden el artículo al carrito. El back office de PrestaShop no te entrega ese número directamente: Estadísticas → Productos más vendidos te da la cantidad vendida y las visitas de página por producto (un proxy útil de ventas por visita), y la lista Pedidos → Carritos de compra muestra los carritos a medida que se forman, pero la tasa real de añadido al carrito viene de tu analítica. Sea cual sea la fuente que uses, la disciplina consiste en cambiar una cosa cada vez — mover la línea de tranquilidad, acortar la descripción corta, corregir el orden móvil — y observar la misma métrica con suficiente tráfico como para ver una tendencia real y no ruido de una semana a otra. Un cambio de maquetación que "se siente mejor" pero no mueve ningún número es solo cambiar los muebles de sitio.

Una página de producto de PrestaShop con alta conversión no es una página más bonita: es una página donde la columna vertebral (imagen, nombre, precio, variante, botón) se alcanza de un vistazo, las señales de apoyo están exactamente donde la mirada las necesita, la pila móvil se diseña por sus propios méritos en lugar de heredarse del escritorio, y todo renderiza rápido. Si esa arquitectura está bien, la fotografía, el texto y los widgets de confianza que añadas después rendirán más, porque por fin el cliente llega a verlos.

Preguntas frecuentes

¿Debo editar product.tpl directamente para cambiar el diseño de mi página de producto?

Solo en un tema hijo, y solo cuando un hook o un ajuste del back office no puedan hacer el trabajo. Editar directamente el product.tpl del tema padre significa que la próxima actualización del tema sobrescribirá tu trabajo. El orden más limpio es: primero probar Diseño → Posiciones para reordenar módulos enganchados, después un módulo que se conecte al hook adecuado y solo entonces una sobrescritura de plantilla colocada en themes/your-child-theme/templates/catalog/ para que sobreviva a las actualizaciones.

¿Dónde aparece realmente la descripción corta en la página de producto?

El campo Resumen (description_short) se renderiza dentro de la columna de compra, cerca del precio y por encima del pliegue, no en las pestañas inferiores. Precisamente por eso debe mantenerse corto: dos o tres líneas de beneficio. La Descripción completa se renderiza más abajo, normalmente en una pestaña. Pegar el mismo texto largo en ambos campos es la causa más común de que el bloque de compra quede expulsado de la pantalla.

¿Por qué hay un módulo encima de mi botón Añadir al carrito y cómo lo muevo?

Está enganchado a displayProductActions o a displayProductPriceBlock, que se renderizan dentro del área de compra. Ve a Diseño → Posiciones, busca ese hook y arrastra el módulo por debajo de los que deben ir primero, o desengánchalo si no debería estar por encima del botón en absoluto. No hace falta editar la plantilla.

¿PrestaShop tiene una barra móvil fija de Añadir al carrito integrada?

El tema Classic no la incluye por defecto. La añades mediante un módulo que se enganche a la página de producto o con un pequeño bloque en el tema hijo que reutilice los parciales existentes de precio y añadir al carrito (mostrados arriba), para no duplicar el marcado. Es el cambio móvil con mayor impacto en la página, así que merece la pena hacerlo bien en lugar de usar un botón copiado y pegado.

En PrestaShop 9, ¿cambió la URL de producto de una forma que afecte a mi trabajo de diseño?

Sí: PrestaShop 9 elimina por defecto la categoría de la URL del producto, de modo que el slug se genera solo a partir del nombre del producto. No cambia la maquetación, pero sí significa que renombrar un producto puede regenerar la URL amigable y romper enlaces entrantes si no hay una redirección. Si mantienes estructura canónica y redirecciones durante una migración, una herramienta dedicada como nuestro módulo SEO Revolution mantiene bajo control la gestión de slugs y redirecciones para que un cambio de nombre no te cueste posicionamiento en silencio.