Páginas de producto en PrestaShop: diseño, contenido y consultas

Qué haríamos

Empezaríamos por la pregunta de compra sin respuesta o la acción que falla y aplicaríamos el cambio más pequeño que la resuelva. La vía adecuada depende de tu tema actual, la versión de PrestaShop, los módulos instalados, los datos e importaciones del catálogo, las integraciones de stock y precios, los mercados y las personas que mantienen el contenido y atienden consultas. Una dimensión ausente necesita datos de producto fiables; un selector de variantes roto necesita un diagnóstico antes de rediseñarlo.

Para cambiar plantillas, hooks o módulos, usa una copia de pruebas que represente la tienda en producción. Aísla los correos a clientes y las exportaciones reales de stock o pedidos, ensaya los recorridos completos de compra y consulta y acuerda un paso a producción planificado con una copia de seguridad, la configuración anterior y los pasos de reversión preparados. Conserva un tema que funcione salvo que las comprobaciones demuestren que no puede cumplir tu requisito.

Si necesitas evaluar el recorrido de compra antes de elegir los cambios, el PrestaShop UX & Conversion Design Audit proporciona un plan de correcciones priorizado; la implementación es aparte.

Elige la vía según las pruebas

Facilita el uso de los controles de compra

Ofrece a los clientes una vista clara del producto, el precio, la variante seleccionada, la disponibilidad y el botón de compra. Mantén el contenido de apoyo lo bastante cerca para responder preguntas sin tapar esos controles. Comprueba la primera pantalla en varios tamaños de ventana en lugar de suponer un único límite visible fijo.

Por ejemplo, Bolso bandolera de piel para mujer, marrón oscuro, mediano identifica mejor el artículo que Bolso clásico 4523. Una ventaja como admitir un portátil de 13 pulgadas debe corresponderse con las dimensiones reales. Facilita la lectura rápida de las descripciones detalladas con encabezados, párrafos cortos y listas de especificaciones. El campo Resumen (description_short) debe contener la ventaja de compra breve; la descripción larga aporta la explicación.

Comprueba los ajustes de visualización de precios de los grupos de clientes, además de las reglas fiscales en Internacional > Impuestos. Si los precios del producto y del proceso de compra difieren, comprueba también la dirección, la moneda, la combinación, la cantidad, el grupo de clientes, los descuentos y el contexto de caché. No supongas que toda diferencia es un error de visualización fiscal.

Usa mensajes de stock y entrega precisos. Muestra solo las condiciones de pago, devolución y garantía que realmente ofreces. No inventes cifras de ventas, avisos de poco stock ni plazos límite.

Usa las asignaciones nativas de accesorios o productos relacionados del editor de productos para seleccionar artículos compatibles, como el cable o protector de pantalla correctos, antes de añadir un módulo de recomendaciones. Colócalos donde ayuden a la decisión principal y comprueba la disponibilidad. Evita superposiciones intrusivas, contenido multimedia con reproducción automática y avisos de cupones que distraigan de la elección del producto.

Corrige un botón de compra desplazado por el texto

Una importación de muebles ha colocado las instrucciones de montaje tanto en el resumen como en la descripción larga. En un teléfono se ve el precio, pero el botón de compra aparece después de las instrucciones repetidas. Confirma primero qué campo y plantilla generan el texto adicional y deja después la ventaja de compra en el resumen y las instrucciones en el contenido detallado. Corrige también la asignación de la importación o la siguiente importación puede reproducir el problema.

Vuelve a comprobar el producto afectado y otro con combinaciones en el entorno de pruebas. El cliente debe poder llegar a los controles, elegir el acabado previsto y añadirlo al carrito sin perder información necesaria. Si el botón sigue desplazado, inspecciona la altura de la galería y el contenido renderizado de los hooks en lugar de acortar textos a ciegas.

Localiza las plantillas y los hooks de tu tema

En los temas modernos basados en Smarty, empieza por templates/catalog/product.tpl y sus plantillas parciales. En Classic, entre las parciales importantes están product-prices.tpl, product-add-to-cart.tpl, product-variants.tpl y product-details.tpl. El tema activo determina el marcado, los selectores y la posición.

Hummingbird pasó a ser el tema predeterminado para nuevas instalaciones de PrestaShop en 9.1. Las tiendas actualizadas pueden conservar su tema existente. Hummingbird usa Bootstrap 5.3 y convenciones de JavaScript y CSS distintas de Classic. Consulta su documentación del tema antes de copiar selectores o utilidades adaptables.

