Onglets Fiche Produit PrestaShop — Documentation
Installer, configurer et utiliser le module de gestion d'onglets de fiche produit : portées, contenu HTML ou CMS, glisser-déposer et accordéon mobile.
Ce module vous permet de créer des onglets personnalisés sur la fiche produit de votre boutique PrestaShop 8 ou 9. Chaque onglet peut viser tous les produits, certaines catégories ou une sélection précise de produits, afficher du contenu HTML enrichi ou une page CMS, et se transformer en accordéon sur mobile. Cette documentation couvre l’installation, la configuration et l’utilisation au quotidien.
Installation
Le module s’installe comme n’importe quel module PrestaShop, sans dépendance ni configuration serveur particulière.
- Dans le back-office, ouvrez Modules > Gestionnaire de modules, puis cliquez sur Téléverser un module.
- Sélectionnez l’archive ZIP du module et laissez l’installation se dérouler.
- Une fois installé, un nouvel accès Catalogue > DF Tabs Builder apparaît dans le menu du back-office.
Le module crée cinq tables dédiées à ses données. Elles sont automatiquement supprimées à la désinstallation, sans laisser de résidus en base.
Réglages généraux
Depuis la fiche du module, le bouton Configurer ouvre les réglages généraux, indépendants des onglets eux-mêmes.
Accordéon mobile
Cette option active la transformation automatique des onglets en accordéon sur les petits écrans. Lorsqu’elle est activée, sous une certaine largeur d’écran, la rangée d’onglets devient une pile d’en-têtes dépliables à ouverture unique. Au-dessus de cette largeur, les onglets natifs de votre thème restent affichés normalement.
Point de rupture
Le point de rupture définit la largeur d’écran (en pixels) au-dessous de laquelle le mode accordéon s’active. La valeur par défaut est 768 pixels, ce qui correspond à la bascule tablette/mobile de la plupart des thèmes. Vous pouvez saisir une valeur comprise entre 320 et 1920 pixels.
Créer un onglet
Ouvrez Catalogue > DF Tabs Builder, puis cliquez sur Ajouter un onglet. Le formulaire d’édition regroupe tous les réglages d’un onglet.
Titre de l’onglet
Le titre est saisi langue par langue : c’est le libellé affiché sur l’onglet, sur la fiche produit. Renseignez-le pour chacune des langues de votre boutique.
Statut
Le commutateur Actif permet d’activer ou de désactiver l’onglet sans le supprimer. Un onglet inactif n’apparaît sur aucune fiche produit.
Cibler les bons produits
Le champ Afficher sur détermine la portée de l’onglet. Trois choix sont possibles.
Tous les produits
L’onglet est global : il apparaît sur toutes les fiches produit de la boutique. C’est le choix idéal pour un onglet de réassurance, de livraison ou de FAQ commune.
Catégories spécifiques
L’onglet ne s’affiche que sur les produits appartenant aux catégories sélectionnées. Une arborescence de catégories à cases à cocher, avec recherche, apparaît alors : cochez une ou plusieurs catégories. Un produit rattaché à l’une des catégories cochées verra l’onglet.
Produits spécifiques
L’onglet ne cible qu’une sélection précise de produits. Un champ de recherche apparaît : tapez au moins deux caractères pour rechercher un produit par nom, par référence ou par identifiant. Cliquez sur un résultat pour l’ajouter ; il s’affiche alors sous forme de pastille. Cliquez sur la croix d’une pastille pour retirer le produit de la sélection.
Vous pouvez mutualiser un onglet d’entretien sur tout un rayon en le ciblant sur une catégorie, tout en réservant un onglet technique à quelques références précises via le ciblage par produit.
Choisir le contenu de l’onglet
Le champ Type de contenu propose deux sources.
HTML personnalisé
Vous rédigez le contenu directement dans l’éditeur enrichi intégré, langue par langue. Vous pouvez y insérer du texte mis en forme, des listes, des images, des tableaux ou des vidéos intégrées. C’est le mode recommandé pour un contenu propre à l’onglet.
Page CMS
Vous reliez une page CMS existante de votre boutique. Son contenu est alors affiché dans l’onglet, dans la langue du visiteur. C’est pratique pour réutiliser une politique de retours ou une charte d’entretien déjà rédigée, sans la dupliquer : toute mise à jour de la page CMS se répercute automatiquement dans l’onglet.
Un onglet dont le contenu résolu est vide n’est pas affiché sur la fiche produit. Cela évite d’afficher un onglet vide, par exemple lorsqu’une page CMS est désactivée.
Réorganiser les onglets
Dans la liste des onglets, une colonne de position permet de réordonner les onglets par glisser-déposer : attrapez la poignée d’une ligne et déplacez-la vers le haut ou vers le bas. L’ordre défini ici est exactement celui dans lequel les onglets apparaissent sur la fiche produit, de gauche à droite.
Comportement sur mobile
Lorsque l’accordéon mobile est activé dans les réglages généraux, les onglets se transforment automatiquement en accordéon sous le point de rupture défini. Chaque onglet devient un en-tête cliquable muni d’un chevron ; l’ouverture d’un en-tête referme le précédent (ouverture unique). Au-dessus du point de rupture, les onglets natifs de votre thème sont restaurés à l’identique : le comportement est non destructif.
L’accordéon s’appuie sur le balisage d’onglets standard du thème. Sur un thème au balisage très atypique, si l’accordéon ne peut pas se construire, les onglets restent affichés normalement : aucune régression n’est introduite.
Désinstallation
La désinstallation depuis le Gestionnaire de modules supprime le module, ses réglages et l’ensemble des onglets créés, ainsi que les cinq tables associées. Une confirmation est demandée car cette opération efface définitivement tous les onglets.
Dépannage
Mes onglets n’apparaissent pas sur la fiche produit
Vérifiez que l’onglet est actif, que sa portée correspond bien au produit consulté (catégorie ou produit ciblé), et que son contenu n’est pas vide. Pour un onglet de type page CMS, assurez-vous que la page CMS reliée est active dans la langue du visiteur.
L’accordéon ne se déclenche pas sur mobile
Assurez-vous que l’option d’accordéon mobile est activée dans les réglages généraux et que la largeur de votre écran est bien inférieure au point de rupture configuré. Videz le cache de PrestaShop après toute modification des réglages.
Un onglet s’affiche au mauvais endroit
L’ordre des onglets est déterminé par la colonne de position dans la liste. Réordonnez les onglets par glisser-déposer, puis rechargez la fiche produit pour vérifier.