Pestañas de producto: añadir especificaciones, guías y contenido personalizado a las páginas de producto

Última actualización junio de 2026, el hook de pestañas displayProductExtraContent y el comportamiento de las Características descritos aquí se aplican a PrestaShop 1.6, 1.7, 8 y 9.

Una página de producto tiene que satisfacer a dos personas que casi nunca coinciden: el comprador que ya ha decidido y solo quiere el botón Añadir al carrito, y el investigador que no se comprometerá hasta haber comprobado las dimensiones, la compatibilidad, la tabla de tallas y las condiciones de garantía. Si metes todo lo que necesita el investigador en la descripción visible, entierras al comprador bajo un muro de texto. Si lo recortas para mantener la página limpia, el investigador se va a buscar la respuesta a otra parte. Las pestañas son la forma en que PrestaShop resuelve esa tensión: permiten que la página incluya contenido de referencia profundo (especificaciones, guías, descargas, preguntas frecuentes) sin imponérselo a todo el mundo que aterriza en ella. Esta guía trata específicamente de llevar ese contenido a las pestañas en una tienda PrestaShop: qué crea la plataforma por ti, qué no crea y cuál es la forma más limpia de añadir secciones con pestañas personalizadas por producto, por categoría o en toda la tienda.

Si estás en una fase anterior del proceso, decidiendo qué debe aparecer en la página y en qué orden, empieza por la anatomía de una página de producto y las recomendaciones más amplias de buenas prácticas de diseño de páginas de producto. Este artículo continúa a partir de esa decisión, en la mecánica de la propia barra de pestañas.

Qué te ofrecen realmente las pestañas predeterminadas de PrestaShop

En una tienda PrestaShop 1.7, 8 o 9 estándar, la barra de pestañas la renderizan las plantillas de producto del tema, principalmente themes/your-theme/templates/catalog/product.tpl y los parciales de catálogo relacionados que incluye, y las pestañas predeterminadas se rellenan desde fuentes fijas:

• Descripción, el campo largo description de la pestaña Descripción del editor de producto. La descripción corta (resumen) normalmente se muestra encima del precio, no dentro de una pestaña.
• Detalles del producto, toma la información de los datos estructurados del producto: las Características que asignas en la pestaña Detalles del producto, además de la Referencia/EAN/UPC del producto. Es la pestaña que más comerciantes subestiman.
• Descarga, una pestaña independiente que aparece solo cuando has subido archivos adjuntos (manuales, fichas técnicas) al producto. En el tema classic es una pestaña propia, no integrada dentro de Detalles del producto.
• Reseñas. Aparece solo si hay un módulo de reseñas instalado y enganchado a la página de producto. En 1.7/8/9, el módulo oficial Product Comments se renderiza mediante el hook displayProductExtraContent (los hooks heredados displayProductTab/displayProductTabContent que usaba en 1.6 se eliminaron en 1.7).

¿Y eso qué implica? La mayoría de las pestañas predeterminadas no son texto libre. La pestaña Detalles del producto se construye a partir de datos estructurados, precisamente por eso vale más de lo que parece y por eso "escríbelo sin más en la descripción" es el reflejo equivocado para cualquier dato medible.

Las Características son la pestaña que la mayoría de tiendas ignora, y la que rinde por duplicado

Para cualquier artículo con atributos medibles (electrónica, herramientas, muebles, cualquier cosa con ficha técnica), el lugar correcto es Catálogo → Atributos & Características → Características, no un párrafo dentro de la descripción. Creas una característica una vez (por ejemplo, "Peso", "Material", "Potencia de salida"), le asignas valores predefinidos y después vinculas esos valores a cada producto en su pestaña Detalles.

Esto rinde en dos lugares a la vez, y por eso es la decisión sobre pestañas con mayor impacto que vas a tomar:

• La pestaña de especificaciones se genera sola. Las Características se muestran automáticamente en la pestaña Detalles del producto como una lista limpia de nombre/valor: sin HTML que maquetar a mano, sin tablas que mantener producto por producto. Cambias un valor una vez y se actualizan todas las superficies.
• Alimentan el filtrado por facetas. Esas mismas características nutren la navegación por capas (ps_facetedsearch) en las páginas de categoría, de modo que "Material: cuero" o "Potencia: 2000W" se convierte en un filtro en el que los clientes pueden hacer clic. El contenido en texto libre de la descripción nunca puede hacer eso.