Diseño > Posiciones cambia el orden de los módulos dentro de un hook. No mueve la llamada del hook respecto a un botón o precio del núcleo. Trasplanta un módulo solo a un hook compatible que implemente. Inspecciona el DOM generado y la plantilla antes de diagnosticar que un módulo está desplazando el botón hacia abajo.

Prueba primero los ajustes existentes del tema y las posiciones compatibles de hooks. Si hace falta cambiar una plantilla, usa el procedimiento de tema hijo o personalización admitido por el tema y mantén pequeñas las diferencias. Las actualizaciones del tema padre pueden cambiar el marcado del que depende tu personalización, así que vuelve a probar tras actualizarlas.

PrestaShop 1.6 tiene una estructura independiente: la plantilla predeterminada es themes/default-bootstrap/product.tpl, los ajustes de imágenes están en Preferencias > Imágenes y las pestañas adicionales de producto usan el modelo antiguo displayProductTab y displayProductTabContent. Los ejemplos modernos de ProductExtraContent se aplican a 1.7 y posteriores.

Prueba las imágenes, el diseño móvil y el rendimiento

Usa fotografías que respondan a distintas preguntas: vista principal, ángulos útiles, escala o contexto de uso y detalles como conectores, textura o herrajes. Elimina las imágenes redundantes. Proporciona dimensiones y formatos adecuados al tema y regenera las miniaturas necesarias tras cambiar los tipos de imagen en Diseño > Ajustes de imágenes en versiones modernas. Comprueba los tipos de imagen que solicita realmente la plantilla activa, como large_default o home_default, antes de cambiar las dimensiones.

En móvil, prueba el orden de imagen, título, precio, controles de variantes y acción de compra. Haz que la galería se pueda usar con tacto y teclado sin imponer una larga lista vertical de miniaturas antes del precio. Las secciones de detalles plegables pueden ayudar, pero sus etiquetas y comportamiento del foco deben seguir siendo claros.

Implementa con cuidado un control de compra fijo

Un control fijo es una opción que probar, no una mejora universal de conversión. Evita incluir dos veces toda la plantilla parcial de añadir al carrito: duplica el marcado generado, los ID como quantity_wanted y los elementos de disponibilidad, y posiblemente los controles del formulario.

• Mantén un único formulario de producto como referencia y envía mediante su comportamiento establecido.
• Mantén únicos los ID. No crees un botón independiente que omita campos obligatorios de personalización, combinación o cantidad.
• Sincroniza el precio visible, la combinación seleccionada, la cantidad, el stock, la cantidad mínima y el estado desactivado tras actualizar el producto. Cambia a una combinación no disponible o con otro precio mientras la barra esté visible y comprueba la línea resultante del carrito, no solo la etiqueta.
• Comprueba el foco del teclado, los errores de validación, el teclado en pantalla, los controles de cookies y el espacio libre por encima de la barra.
• Usa utilidades adaptables compatibles con la versión de Bootstrap del tema activo. Prueba ventanas estrechas y anchas.

Mide el coste de galería, reseñas, chat, analítica y venta cruzada en la página real. Carga los contenidos multimedia fuera de la primera pantalla cuando corresponda, pero no difieras la imagen principal que los clientes necesitan de inmediato. Añade indicaciones de precarga solo cuando beneficien a la secuencia de carga medida.

Un buen Largest Contentful Paint es de como máximo 2,5 segundos en el percentil 75, evaluado por separado en móvil y escritorio. Usa la referencia de LCP y los datos de usuarios reales junto con los diagnósticos de laboratorio. Ninguna extensión de galería puede garantizar que la puntuación de rendimiento permanezca igual en todos los temas.

Usa una demostración cuando el movimiento responda a una pregunta de compra, como la forma de plegar un escritorio. Product Videos admite enlaces a vídeos alojados o clips subidos, con una tira, una pestaña de vídeos o una ubicación de galería compatible; las galerías no compatibles usan una sección de vídeo separada. Prueba la ubicación elegida y el comportamiento del consentimiento, incluidas las miniaturas remotas, antes del lanzamiento. Mantén el producto comprensible cuando el visitante rechace el consentimiento o no pueda reproducir el clip.

Para las opciones multimedia y de visualización de la extensión de galería, usa la ayuda de Gallery Revolution.

Usa descripciones, características y archivos adjuntos nativos

Classic representa los paneles nativos de información directamente a partir de los datos del producto y las plantillas. No se limita a dos paneles posibles y los paneles nativos no proceden de displayProductExtraContent.

