Une fiche produit doit porter beaucoup d’informations sans devenir un mur de texte. Les onglets répondent à ce besoin, à condition de ne pas y enfouir ce qui décide de l’achat et de rester lisibles par les moteurs.
Ce que PrestaShop propose nativement
Le thème par défaut affiche des onglets prédéfinis : description, détails du produit, et pièces jointes le cas échéant. Les modules installés peuvent en ajouter, chacun venant se greffer sur le même emplacement.
Deux limites. Le contenu de chaque onglet correspond à un champ fixe du produit, sans possibilité d’en créer d’autres. Et l’ordre est déterminé par la position des modules, pas par une intention éditoriale.
Résultat courant : un onglet « Avis » avant un onglet « Caractéristiques », alors que le client veut d’abord vérifier les spécifications.
Onglets ou accordéon
La question se tranche par le format d’écran.
Sur desktop, les onglets horizontaux fonctionnent bien : les intitulés sont tous visibles, le visiteur voit ce qui existe et choisit.
Sur mobile, les onglets horizontaux deviennent problématiques. Quatre ou cinq intitulés ne tiennent pas sur la largeur, et le défilement horizontal masque les derniers. L’accordéon vertical, où chaque section se déplie sur place, est nettement plus utilisable.
La solution qui fonctionne consiste à basculer d’un format à l’autre selon la largeur, en conservant le même contenu et la même structure HTML.
L’indexabilité, point critique
C’est l’aspect que la plupart des implémentations traitent mal.
Un contenu replié dans un onglet reste indexable à condition qu’il soit présent dans le code HTML de la page, simplement masqué par du style. C’est le comportement standard et il ne pose aucun problème.
En revanche, un contenu chargé au clic, par un appel asynchrone, n’existe pas au moment de l’analyse initiale. Il peut être vu lors d’un rendu ultérieur, mais rien ne le garantit, et son poids dans l’évaluation de la page est incertain.
La règle est donc simple : tout le contenu des onglets doit être présent dans le HTML servi. Le chargement différé ne se justifie que pour des éléments lourds comme une vidéo ou une liste d’avis paginée.
Un point complémentaire souvent ignoré : Google indique traiter le contenu masqué derrière une interaction comme du contenu de moindre importance sur la version mobile. Cela ne le disqualifie pas, mais cela plaide pour laisser déplié ce qui compte le plus.
Onglets Fiche Produit PrestaShop — Gestionnaire Drag & DropDes onglets fiche produit sur mesure, réorganisés en glisser-déposer.€79.00
Quels onglets selon le type de produit
Trois configurations, selon la nature du catalogue.
Produit technique. Caractéristiques, compatibilités, documentation, garantie et service après-vente. La description commerciale reste courte et dépliée au-dessus.
Produit textile ou mode. Description, composition et entretien, guide des tailles, livraison et retours. Le guide des tailles ne devrait pas être dans un onglet mais à côté du sélecteur, l’onglet servant à la version détaillée.
Produit alimentaire ou cosmétique. Description, composition et allergènes, valeurs nutritionnelles ou liste d’ingrédients, conservation, origine. Attention : les mentions obligatoires doivent rester accessibles avant l’achat, ce qu’un onglet permet, mais elles ne doivent pas être difficiles à trouver.
L’ordre
Trois principes.
Le premier onglet est ouvert par défaut et il est vu par la quasi-totalité des visiteurs. Les suivants sont vus par une fraction décroissante. Placez donc en premier ce qui lève l’objection la plus fréquente sur cette catégorie.
L’ordre suit le parcours de décision, pas l’ordre administratif de vos champs. Description, puis vérification technique, puis rassurance, puis logistique.
L’ordre peut varier par catégorie. Sur des produits techniques, les caractéristiques passent avant la description. Sur de la décoration, l’inverse.
Les onglets vides
Problème systématique dès que la configuration est appliquée à tout le catalogue : un onglet « Documentation » affiché sur des produits qui n’en ont pas.
Le comportement attendu est le masquage automatique de tout onglet sans contenu. C’est évident et pourtant rarement implémenté, parce que la configuration est faite produit par produit dans les cas simples et globalement dans les autres.
Prévoyez également le cas inverse : un contenu saisi mais aucun onglet configuré pour l’accueillir, ce qui rend l’information invisible.
Combien d’onglets
Quatre à cinq maximum. Au-delà, deux effets se cumulent : les intitulés ne tiennent plus sur une ligne, et le visiteur ne les lit plus.
Si vous avez davantage de contenu, la question à se poser n’est pas comment ajouter un onglet, mais si ce contenu mérite d’être sur la fiche. Une notice complète a davantage sa place en téléchargement qu’en sixième onglet.
Le lien direct vers un onglet
Détail utile et peu coûteux : permettre de pointer vers un onglet précis depuis un lien.
Cela sert dans trois cas : un lien « voir les avis » près de la note en haut de fiche, un renvoi depuis un email de service client, et un lien depuis un article de blog vers la section technique d’un produit.
Techniquement, cela suppose que chaque onglet dispose d’un identifiant et que le script ouvre le bon onglet à l’arrivée sur la page.
Le module Onglets Fiche Produit pour PrestaShop gère cette configuration sur PrestaShop 8 et 9 : création d’onglets personnalisés avec ordre en glisser-déposer, configuration par catégorie de produit, contenu présent dans le HTML pour rester indexable, masquage automatique des onglets vides et bascule en accordéon sur mobile.