La disciplina aquí es la misma que mantiene limpias las descripciones: los datos estructurados van en Características, la prosa va en la descripción. Si estás escribiendo la parte narrativa, cómo escribir descripciones de producto que posicionan y convierten la cubre, y la propia tabla de especificaciones forma parte de la decisión de comprar o volver atrás explicada en la anatomía de una página de producto.

Los cuatro tipos de contenido de pestaña, y dónde encaja cada uno

No todo el contenido de referencia necesita el mismo lugar. Hacer coincidir el tipo de contenido con el mecanismo adecuado es lo que mantiene un catálogo de productos manejable con 50 productos y también con 5.000.

El error que vemos con más frecuencia es usar un campo personalizado por producto para contenido que es idéntico en toda una categoría: una única tabla de tallas de calzado copiada y pegada en 300 productos. Cuando cambia la tabla, son 300 ediciones y una incoherencia casi garantizada. El contenido de pestaña por categoría lo resuelve: el mismo bloque se muestra en cada producto de la categoría y se edita en un solo sitio. Ese mecanismo por categoría, de escribir una vez, es exactamente lo que un módulo de pestañas como Product Extra Info Tabs añade sobre el núcleo.

Añadir pestañas realmente personalizadas: los enfoques limpios

Cuando vas más allá de las características y los adjuntos, necesitas una pestaña que contenga contenido arbitrario. Hay tres formas de hacerlo en PrestaShop, en orden ascendente según lo que te costarán más adelante.

La razón por la que existe la vía del módulo es la tercera fila: editar product.tpl en un tema hijo funciona hasta que la siguiente actualización del tema reorganiza esos parciales, y entonces tus pestañas desaparecen un martes sin avisar. Un módulo que registra su contenido mediante el hook displayProductExtraContent (el hook moderno de pestañas en 1.7/8/9) añade pestañas sin tocar un solo archivo del tema, así que sobrevive a actualizaciones del tema y del núcleo. Ese es todo el sentido de hacerlo a la manera de PrestaShop en lugar de hacerlo por la vía rápida.

Cómo se engancha un módulo de pestañas

Si alguna vez miras bajo el capó, PrestaShop moderno (1.7, 8 y 9) construye las pestañas personalizadas mediante un único hook: displayProductExtraContent. Un módulo se engancha a él y devuelve uno o varios objetos ProductExtraContent: cada uno lleva un título (la etiqueta clicable de la pestaña) y contenido (el cuerpo del panel), definidos con setTitle() y setContent(); después, el ProductExtraContentFinder de PrestaShop los recopila y los renderiza como pestañas Bootstrap. El esqueleto de un hook así se ve de esta forma:

public function hookDisplayProductExtraContent($params)
{
    $tab = (new PrestaShop\PrestaShop\Core\Product\ProductExtraContent())
        ->setTitle($this->l('Care & Sizing'))
        ->setContent($this->fetch('module:mymodule/views/templates/hook/tab.tpl'));

    return [$tab];
}

(Esto sustituyó el antiguo modelo de dos hooks de 1.6: displayProductTab para la etiqueta y displayProductTabContent para el cuerpo, ambos eliminados en 1.7.) Un módulo bien construido te permite definir varias pestañas, orientarlas por producto o categoría y, algo importante, insertar el contenido en el HTML inicial de la página en lugar de cargarlo por AJAX al hacer clic. Ese último detalle no es cosmético: es la diferencia entre contenido que Google indexa y contenido que nunca ve, que es la siguiente sección.

¿Google leerá lo que hay dentro de una pestaña oculta?

Esta es la pregunta que de verdad importa para la parte SEO de la decisión, y la respuesta honesta tiene dos mitades:

• El contenido oculto con CSS (display:none) generalmente se indexa. Cuando todo el contenido de la pestaña está en el HTML inicial de la página y la pestaña solo está colapsada visualmente, Google puede leerlo. Así que tus especificaciones, respuestas de FAQ y textos de guía contribuyen a la relevancia semántica de la página aunque el visitante solo vea una pestaña cada vez. Esa es la ventaja: aportas profundidad sin una página visible recargada.
• El contenido cargado por AJAX al hacer clic puede no indexarse. Si una pestaña obtiene su cuerpo solo cuando el cliente hace clic, ese texto no está en el HTML que el rastreador recibe primero, y no puedes confiar en que se indexe.