Crea nombres de características compartidos y valores adecuados en Catálogo > Atributos y características > Características y asígnalos después a los productos. El peso, el material y la potencia deben estar en campos estructurados coherentes cuando los compradores necesiten compararlos o filtrarlos. El filtrado por categorías también requiere la configuración y el índice pertinentes de Búsqueda por facetas. Acuerda unas unidades y un vocabulario de valores coherentes antes de importar especificaciones: un material escrito de forma distinta en cada producto dificulta la comparación y puede fragmentar las opciones de filtro. Comprueba los detalles del producto y el filtro de categoría configurado después de la importación.

Los atributos y las combinaciones describen variantes que el cliente elige, como color y talla. Las características describen propiedades del producto. Comprueba el stock específico de la combinación, valores predeterminados razonables y el mensaje de disponibilidad después de cambiar una selección.

Usa los archivos adjuntos nativos para un manual descargable básico antes de añadir una extensión de pestañas personalizadas. Los adjuntos son información pública del producto, separada de las descargas de productos virtuales de pago. Comprueba las versiones de los archivos, los nombres descriptivos y que los enlaces funcionen.

Para más orientación sobre textos, consulta el contenido SEO de productos y para planificar contenidos visuales, la fotografía de productos.

Añade guías compartidas y paneles de producto personalizados

Considera primero los encabezados dentro de la descripción existente. Usa un panel separado cuando los clientes se beneficien de una guía diferenciada, nota de compatibilidad, explicación de garantía o tabla de tallas. Mantén el contenido compartido de categorías en un lugar mantenido en lugar de copiar la misma tabla en cientos de productos.

En PrestaShop 1.7 y posteriores, un módulo puede devolver un array de objetos PrestaShop\PrestaShop\Core\Product\ProductExtraContent a través de displayProductExtraContent. Cada uno tiene un título y contenido HTML. El buscador recopila y valida los objetos; el tema decide si mostrarlos como pestañas, acordeones u otro diseño.

Por ejemplo, un desarrollador puede devolver un título traducido de Cuidados y tallas con contenido representado desde la plantilla del módulo. Escapa los valores dinámicos en esa plantilla y evita insertar HTML no fiable. El hook por sí mismo no proporciona segmentación por categorías, edición de contenido ni una interfaz Bootstrap; eso pertenece a la implementación.

Para gestionar desde el back office el contenido adicional de producto y su segmentación, usa la ayuda de Product Extra Info Tabs. Los hooks estándar reducen los cambios directos de plantillas, pero siguen necesitando comprobaciones de compatibilidad tras actualizar el tema o hacer actualizaciones importantes de la plataforma.

Ensaya una guía compartida con una excepción de producto

Una gama de calzado comparte una guía de cuidados, pero un acabado especial necesita otro tratamiento. Mantén las instrucciones compartidas de forma centralizada y da al producto excepcional su propio contenido. El módulo enlazado admite segmentación por catálogo, visibilidad por grupo de clientes, país y combinación seleccionada, contenido por idioma y tienda y una versión local del producto que sustituye el texto compartido.

1. Identifica la gama, los productos excluidos, los idiomas y las tiendas antes de asignar la guía. Conserva las instrucciones especiales junto a su responsable y fecha de revisión en tus registros de contenido.
2. Previsualiza un producto normal, la excepción y un producto ajeno a la gama. Cambia la combinación o el contexto de cliente pertinente y confirma que siguen visibles las instrucciones correctas.
3. Edita una vez la guía compartida y repite esas comprobaciones tras la gestión habitual de caché. El producto normal debe cambiar, la excepción debe conservar su propio texto y el producto excluido no debe incorporar la guía.

Si ya has elegido el componente, el PrestaShop Module Installation & Configuration Service instala y configura un módulo existente y verifica el recorrido acordado; el desarrollo adicional es aparte.

• Usa etiquetas breves y claras como Especificaciones, Cuidados, Descargas y Envío y devoluciones.
• Combina los paneles escasos que se solapen y omite los vacíos. Empieza con un conjunto pequeño y mide después si los clientes encuentran las respuestas.
• Comprueba el desbordamiento horizontal de pestañas, el orden del acordeón móvil, la navegación por teclado y los anuncios de expansión o contracción.
• Evita pestañas anidadas. Mantén un recorrido finito hasta el pie de página, incluso cuando las reseñas carguen más contenido.

Mantén el contenido descriptivo importante en el HTML inicial cuando sea práctico. Google Search no hace clic en una pestaña para obtener su contenido. El contenido generado en el servidor y visualmente plegado puede estar disponible para el rastreo; la carga dependiente de clic exige especial cuidado. Prueba el HTML representado con Search Console en lugar de prometer indexación o posicionamiento. Sigue las directrices de Google sobre contenido de carga diferida.

