[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":22,"$fZ0_OAKb4T7JGA-DG-HI0O2uxIoy05uXWHMqAVU5ciZc":103,"footer-db":140,"megamenu":159,"$fvkSaHrzKjdfOsENwNfMCQlF6r0IOPn7zhzZpiZyeVa0":214,"header-db":228},{"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",{"columns":23},[24,40,70,91],{"title":25,"links":26},"Plateforme",[27,31,34,37],{"label":28,"href":29,"external":30},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":32,"href":33,"external":30},"Devenir Ambassadeur","\u002Fambassadeur",{"label":35,"href":36,"external":30},"Modules PrestaShop","\u002Fmodules",{"label":38,"href":39,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":41,"links":42},"Le Synedre",[43,46,49,52,55,58,61,64,67],{"label":44,"href":45,"external":30},"L'histoire","\u002Fsynedre",{"label":47,"href":48,"external":30},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":50,"href":51,"external":30},"L'équipe","\u002Fequipe",{"label":53,"href":54,"external":30},"Le réacteur en direct","\u002Freacteur",{"label":56,"href":57,"external":30},"Le Drill (entraînement)","\u002Fdrill",{"label":59,"href":60,"external":30},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":62,"href":63,"external":30},"Les agents IA","\u002Fagents-ia",{"label":65,"href":66,"external":30},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":68,"href":69,"external":30},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":71,"links":72},"Ressources",[73,76,79,82,85,88],{"label":74,"href":75,"external":30},"Blog","\u002Fblog",{"label":77,"href":78,"external":30},"Academy","\u002Facademy",{"label":80,"href":81,"external":30},"Dictionnaire","\u002Fdictionnaire",{"label":83,"href":84,"external":30},"Expertise PrestaShop","\u002Fexpertise",{"label":86,"href":87,"external":30},"Flywheel","\u002Fflywheel",{"label":89,"href":90,"external":30},"Manifeste","\u002Fmanifeste",{"title":92,"links":93},"À propos",[94,97,100],{"label":95,"href":96,"external":30},"Alexandre Carette","\u002Fa-propos",{"label":98,"href":99,"external":30},"Dossier de presse","\u002Fpresse",{"label":101,"href":102,"external":30},"Contact","\u002Fcontact",{"title":104,"slug":105,"metaDescription":106,"category":107,"tags":108,"difficulty":114,"psVersions":115,"content":118,"faq":119,"tldr":135,"readingTime":136,"generatedAt":137,"publishDate":137,"relatedArticles":138,"sourceCategory":139},"Activer le bouton filtre de la navigation à facettes horizontale PrestaShop","activer-bouton-filtre-navigation-facettes-horizontale-prestashop","Le bouton filtre de la navigation à facettes horizontale est masqué ? Découvrez comment corriger le display:none sur #facets_search_center dans votre thème.","design",[109,110,111,112,113],"navigation à facettes","filtres produits","CSS","thème PrestaShop","faceted search","debutant",[116,117],"1.7","8.x","\u003Ch2>Le problème : un bouton filtre invisible sur la navigation horizontale\u003C\u002Fh2>\n\u003Cp>Sur certains thèmes PrestaShop — notamment les thèmes premium comme Warehouse — la navigation à facettes peut être configurée en mode horizontal. Cependant, il arrive que le bouton permettant de déclencher le filtrage soit tout simplement invisible, bien que le module de navigation à facettes soit correctement installé et configuré.\u003C\u002Fp>\n\u003Cp>Le symptôme est clair : les filtres sont présents dans le DOM HTML, le module fonctionne, mais le bouton d'activation du panneau de filtres ne s'affiche pas côté front-office. Le marchand a l'impression que la fonctionnalité est cassée, alors qu'il s'agit d'un simple problème CSS.\u003C\u002Fp>\n\u003Ch2>Diagnostic : identifier la règle CSS responsable\u003C\u002Fh2>\n\u003Cp>La cause la plus fréquente est une règle \u003Ccode>display: none\u003C\u002Fcode> appliquée sur le conteneur du bloc de recherche à facettes. Dans la majorité des cas, c'est l'élément \u003Ccode>#facets_search_center\u003C\u002Fcode> qui est masqué par le CSS du thème.\u003C\u002Fp>\n\u003Ch3>Étape 1 : Désactiver la compression CSS\u003C\u002Fh3>\n\u003Cp>Avant de chercher la ligne fautive, il faut pouvoir lire le CSS de manière lisible. Rendez-vous dans :\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Back-office → Paramètres avancés → Performances\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Désactivez temporairement :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>La concaténation CSS (CCC)\u003C\u002Fli>\n\u003Cli>La minification CSS\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Cela permet d'inspecter les fichiers CSS non compressés et de localiser précisément la règle problématique.\u003C\u002Fp>\n\u003Ch3>Étape 2 : Localiser la règle dans le fichier thème\u003C\u002Fh3>\n\u003Cp>Ouvrez les outils de développement de votre navigateur (F12), inspectez la zone où le bouton filtre devrait apparaître, et cherchez l'élément \u003Ccode>#facets_search_center\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>Dans le cas du thème Warehouse, la règle se trouve typiquement dans :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\n\u002Fthemes\u002Fvotre-theme\u002Fassets\u002Fcss\u002Ftheme.css\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Vous y trouverez une déclaration similaire à :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n#facets_search_center {\n  display: none;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>La correction\u003C\u002Fh2>\n\u003Ch3>Solution 1 : Modification directe du fichier CSS du thème\u003C\u002Fh3>\n\u003Cp>Localisez la règle \u003Ccode>#facets_search_center\u003C\u002Fcode> dans votre fichier \u003Ccode>theme.css\u003C\u002Fcode> et remplacez \u003Ccode>display: none\u003C\u002Fcode> par \u003Ccode>display: block\u003C\u002Fcode> (ou retirez simplement la propriété) :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Avant *\u002F\n#facets_search_center {\n  display: none;\n}\n\n\u002F* Après *\u002F\n#facets_search_center {\n  display: block;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Solution 2 : Surcharge via le CSS personnalisé (recommandé)\u003C\u002Fh3>\n\u003Cp>Pour éviter de modifier directement le fichier du thème — ce qui serait écrasé à la prochaine mise à jour — privilégiez une surcharge CSS. Ajoutez cette règle dans votre fichier \u003Ccode>custom.css\u003C\u002Fcode> ou via le module de personnalisation CSS de votre thème :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n#facets_search_center {\n  display: block !important;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le \u003Ccode>!important\u003C\u002Fcode> garantit que votre règle prend le dessus sur celle du thème, quelle que soit la spécificité d'origine.\u003C\u002Fp>\n\u003Ch3>Solution 3 : Utiliser un thème enfant (PrestaShop 8.x)\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 8.x, la bonne pratique consiste à créer un thème enfant pour surcharger le CSS sans toucher au thème parent :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\n\u002Fthemes\u002Fvotre-theme-child\u002Fassets\u002Fcss\u002Fcustom.css\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre>\u003Ccode class=\"language-css\">\n#facets_search_center {\n  display: block;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cela assure la pérennité de votre correction lors des mises à jour du thème parent.\u003C\u002Fp>\n\u003Ch2>Pourquoi cette règle existe-t-elle ?\u003C\u002Fh2>\n\u003Cp>Les développeurs de thèmes masquent parfois le bloc de filtres horizontaux par défaut car :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**Le thème supporte plusieurs dispositions** (verticale en sidebar, horizontale en haut de listing) et le mode horizontal est désactivé par défaut\u003C\u002Fli>\n\u003Cli>**La gestion se fait via JavaScript** : le thème attend un événement ou un paramètre de configuration pour afficher dynamiquement le panneau\u003C\u002Fli>\n\u003Cli>**Conflit entre versions** : certaines mises à jour du thème réinitialisent les paramètres d'affichage\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Dans tous les cas, la solution reste de forcer l'affichage du conteneur \u003Ccode>#facets_search_center\u003C\u002Fcode> via CSS.\u003C\u002Fp>\n\u003Ch2>Vérification après correction\u003C\u002Fh2>\n\u003Cp>Après avoir appliqué la correction :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Videz le cache PrestaShop (**Paramètres avancés → Performances → Vider le cache**)\u003C\u002Fli>\n\u003Cli>Réactivez la compression CSS si vous l'aviez désactivée\u003C\u002Fli>\n\u003Cli>Videz le cache de votre navigateur (Ctrl + Shift + R)\u003C\u002Fli>\n\u003Cli>Vérifiez que le bouton filtre apparaît bien sur vos pages catégories\u003C\u002Fli>\n\u003Cli>Testez sur mobile — certains thèmes ont des règles CSS responsive qui peuvent masquer l'élément à nouveau via des media queries\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Vérifiez aussi les media queries *\u002F\n@media (max-width: 768px) {\n  #facets_search_center {\n    display: block !important; \u002F* Assurez-vous qu'il reste visible sur mobile *\u002F\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Bonnes pratiques pour la navigation à facettes\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>**Performances** : limitez le nombre de filtres affichés simultanément (5-7 maximum) pour ne pas surcharger la page\u003C\u002Fli>\n\u003Cli>**SEO** : configurez les URLs de filtres en `noindex` ou utilisez le canonical vers la catégorie parente pour éviter le contenu dupliqué\u003C\u002Fli>\n\u003Cli>**UX** : sur mobile, préférez un panneau de filtres en overlay plutôt qu'un affichage horizontal qui consomme de l'espace vertical\u003C\u002Fli>\n\u003C\u002Ful>",[120,123,126,129,132],{"q":121,"a":122},"Pourquoi le bouton filtre de la navigation à facettes ne s'affiche pas sur mon thème PrestaShop ?","Dans la grande majorité des cas, le conteneur #facets_search_center est masqué par une règle CSS display:none dans le fichier theme.css de votre thème. Désactivez la compression CSS dans les paramètres de performances pour localiser la ligne exacte, puis supprimez ou surchargez cette règle.",{"q":124,"a":125},"Comment modifier le CSS d'un thème PrestaShop sans perdre les changements à la mise à jour ?","Utilisez un fichier custom.css fourni par votre thème, ou mieux, créez un thème enfant. Sur PrestaShop 8.x, le système de thème enfant permet de surcharger proprement les assets CSS et templates sans modifier le thème parent, garantissant la pérennité de vos personnalisations.",{"q":127,"a":128},"La navigation à facettes horizontale est-elle compatible avec PrestaShop 8.x ?","Oui, le module de navigation à facettes (anciennement Layered Navigation, désormais Faceted Search) est pleinement compatible avec PrestaShop 8.x. Le mode d'affichage horizontal ou vertical dépend du thème utilisé. Si le bouton filtre est masqué, c'est un problème CSS lié au thème et non au module lui-même.",{"q":130,"a":131},"Comment désactiver temporairement la compression CSS dans PrestaShop pour débugger ?","Rendez-vous dans Back-office → Paramètres avancés → Performances. Désactivez la concaténation CCC et la minification CSS. Cela vous permet d'inspecter les fichiers CSS source non compressés avec les outils de développement du navigateur, facilitant la localisation des règles problématiques.",{"q":133,"a":134},"Le display:none sur #facets_search_center revient après chaque mise à jour du thème, que faire ?","Créez un thème enfant ou utilisez une surcharge CSS avec !important dans un fichier custom.css séparé. Ne modifiez jamais directement le fichier theme.css du thème parent, car il sera systématiquement écrasé lors des mises à jour. La surcharge via un fichier dédié est la seule solution pérenne.","Le bouton filtre de la navigation à facettes horizontale est souvent masqué par une règle CSS display:none sur #facets_search_center dans le fichier theme.css. La correction consiste à surcharger cette règle via un fichier custom.css ou un thème enfant pour garantir la pérennité du correctif.",4,"2026-03-21T14:40:38.000Z",[],"Utilisation de PrestaShop : configuration et difficultés",{"footer":141},{"theme":142,"description":143,"hours":143,"logo":144,"contact":147,"social":148,"bottomBar":158},"dark",null,{"src":145,"href":146,"alt":95},"\u002Flogo-ac.svg","\u002F",{"email":143,"phone":143,"address":143,"cta":143},[149,152,155],{"platform":150,"href":151,"label":150},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":153,"href":154,"label":153},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":156,"href":157,"label":156},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":143},{"items":160},[161,169,175,181,189,196,202,208],{"id":162,"type":163,"label":164,"href":84,"icon":143,"description":143,"badge":143,"groupTitle":143,"style":143,"gridColumns":143,"cssClass":143,"psCategoryId":143,"showPsChildren":30,"position":166,"children":167,"psChildren":168},41,"link",{"fr":165},"Expertise",0,[],[],{"id":170,"type":163,"label":171,"href":75,"icon":143,"description":143,"badge":143,"groupTitle":143,"style":143,"gridColumns":143,"cssClass":143,"psCategoryId":143,"showPsChildren":30,"position":172,"children":173,"psChildren":174},42,{"fr":74},1,[],[],{"id":176,"type":163,"label":177,"href":36,"icon":143,"description":143,"badge":143,"groupTitle":143,"style":143,"gridColumns":143,"cssClass":143,"psCategoryId":143,"showPsChildren":30,"position":178,"children":179,"psChildren":180},43,{"fr":35},2,[],[],{"id":182,"type":163,"label":183,"href":185,"icon":143,"description":143,"badge":143,"groupTitle":143,"style":143,"gridColumns":143,"cssClass":143,"psCategoryId":143,"showPsChildren":30,"position":186,"children":187,"psChildren":188},44,{"fr":184},"Outils IA","\u002Foutils-ia",3,[],[],{"id":190,"type":163,"label":191,"href":29,"icon":143,"description":143,"badge":143,"groupTitle":143,"style":193,"gridColumns":143,"cssClass":143,"psCategoryId":143,"showPsChildren":30,"position":136,"children":194,"psChildren":195},45,{"fr":192},"Offre Starter ✨",{"highlight":20},[],[],{"id":197,"type":163,"label":198,"href":78,"icon":143,"description":143,"badge":143,"groupTitle":143,"style":143,"gridColumns":143,"cssClass":143,"psCategoryId":143,"showPsChildren":30,"position":199,"children":200,"psChildren":201},46,{"fr":77},5,[],[],{"id":203,"type":163,"label":204,"href":96,"icon":143,"description":143,"badge":143,"groupTitle":143,"style":143,"gridColumns":143,"cssClass":143,"psCategoryId":143,"showPsChildren":30,"position":205,"children":206,"psChildren":207},47,{"fr":92},6,[],[],{"id":209,"type":163,"label":210,"href":102,"icon":143,"description":143,"badge":143,"groupTitle":143,"style":143,"gridColumns":143,"cssClass":143,"psCategoryId":143,"showPsChildren":30,"position":211,"children":212,"psChildren":213},48,{"fr":101},7,[],[],{"academy":215,"blog":216,"expertise":227},[],[217,221,224],{"title":218,"url":219,"score":172,"type":220},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":222,"url":223,"score":172,"type":220},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":225,"url":226,"score":172,"type":220},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"header":229},{"logo":230,"topBar":233,"contactEmail":236,"features":237,"navBar":143},{"src":145,"alt":231,"text":95,"href":146,"class":232},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":143,"showLanguages":30,"align":234,"languages":235},"left",[],"contact@alexandrecarette.fr",{"showSearch":30,"showWishlist":30,"showLogin":20,"showContact":30,"showCart":30,"stickyHeader":20,"headerLayout":238},"inline"]