¿Y eso qué implica? Da preferencia a pestañas cuyo contenido se renderiza en servidor dentro del HTML inicial. Es una sola decisión técnica con un retorno desproporcionado: las mismas palabras sirven para el investigador y para la búsqueda. Si el contenido de pestañas ocultas posiciona con la misma fuerza que el contenido visible es algo realmente debatido, y las propias directrices de Google han cambiado con los años; por eso, para el contenido por el que más te interesa posicionar, lo más seguro es mantener tu texto más potente en la descripción siempre visible y tratar el contenido de pestañas como profundidad de apoyo, no como el único hogar de palabras clave importantes. Para el texto de producto que carga con el trabajo principal de posicionamiento, consulta cómo escribir descripciones de producto que posicionan y convierten.

[CAPTURA DE PANTALLA: página de producto del front office con la barra de pestañas abierta en una pestaña personalizada "Cuidado & tallas", además de la vista del código fuente de la página mostrando que el texto de esa pestaña está presente en el HTML inicial, dejar claro que el contenido se renderiza en servidor, no se carga por AJAX.]

Diseñar la barra de pestañas para que se use

Una pestaña que nadie abre es peso muerto. Unas pocas decisiones separan una barra que ayuda de una que abruma:

• Mantenla en 3–5 pestañas. Más allá de siete, la barra se percibe como desorden y las etiquetas empiezan a saltar de línea. Fusiona contenidos relacionados de forma natural: una pestaña "Envíos & devoluciones" funciona mejor que dos pestañas pobres.
• Ordena por demanda, no por tu organigrama. Primero la descripción, después las especificaciones (es la pestaña más abierta después del texto principal en productos técnicos), y al final las pestañas de bajo tráfico, como Descargas o Garantía.
• Oculta las pestañas vacías. Un producto sin adjuntos no debería mostrar una pestaña Descargas vacía: las pestañas vacías dan sensación de tienda a medio terminar. Los buenos módulos de pestañas suprimen automáticamente una pestaña cuando su contenido está en blanco; si estás sobrescribiendo plantillas a mano, tienes que programar esa comprobación tú mismo (otra razón por la que la vía del módulo envejece mejor).
• Da formato al interior de la pestaña. Tablas para especificaciones, viñetas para características, bloques cortos para FAQ. Un párrafo denso dentro de una pestaña no lo lee precisamente el investigador para el que abriste esa pestaña.

En móvil, considera convertir las pestañas en un acordeón

PrestaShop estándar no garantiza un acordeón móvil para las pestañas de producto: según el CSS del tema, las pestañas Bootstrap pueden simplemente partirse en varias líneas o mantenerse como una barra horizontal, así que primero comprueba cómo se comporta realmente tu propio tema en un teléfono. Cuando no lo haga ya, merece la pena implementar la barra de pestañas como un acordeón apilado por debajo de un punto de ruptura, tocando un encabezado para desplegar su sección. En general, es el comportamiento correcto y conviene diseñarlo deliberadamente:

• El acordeón supera al desplazamiento horizontal. Una fila de pestañas que exige deslizar lateralmente en un teléfono deja etiquetas fuera de la pantalla; un acordeón muestra todos los títulos de sección a la vez y solo expande el que se toca.
• Nunca anides pestañas dentro de pestañas. La carga cognitiva de una navegación de dos niveles en una pantalla de 6 pulgadas es demasiado alta: aplánala.
• Prueba el orden colapsado. Un acordeón normalmente reutiliza el mismo orden de origen, así que la pestaña que decidiste que era la "primera" es la que un cliente en móvil desplegará primero: verifícalo en tu tema. Ordena una vez y debería funcionar bien en ambos diseños.

Pestañas que en realidad no son especificaciones: reseñas, preguntas & respuestas, y vídeo

Varias cosas que a menudo viven en la barra de pestañas no son contenido de referencia en absoluto: son funcionalidades separadas que casualmente se renderizan mediante los mismos hooks, y cada una tiene su propio lugar dentro de este conjunto:

• La pestaña Reseñas la controla un módulo de reseñas, no nada del editor de producto. Elegir cuál usar es una decisión aparte: reseñas en PrestaShop: integradas frente a terceros.
• Una pestaña de preguntas & respuestas de producto / "preguntar sobre este producto" convierte dudas previas a la compra en objeciones resueltas; eso se cubre en preguntar sobre producto, y la estrategia más amplia de FAQ en páginas de FAQ para comercio electrónico.
• Un vídeo de producto a menudo se sitúa en su propia pestaña o panel: consulta integración de YouTube para PrestaShop.