Coloca las reseñas y los mensajes de confianza con honestidad

La ubicación de las reseñas depende del módulo de reseñas instalado y del tema. El módulo oficial Product Comments usa hooks de página de producto como displayFooterProduct, displayProductAdditionalInfo y filterProductContent; no supongas que proporciona una pestaña de Reseñas mediante displayProductExtraContent.

Las versiones del módulo oficial aportan datos de valoración agregada a los datos estructurados del producto. Comprueba conjuntamente la versión instalada, la salida del tema, las reseñas visibles y el marcado. Valida la página real y evita objetos Product o valoraciones contradictorios de extensiones distintas. Un marcado válido no garantiza estrellas de reseña en los resultados de búsqueda. Consulta la implementación oficial de Product Comments.

Modera reseñas auténticas según una política clara. No inventes comentarios, valoraciones ni mensajes de compras en directo. Si muestras recuentos o stock, usa definiciones precisas y datos reales. Proporciona información comprensible de entrega, devoluciones y pagos en lugar de depender de insignias decorativas.

Para otro flujo de gestión de reseñas, usa la ayuda de Product and Store Reviews; una extensión comercial es una opción, no un requisito universal para los datos de valoración.

Gestiona las preguntas previas a la venta con el contexto del producto

Elige un canal que tu equipo pueda mantener. Estos flujos tienen distintas necesidades de personal y privacidad:

Coloca el enlace de preguntas donde pueda encontrarlo un cliente que mire el precio o las especificaciones. En temas derivados de Classic, displayProductAdditionalInfo suele ser adecuado, pero inspecciona su posición real. Una página de contacto genérica debe conservar el contexto del producto si esa es la vía elegida. Si también ofreces un panel de preguntas más abajo, mantén un acceso evidente cerca de la decisión de compra para que los clientes no tengan que descubrir primero el panel.

Una consulta útil incluye el nombre y el ID del producto, el nombre y correo del remitente y la pregunta. Recoge la combinación seleccionada y su referencia si tu implementación lo permite, usando la selección actual en lugar de la combinación presente cuando se cargó la página. Trata como no fiables los campos enviados por el navegador, valida el contexto del producto en el servidor y comprueba la entrega del correo.

Para un formulario de consulta privada con contexto de referencia de producto y combinación seleccionada, usa la ayuda de Ask About Product. El módulo permite configurar destinatarios, campos y adjuntos permitidos, exige el consentimiento de la política de privacidad, limita los envíos automatizados y repetidos y registra las consultas, sus responsables y el estado de respuesta en su panel. Comprueba el correo y el panel de la versión instalada con un envío de prueba real; mantén la publicación de FAQ públicas como un flujo moderado aparte.

1. Indica un plazo de respuesta que puedas cumplir, incluido el horario laboral.
2. Responde directamente a la pregunta concreta de compatibilidad, tamaño o entrega. Confirma el producto y la variante en lugar de suponerlos.
3. Enlaza una especificación o guía útil cuando responda a una probable pregunta posterior.
4. Mantén cualquier seguimiento relacionado con la consulta y respeta las preferencias de marketing.
5. Revisa las preguntas recurrentes y mejora el texto del producto, el panel de especificaciones o unas FAQ mantenidas por separado.

Por ejemplo, preguntas repetidas sobre la diferencia entre modelos de 45 cm y 60 cm pueden indicar dimensiones, selección de variantes o información comparativa poco claras. Registra los resultados de consulta a pedido y los tiempos de respuesta; una pregunta bien contestada no garantiza una venta.

Para probar el contexto, añade primero el modelo de 45 cm al carrito y anota su cantidad. Vuelve a la página de producto, selecciona el modelo de 60 cm y envía una pregunta de compatibilidad. Confirma que el mensaje recibido y el registro de consulta identifican la selección de 60 cm, que la respuesta llega al remitente de prueba y que el carrito sigue conteniendo el modelo original de 45 cm y su cantidad. Una confirmación en pantalla por sí sola no demuestra la entrega del correo. Convierte una respuesta recurrente en información de producto mantenida, sin copiar datos personales de un cliente en contenido público.

Comprueba las URL y mide la página final

La ruta de producto predeterminada de PrestaShop 9 conserva el ID del producto y omite el componente de categoría. El nombre del producto y el campo de URL amigable link_rewrite son independientes. Cambiar un nombre no reescribe necesariamente una URL amigable existente.

