[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fqgk_Gtd8m3HqXDSJPSCo7lpMwxHVUXonl-sxz03JigE":22,"megamenu":61,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":130,"header-db":198,"$f3TD187ZxdaSX5G510ywRjtmVZHXX4lgcW9sn94Seowo":211,"footer-db":225},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":34,"psVersions":35,"content":39,"faq":40,"tldr":56,"readingTime":57,"generatedAt":58,"publishDate":58,"relatedArticles":59,"sourceCategory":60},"Thème PrestaShop : le hook Home ne s'affiche plus — diagnostic et correction","theme-prestashop-hook-home-ne-affiche-plus-diagnostic-correction","Votre configurateur de thème ou slider PrestaShop ne s'affiche plus ? Découvrez comment diagnostiquer et corriger les problèmes de hooks Home et Top.","configuration",[28,29,30,31,32,33],"hooks prestashop","configurateur de thème","slider prestashop","position modules","hook home","hook top","debutant",[36,37,38],"1.6","1.7","8.x","\u003Ch2>Introduction\u003C\u002Fh2>\n\u003Cp>Vous venez de configurer votre thème PrestaShop, vous avez paramétré vos images dans le configurateur de thème et votre slider… et rien ne s'affiche en page d'accueil. Frustrant, surtout quand tout semblait correct dans le back-office.\u003C\u002Fp>\n\u003Cp>Dans la grande majorité des cas, ce problème provient d'une \u003Cstrong>confusion entre les hooks\u003C\u002Fstrong> — ces fameux « points d'accroche » qui déterminent où chaque module s'affiche dans votre boutique. Voyons ensemble comment identifier et résoudre ce type de dysfonctionnement.\u003C\u002Fp>\n\u003Ch2>Comprendre les hooks d'affichage PrestaShop\u003C\u002Fh2>\n\u003Ch3>Qu'est-ce qu'un hook ?\u003C\u002Fh3>\n\u003Cp>Un hook (ou point d'accroche) est un emplacement prédéfini dans le template de votre thème où PrestaShop peut injecter le contenu d'un module. Chaque thème définit ses propres hooks et leur positionnement visuel.\u003C\u002Fp>\n\u003Cp>Les hooks les plus courants pour la page d'accueil sont :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Hook\u003C\u002Fth>\u003Cth>Emplacement typique\u003C\u002Fth>\u003Cth>Usage courant\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`displayTop` \u002F `Top`\u003C\u002Fth>\u003Cth>En-tête, sous le menu\u003C\u002Fth>\u003Cth>Bannières, barres promotionnelles\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`displayHome` \u002F `Home`\u003C\u002Fth>\u003Cth>Corps de la page d'accueil\u003C\u002Fth>\u003Cth>Produits vedettes, blocs éditoriaux\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`displayBanner`\u003C\u002Fth>\u003Cth>Zone de bannière\u003C\u002Fth>\u003Cth>Slider principal\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`displayTopColumn`\u003C\u002Fth>\u003Cth>Colonne haute\u003C\u002Fth>\u003Cth>Contenu secondaire\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ch3>Le piège classique : Home vs Top\u003C\u002Fh3>\n\u003Cp>Beaucoup de thèmes — notamment les thèmes premium ou personnalisés — \u003Cstrong>redéfinissent l'emplacement visuel\u003C\u002Fstrong> de ces hooks. Ce qui s'appelait « Home » dans le thème par défaut peut correspondre au hook \u003Ccode>Top\u003C\u002Fcode> dans votre thème actuel, et inversement.\u003C\u002Fp>\n\u003Cp>Concrètement : vous configurez vos images sur le hook \u003Ccode>Home\u003C\u002Fcode> en pensant qu'elles s'afficheront en page d'accueil, mais votre thème attend ces images sur le hook \u003Ccode>Top\u003C\u002Fcode>. Résultat : rien ne s'affiche.\u003C\u002Fp>\n\u003Ch2>Diagnostic : identifier le bon hook\u003C\u002Fh2>\n\u003Ch3>Étape 1 — Vérifier les hooks déclarés par votre thème\u003C\u002Fh3>\n\u003Cp>Rendez-vous dans \u003Cstrong>Modules > Positions\u003C\u002Fstrong> (ou \u003Cstrong>Design > Positions\u003C\u002Fstrong> sur PrestaShop 1.7+\u002F8.x). Cette page liste tous les hooks actifs et les modules qui y sont greffés.\u003C\u002Fp>\n\u003Cp>Recherchez votre module (configurateur de thème, slider, etc.) et notez sur quel hook il est actuellement positionné.\u003C\u002Fp>\n\u003Ch3>Étape 2 — Identifier le hook réellement utilisé par votre thème\u003C\u002Fh3>\n\u003Cp>Pour déterminer quel hook votre thème utilise réellement pour la zone d'accueil, activez le \u003Cstrong>mode debug\u003C\u002Fstrong> de PrestaShop :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F config\u002Fdefines.inc.php\ndefine('_PS_MODE_DEV_', true);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Sur \u003Cstrong>PrestaShop 8.x\u003C\u002Fstrong>, vous pouvez aussi activer le mode debug directement depuis le back-office :\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Paramètres avancés > Performances > Mode debug : Oui\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Une fois le mode debug actif, le \u003Cstrong>Profiler\u003C\u002Fstrong> en bas de page liste tous les hooks appelés et les modules exécutés dans chacun d'eux. Vous verrez immédiatement quel hook correspond à quelle zone visuelle.\u003C\u002Fp>\n\u003Ch3>Étape 3 — Inspecter le template du thème\u003C\u002Fh3>\n\u003Cp>Pour une identification certaine, ouvrez le fichier template principal de votre thème :\u003C\u002Fp>\n\u003Cp>\u003Cstrong>PrestaShop 1.6 :\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* themes\u002Fvotre-theme\u002Findex.tpl *}\n{hook h='displayHome'}\n{hook h='displayTop'}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>PrestaShop 1.7 \u002F 8.x :\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{* themes\u002Fvotre-theme\u002Ftemplates\u002Findex.tpl *}\n{hook h='displayHome'}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le nom du hook dans le template est la référence absolue.\u003C\u002Fp>\n\u003Ch2>Correction : déplacer un module sur le bon hook\u003C\u002Fh2>\n\u003Ch3>Méthode 1 — Via l'interface back-office\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Allez dans **Modules > Positions** (ou **Design > Positions**)\u003C\u002Fli>\n\u003Cli>Recherchez votre module dans la liste\u003C\u002Fli>\n\u003Cli>Cliquez sur l'icône de déplacement (ou le bouton « Greffer ce module »)\u003C\u002Fli>\n\u003Cli>Changez le hook de destination (par exemple, de `Home` vers `Top`)\u003C\u002Fli>\n\u003Cli>Enregistrez\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Méthode 2 — Greffer un module sur un nouveau hook\u003C\u002Fh3>\n\u003Col>\n\u003Cli>En haut de la page **Positions**, cliquez sur **Greffer un module**\u003C\u002Fli>\n\u003Cli>Sélectionnez le module concerné\u003C\u002Fli>\n\u003Cli>Choisissez le hook de destination\u003C\u002Fli>\n\u003Cli>Validez\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Méthode 3 — Via le code (pour les développeurs)\u003C\u002Fh3>\n\u003Cp>Si vous développez un module et souhaitez qu'il s'enregistre automatiquement sur le bon hook :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F Dans la méthode install() de votre module\npublic function install()\n{\n    return parent::install()\n        && $this->registerHook('displayHome')\n        && $this->registerHook('displayTop');\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Sur \u003Cstrong>PrestaShop 8.x\u003C\u002Fstrong>, vous pouvez aussi utiliser les attributs PHP pour déclarer les hooks :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n#[Hook('displayHome')]\npublic function hookDisplayHome(array $params): string\n{\n    return $this->display(__FILE__, 'views\u002Ftemplates\u002Fhook\u002Fhome.tpl');\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Gérer l'ordre d'affichage des modules dans un hook\u003C\u002Fh2>\n\u003Cp>Un autre problème courant : votre module s'affiche, mais il est masqué par un autre module positionné au-dessus, ou il apparaît trop bas dans la page.\u003C\u002Fp>\n\u003Cp>Dans \u003Cstrong>Modules > Positions\u003C\u002Fstrong>, vous pouvez \u003Cstrong>réordonner les modules\u003C\u002Fstrong> au sein d'un même hook par glisser-déposer. Le module en première position s'affichera en premier dans la zone du hook.\u003C\u002Fp>\n\u003Cp>Par exemple, si votre slider se retrouve sous le configurateur de thème alors que vous souhaitez l'inverse, remontez-le simplement dans la liste du hook concerné.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques\u003C\u002Fh2>\n\u003Ch3>1. Documentez les hooks de votre thème\u003C\u002Fh3>\n\u003Cp>Si vous utilisez un thème premium, créez un mémo des correspondances entre les noms de hooks et leur emplacement visuel. Cela vous évitera de perdre du temps à chaque mise à jour.\u003C\u002Fp>\n\u003Ch3>2. Videz le cache après chaque modification\u003C\u002Fh3>\n\u003Cp>Après avoir déplacé un module d'un hook à un autre, videz systématiquement le cache PrestaShop :\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Paramètres avancés > Performances > Vider le cache\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Ou en ligne de commande (PrestaShop 8.x) :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\nphp bin\u002Fconsole cache:clear\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>3. Testez sur un thème par défaut\u003C\u002Fh3>\n\u003Cp>Si le problème persiste, basculez temporairement sur le thème par défaut (\u003Ccode>classic\u003C\u002Fcode> sur 1.7+\u002F8.x, \u003Ccode>default-bootstrap\u003C\u002Fcode> sur 1.6). Si le module s'affiche correctement, le problème vient bien de la configuration des hooks dans votre thème.\u003C\u002Fp>\n\u003Ch3>4. Attention aux mises à jour de thème\u003C\u002Fh3>\n\u003Cp>Certaines mises à jour de thèmes premium peuvent réinitialiser les positions des modules. Après une mise à jour, vérifiez toujours que vos modules sont bien positionnés sur les bons hooks.\u003C\u002Fp>\n\u003Ch2>Résumé\u003C\u002Fh2>\n\u003Cp>Quand un module ne s'affiche plus en page d'accueil, le réflexe est simple :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Vérifier** sur quel hook le module est greffé (Modules > Positions)\u003C\u002Fli>\n\u003Cli>**Identifier** quel hook votre thème utilise réellement pour cette zone (template ou Profiler)\u003C\u002Fli>\n\u003Cli>**Déplacer** le module sur le bon hook\u003C\u002Fli>\n\u003Cli>**Réordonner** les modules si nécessaire\u003C\u002Fli>\n\u003Cli>**Vider le cache**\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Dans la très grande majorité des cas, le problème se résout en moins de deux minutes une fois le bon hook identifié.\u003C\u002Fp>",[41,44,47,50,53],{"q":42,"a":43},"Pourquoi mon configurateur de thème PrestaShop ne s'affiche plus en page d'accueil ?","Le plus souvent, le module est greffé sur le mauvais hook. Votre thème peut utiliser le hook « Top » pour afficher le contenu en page d'accueil, alors que le module est positionné sur le hook « Home ». Rendez-vous dans Modules > Positions pour vérifier et déplacer le module sur le hook correct.",{"q":45,"a":46},"Comment savoir quel hook correspond à quelle zone de ma page PrestaShop ?","Activez le mode debug de PrestaShop (Paramètres avancés > Performances > Mode debug). Le Profiler affichera en bas de page tous les hooks appelés et les modules associés. Vous pouvez aussi inspecter directement le fichier index.tpl de votre thème pour voir les appels {hook h='nomDuHook'}.",{"q":48,"a":49},"Comment changer l'ordre d'affichage des modules dans un même hook PrestaShop ?","Allez dans Modules > Positions (ou Design > Positions sur 1.7+\u002F8.x), trouvez le hook concerné et réorganisez les modules par glisser-déposer. Le module en première position sera affiché en premier dans la zone correspondante du thème.",{"q":51,"a":52},"Mon slider PrestaShop a disparu après une mise à jour du thème, que faire ?","Les mises à jour de thèmes peuvent réinitialiser les positions des modules. Vérifiez dans Modules > Positions que votre slider est toujours greffé sur le bon hook. Si nécessaire, greffez-le à nouveau via le bouton « Greffer un module » en sélectionnant le hook approprié.",{"q":54,"a":55},"Quelle est la différence entre le hook displayHome et displayTop dans PrestaShop ?","Le hook displayHome correspond généralement au corps de la page d'accueil (produits vedettes, blocs éditoriaux), tandis que displayTop est situé dans l'en-tête, sous le menu de navigation. Cependant, certains thèmes premium inversent ou redéfinissent ces emplacements, d'où l'importance de vérifier les templates de votre thème.","Quand un module PrestaShop ne s'affiche plus en page d'accueil, le problème vient presque toujours d'un mauvais hook : vérifiez dans Modules > Positions que le module est greffé sur le hook réellement utilisé par votre thème (souvent « Top » au lieu de « Home »), puis réordonnez si nécessaire.",5,"2026-03-21T16:56:22.000Z",[],"Utilisation de PrestaShop : configuration et difficultés",{"items":62},[63,74,82,90,98,107,114,122],{"id":64,"type":65,"label":66,"href":68,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":69,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":71,"children":72,"psChildren":73},41,"link",{"fr":67},"Expertise","\u002Fexpertise",null,false,0,[],[],{"id":75,"type":65,"label":76,"href":78,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":69,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":79,"children":80,"psChildren":81},42,{"fr":77},"Blog","\u002Fblog",1,[],[],{"id":83,"type":65,"label":84,"href":86,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":69,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":87,"children":88,"psChildren":89},43,{"fr":85},"Modules PrestaShop","\u002Fmodules",2,[],[],{"id":91,"type":65,"label":92,"href":94,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":69,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":95,"children":96,"psChildren":97},44,{"fr":93},"Outils IA","\u002Foutils-ia",3,[],[],{"id":99,"type":65,"label":100,"href":102,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":103,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":104,"children":105,"psChildren":106},45,{"fr":101},"Offre Starter ✨","\u002Foffre-starter",{"highlight":20},4,[],[],{"id":108,"type":65,"label":109,"href":111,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":69,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":57,"children":112,"psChildren":113},46,{"fr":110},"Academy","\u002Facademy",[],[],{"id":115,"type":65,"label":116,"href":118,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":69,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":119,"children":120,"psChildren":121},47,{"fr":117},"À propos","\u002Fa-propos",6,[],[],{"id":123,"type":65,"label":124,"href":126,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":69,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":127,"children":128,"psChildren":129},48,{"fr":125},"Contact","\u002Fcontact",7,[],[],{"columns":131},[132,144,174,190],{"title":133,"links":134},"Plateforme",[135,137,140,141],{"label":136,"href":102,"external":70},"Offre Starter (2 500 €)",{"label":138,"href":139,"external":70},"Devenir Ambassadeur","\u002Fambassadeur",{"label":85,"href":86,"external":70},{"label":142,"href":143,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":145,"links":146},"Le Synedre",[147,150,153,156,159,162,165,168,171],{"label":148,"href":149,"external":70},"L'histoire","\u002Fsynedre",{"label":151,"href":152,"external":70},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":154,"href":155,"external":70},"L'équipe","\u002Fequipe",{"label":157,"href":158,"external":70},"Le réacteur en direct","\u002Freacteur",{"label":160,"href":161,"external":70},"Le Drill (entraînement)","\u002Fdrill",{"label":163,"href":164,"external":70},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":166,"href":167,"external":70},"Les agents IA","\u002Fagents-ia",{"label":169,"href":170,"external":70},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":172,"href":173,"external":70},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":175,"links":176},"Ressources",[177,178,179,182,184,187],{"label":77,"href":78,"external":70},{"label":110,"href":111,"external":70},{"label":180,"href":181,"external":70},"Dictionnaire","\u002Fdictionnaire",{"label":183,"href":68,"external":70},"Expertise PrestaShop",{"label":185,"href":186,"external":70},"Flywheel","\u002Fflywheel",{"label":188,"href":189,"external":70},"Manifeste","\u002Fmanifeste",{"title":117,"links":191},[192,194,197],{"label":193,"href":118,"external":70},"Alexandre Carette",{"label":195,"href":196,"external":70},"Dossier de presse","\u002Fpresse",{"label":125,"href":126,"external":70},{"header":199},{"logo":200,"topBar":205,"contactEmail":208,"features":209,"navBar":69},{"src":201,"alt":202,"text":193,"href":203,"class":204},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":69,"showLanguages":70,"align":206,"languages":207},"left",[],"contact@alexandrecarette.fr",{"showSearch":70,"showWishlist":70,"showLogin":20,"showContact":70,"showCart":70,"stickyHeader":20,"headerLayout":210},"inline",{"academy":212,"blog":213,"expertise":224},[],[214,218,221],{"title":215,"url":216,"score":79,"type":217},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":219,"url":220,"score":79,"type":217},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":222,"url":223,"score":79,"type":217},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":226},{"theme":227,"description":69,"hours":69,"logo":228,"contact":229,"social":230,"bottomBar":240},"dark",{"src":201,"href":203,"alt":193},{"email":69,"phone":69,"address":69,"cta":69},[231,234,237],{"platform":232,"href":233,"label":232},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":235,"href":236,"label":235},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":238,"href":239,"label":238},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":69}]