Mantener estos elementos como funcionalidades propias (en lugar de pegar su contenido dentro de una pestaña personalizada genérica) es lo que permite que cada uno haga su trabajo: una pestaña de reseñas necesita agregación de estrellas y datos estructurados, no un cuadro de texto.

Mide qué pestañas se ganan su sitio

No tienes que adivinar qué pestañas importan. Etiqueta el encabezado de cada pestaña con un evento de clic en tu analítica y deja que un mes de tráfico real te lo diga:

• Qué buscan realmente los clientes. La pestaña más abierta es el contenido que deberías promocionar hacia la parte superior de la página, quizá incluso sacándolo de una pestaña e incorporándolo al cuerpo visible.
• Qué pestañas están muertas, una pestaña que casi nunca se abre tras miles de visualizaciones es candidata a fusionarse o eliminarse, recortando la barra hacia ese punto óptimo de 3–5.
• Si la profundidad de pestañas se correlaciona con la compra, si los clientes que abren la pestaña de especificaciones convierten notablemente mejor, es una señal para mostrar las especificaciones con más protagonismo en lugar de esconderlas a un clic.

Preguntas frecuentes

¿Cuál es la diferencia entre Características y una pestaña personalizada, y cuándo uso cada una?

Las Características son pares estructurados de nombre/valor (Peso: 2,4 kg) que se muestran automáticamente en la pestaña Detalles del producto y alimentan la búsqueda por facetas. Una pestaña personalizada contiene contenido libre: una guía de cuidados, una FAQ, notas de compatibilidad, que no encaja en una lista de nombre/valor y que un cliente nunca filtraría. Regla práctica: si es una especificación medible por la que un comprador podría filtrar, es una Característica; si es prosa o una guía, es una pestaña personalizada.

¿Puedo mostrar la misma pestaña en todos los productos de una categoría sin editar cada uno?

No solo con el núcleo: el núcleo te da Características y Archivos adjuntos por producto, pero no una "pestaña para toda la categoría" nativa. Un módulo de pestañas que orienta contenido por categoría sí lo hace: escribes la tabla de tallas una vez y se muestra en cada producto de esa categoría, así que un cambio es una edición, no 300. Esa es la principal razón por la que las tiendas recurren a un módulo de pestañas en lugar de pegar contenido compartido producto por producto.

¿El contenido oculto en pestañas cuenta para SEO o se desperdicia?

Si el contenido se renderiza en servidor dentro del HTML inicial de la página y solo está colapsado con CSS, Google generalmente lo lee, así que contribuye a la relevancia aunque el visitante vea una sola pestaña cada vez. La trampa son las pestañas AJAX que cargan su cuerpo solo al hacer clic; ese texto no está en la primera respuesta y no puedes contar con que se indexe. Mantén tus palabras clave más importantes en la descripción siempre visible y usa las pestañas como profundidad de apoyo.

¿Las pestañas personalizadas sobrevivirán a una actualización del tema o de PrestaShop?

Si se añaden mediante el hook displayProductExtraContent (un módulo), sí: no tocan archivos del tema, así que una actualización del tema no puede romperlas. Si las añadiste editando directamente product.tpl o tabs.tpl, no: la siguiente actualización del tema puede reorganizar esos parciales y tus pestañas desaparecen en silencio. Esa seguridad frente a actualizaciones es todo el argumento a favor de la vía del hook frente a la cirugía de plantillas.

¿Cuántas pestañas son demasiadas?

Mantenlas en 3–5. A partir de unas siete, la barra salta de línea, las etiquetas se cortan y los clientes dejan de recorrerla visualmente. Fusiona pestañas pobres (una sola "Envíos & devoluciones" gana a dos), ordénalas por demanda en lugar de por tu lógica interna y oculta automáticamente cualquier pestaña cuyo contenido esté vacío para que la barra nunca parezca a medio hacer.

El principio que hay debajo de todo esto es el mismo que rige toda la página de producto: atender al comprador rápido y al investigador meticuloso en una misma página sin hacer que ninguno sienta el contenido del otro como una molestia. Las pestañas son la herramienta de PrestaShop precisamente para eso: pon los datos estructurados en Características, el contenido compartido en pestañas por categoría, el detalle por producto en pestañas personalizadas limpias, mantén el texto más potente renderizado en servidor y visible, y deja que los datos de clics te digan qué promocionar después. Si lo haces bien, la página se mantiene despejada para quien ya está listo para comprar y, al mismo tiempo, responde a todos los que todavía no lo están.