Con resolución basada en ID y redirección canónica activada mediante PS_CANONICAL_REDIRECT, un slug antiguo puede resolverse y redirigir a la URL canónica actual. Prueba las URL reales después de cambiar nombres o migrar. Si cambian los ID, los patrones de rutas u otros componentes, asigna las redirecciones de forma deliberada. Un cambio de ruta es independiente de un cambio de diseño.

• Prueba productos normales y rebajados, combinaciones, variantes no disponibles, límites de cantidad, personalización obligatoria y acceso de invitados.
• Compara el precio mostrado con el carrito y un pedido de prueba para los grupos, direcciones y monedas pertinentes. Incluye la integración de stock o precios que actualiza normalmente los datos del producto.
• Verifica las descargas de manuales, los enlaces de reseñas, el envío de preguntas y la entrega de correo.
• Inspecciona la unicidad de ID, el envío del formulario de producto, el foco, las pestañas, los acordeones y los controles fijos en teléfono y escritorio.
• Mide la carga, la interacción y los desplazamientos del diseño con tus módulos y contenidos multimedia reales.

Define los eventos de vista de producto y de añadir al carrito en tu analítica. Registra las aperturas de pestañas y acordeones iniciadas por el cliente con el ID de producto y la etiqueta de sección, y verifica que cada apertura se cuenta una sola vez. Un informe de ventas por vista no equivale a la proporción de sesiones de página de producto que añaden al carrito. Incluye la finalización de compra, las devoluciones y las consultas de soporte al valorar un cambio.

Cambia un elemento significativo cada vez cuando sea posible, compara tráfico similar y reúne suficientes observaciones para decidir. Los clics en pestañas muestran interés, pero una asociación entre vistas de especificaciones y compras no demuestra que mover una pestaña cause más ventas.

Conserva una publicación y una entrega revisables

1. Registra el síntoma original, las URL de producto afectadas y las versiones de tienda, tema y módulos. Conserva los ajustes y las mediciones iniciales de página para que el equipo pueda comparar el resultado.
2. Aplica el cambio acordado en la copia y ejecuta las comprobaciones anteriores con sus integraciones habituales representadas de forma segura. Conserva capturas y pruebas del carrito resultante, el pedido de prueba y la consulta para los casos pertinentes.
3. Acuerda qué detiene la publicación: precios o variantes incorrectos, compras bloqueadas, instrucciones ausentes o consultas sin entregar. Designa a quien acepta los resultados y a quien puede restaurar los archivos y ajustes anteriores.
4. Durante la ventana de producción acordada, aplica los archivos y la configuración revisados mediante el proceso de despliegue admitido, renueva las cachés afectadas y comprueba los mismos productos representativos. Vigila el comportamiento real del carrito y la cola de consultas después del cambio.

Qué preguntar a tu desarrollador o agencia

• ¿Quién controla cada campo modificado: el personal, la importación o un sistema externo, y conservará el cambio la siguiente actualización de datos?
• ¿Qué plantilla, hook y versión del módulo produjeron el resultado probado y qué debe volver a probarse tras una actualización?
• ¿Dónde están los resultados de compra y consulta, incluidos móvil, personalización obligatoria y combinación seleccionada?
• ¿Quién mantiene las traducciones, las excepciones del contenido compartido y las consultas sin responder, y dónde están las instrucciones de reversión?

Preguntas de los propietarios

¿Necesito módulos separados para una guía y un formulario de preguntas?

El módulo de pestañas enlazado incluye un formulario de preguntas de producto como opción de contenido. Compara su contexto de producto, destinatarios y flujo de respuesta con lo que necesita tu equipo antes de añadir otro componente. Evita publicar formularios que compitan por la misma consulta.

¿Puedo poner un documento específico de un cliente en los adjuntos del producto?

Los archivos adjuntos nativos de producto son públicos. Mantén un presupuesto negociado o un documento con datos de clientes en un flujo protegido y verifica el acceso con una cuenta ajena antes de compartir su enlace.

¿Pocos clics en pestañas significan que debo quitar el contenido?

Comprueba primero que los clientes puedan encontrarlo y abrirlo y si la misma respuesta ya es visible en otro sitio. Un manual o una nota de compatibilidad pueden ser importantes para un grupo pequeño de compradores. Considera las consultas y devoluciones junto con los clics antes de eliminar información que esos compradores necesitan.

¿Debo publicar respuestas de consultas privadas como FAQ de producto?

Publica una respuesta general revisada por separado cuando ayude a otros compradores. Elimina los datos personales, confirma que el consejo se aplica a los productos y variantes pertinentes y asigna a alguien para mantenerla a medida que cambie la gama.