Una ficha de producto debe soportar mucha información sin convertirse en un muro de texto. Las pestañas responden a esa necesidad, siempre que no entierren lo que decide la compra y sigan siendo legibles para los buscadores.
Lo que propone PrestaShop de forma nativa
El tema por defecto muestra pestañas predefinidas: descripción, detalles del producto y archivos adjuntos si los hay. Los módulos instalados pueden añadir más, cada uno enganchándose al mismo emplazamiento.
Dos límites. El contenido de cada pestaña corresponde a un campo fijo del producto, sin posibilidad de crear otros. Y el orden lo determina la posición de los módulos, no una intención editorial.
Resultado habitual: una pestaña «Opiniones» antes que una pestaña «Características», cuando el cliente quiere comprobar primero las especificaciones.
Pestañas o acordeón
La cuestión se resuelve por el formato de pantalla.
En escritorio, las pestañas horizontales funcionan bien: todas las etiquetas son visibles, el visitante ve lo que existe y elige.
En móvil, las pestañas horizontales se vuelven problemáticas. Cuatro o cinco etiquetas no caben en el ancho y el desplazamiento horizontal oculta las últimas. El acordeón vertical, donde cada sección se despliega en su sitio, es claramente más usable.
La solución que funciona consiste en pasar de un formato a otro según el ancho, conservando el mismo contenido y la misma estructura HTML.
La indexabilidad, punto crítico
Es el aspecto que la mayoría de implementaciones trata mal.
Un contenido plegado en una pestaña sigue siendo indexable siempre que esté presente en el código HTML de la página, simplemente ocultado por estilos. Es el comportamiento estándar y no plantea ningún problema.
En cambio, un contenido cargado al hacer clic, mediante una llamada asíncrona, no existe en el momento del análisis inicial. Puede verse en un renderizado posterior, pero nada lo garantiza, y su peso en la evaluación de la página es incierto.
La regla es por tanto sencilla: todo el contenido de las pestañas debe estar presente en el HTML servido. La carga diferida solo se justifica para elementos pesados como un vídeo o una lista de opiniones paginada.
Un punto complementario a menudo ignorado: Google indica que trata el contenido oculto tras una interacción como contenido de menor importancia en la versión móvil. No lo descalifica, pero es un argumento para dejar desplegado lo que más importa.
Pestañas de Ficha de Producto PrestaShop — Gestor Drag & DropPestañas de ficha de producto a medida, reordenadas por arrastrar y soltar.€79,00
Qué pestañas según el tipo de producto
Tres configuraciones, según la naturaleza del catálogo.
Producto técnico. Características, compatibilidades, documentación, garantía y posventa. La descripción comercial se queda corta y desplegada arriba.
Producto textil o moda. Descripción, composición y cuidado, guía de tallas, envío y devoluciones. La guía de tallas no debería estar en una pestaña sino junto al selector, y la pestaña servíría para la versión detallada.
Producto alimentario o cosmético. Descripción, composición y alérgenos, valores nutricionales o lista de ingredientes, conservación, origen. Atención: las menciones obligatorias deben seguir siendo accesibles antes de la compra, cosa que una pestaña permite, pero no deben ser difíciles de encontrar.
El orden
Tres principios.
La primera pestaña está abierta por defecto y la ve la práctica totalidad de los visitantes. Las siguientes las ve una fracción decreciente. Coloque primero lo que levanta la objeción más frecuente en esa categoría.
El orden sigue el recorrido de decisión, no el orden administrativo de sus campos. Descripción, luego verificación técnica, luego tranquilidad, luego logística.
El orden puede variar por categoría. En productos técnicos, las características van antes que la descripción. En decoración, al revés.
Las pestañas vacías
Problema sistemático en cuanto la configuración se aplica a todo el catálogo: una pestaña «Documentación» mostrada en productos que no la tienen.
El comportamiento esperado es el ocultamiento automático de toda pestaña sin contenido. Es evidente y sin embargo rara vez implementado, porque la configuración se hace producto por producto en los casos simples y globalmente en los demás.
Prevea también el caso inverso: un contenido introducido pero sin pestaña configurada para acogerlo, lo que hace la información invisible.
Cuántas pestañas
Cuatro o cinco como máximo. Más allá, se acumulan dos efectos: las etiquetas ya no caben en una línea y el visitante deja de leerlas.
Si tiene más contenido, la pregunta no es cómo añadir una pestaña, sino si ese contenido merece estar en la ficha. Un manual completo está mejor como descarga que como sexta pestaña.
El enlace directo a una pestaña
Detalle útil y barato: permitir apuntar a una pestaña concreta desde un enlace.
Sirve en tres casos: un enlace «ver opiniones» junto a la valoración en la parte alta de la ficha, un envío desde un email de atención al cliente y un enlace desde un artículo de blog hacia la sección técnica de un producto.
Técnicamente supone que cada pestaña tenga un identificador y que el script abra la correcta al llegar a la página.
El módulo Pestañas de Ficha de Producto para PrestaShop gestiona esta configuración en PrestaShop 8 y 9: creación de pestañas personalizadas con orden por arrastrar y soltar, configuración por categoría de producto, contenido presente en el HTML para seguir siendo indexable, ocultamiento automático de las pestañas vacías y cambio a acordeón en móvil.