[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fqt-Qmpxu4I3mn3U2JJ_YRf-VCxq010zK_wNTyyGqbUo":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":61,"$fPHVk-XwhAeo28O-DvktogxDraYh-nOZyOOIz2YpTt5s":142,"megamenu":157,"header-db":212,"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},"Adapter la taille d'une bannière PrestaShop au-delà des limites du thème","adapter-taille-banniere-prestashop-theme","Comment redimensionner une bannière PrestaShop trop grande pour votre thème : CSS responsive, bonnes pratiques et solutions pour toutes versions.","design",[28,29,30,31,32,33],"bannière","CSS","thème PrestaShop","responsive","blockbanner","header","debutant",[36,37,38],"1.6","1.7","8.x","\u003Ch2>Le problème : une bannière qui déborde du thème\u003C\u002Fh2>\n\u003Cp>Vous avez créé une bannière promotionnelle aux dimensions exactes souhaitées, mais une fois uploadée dans PrestaShop, elle dépasse du conteneur prévu par le thème. L'image déborde horizontalement, casse la mise en page ou affiche des barres de défilement indésirables.\u003C\u002Fp>\n\u003Cp>Ce problème est extrêmement courant et provient d'un décalage entre les dimensions de votre image et les contraintes CSS définies par le thème. La bonne nouvelle : la solution est purement CSS et ne nécessite aucune modification PHP.\u003C\u002Fp>\n\u003Ch2>Comprendre l'architecture du module bannière\u003C\u002Fh2>\n\u003Ch3>PrestaShop 1.6 — Module `blockbanner`\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 1.6, le module \u003Ccode>blockbanner\u003C\u002Fcode> gère l'affichage de la bannière dans le header. La structure HTML générée ressemble à ceci :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<div id=\"header\">\n  <div class=\"banner\">\n    <a href=\"#\">\n      <img src=\"\u002Fmodules\u002Fblockbanner\u002Fimg\u002Fsale70.png\" alt=\"Banner\" \u002F>\n    <\u002Fa>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le CSS du module se trouve dans \u003Ccode>\u002Fmodules\u002Fblockbanner\u002Fblockbanner.css\u003C\u002Fcode>, et les styles globaux du thème dans \u003Ccode>\u002Fthemes\u002Fvotre-theme\u002Fcss\u002Fglobal.css\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>PrestaShop 1.7 et 8.x — Module `ps_banner`\u003C\u002Fh3>\n\u003Cp>À partir de la version 1.7, le module a été renommé \u003Ccode>ps_banner\u003C\u002Fcode>. La structure HTML a évolué avec l'adoption de Bootstrap 4, puis du système de hooks modernisé en 8.x :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<div id=\"banners\">\n  <div class=\"banner\">\n    <a href=\"#\">\n      <img src=\"\u002Fmodules\u002Fps_banner\u002Fimg\u002Fbanner-img.jpg\" \n           class=\"img-fluid\" alt=\"Banner\" \u002F>\n    <\u002Fa>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>La classe \u003Ccode>img-fluid\u003C\u002Fcode> de Bootstrap applique déjà \u003Ccode>max-width: 100%\u003C\u002Fcode> et \u003Ccode>height: auto\u003C\u002Fcode>, ce qui limite les débordements. Cependant, des conflits CSS restent possibles si votre image est significativement plus large que le conteneur.\u003C\u002Fp>\n\u003Ch2>Solution CSS pour contenir la bannière\u003C\u002Fh2>\n\u003Ch3>Approche recommandée : CSS responsive moderne\u003C\u002Fh3>\n\u003Cp>Plutôt que de forcer des dimensions fixes, privilégiez une approche responsive qui s'adapte à tous les écrans :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Fichier : modules\u002Fblockbanner\u002Fblockbanner.css (PS 1.6)\n   ou votre fichier custom.css *\u002F\n\n.banner img {\n  display: block;\n  width: 100%;\n  max-width: 1170px;\n  height: auto;\n  margin: 0 auto;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette règle assure que :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>L'image occupe toute la largeur disponible (`width: 100%`)\u003C\u002Fli>\n\u003Cli>Elle ne dépasse jamais la largeur maximale du conteneur Bootstrap (`max-width: 1170px`)\u003C\u002Fli>\n\u003Cli>Le ratio est préservé automatiquement (`height: auto`)\u003C\u002Fli>\n\u003Cli>L'image est centrée horizontalement (`margin: 0 auto`)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Supprimer la hauteur maximale du conteneur\u003C\u002Fh3>\n\u003Cp>Si le thème impose une hauteur fixe au conteneur \u003Ccode>.banner\u003C\u002Fcode>, votre image sera tronquée. Corrigez cela :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Fichier : themes\u002Fvotre-theme\u002Fcss\u002Fglobal.css\n   ou custom.css en surcharge *\u002F\n\nheader .banner {\n  background: #ffffff;\n  max-height: none; \u002F* Supprime la limitation de hauteur *\u002F\n  overflow: visible;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Solution spécifique pour centrer une bannière plus petite que le conteneur\u003C\u002Fh3>\n\u003Cp>Si votre bannière fait par exemple 70% de la largeur du conteneur et que vous souhaitez la centrer :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.banner a img {\n  display: block;\n  width: 70%;\n  height: auto;\n  max-width: 1170px;\n  margin: 0 auto; \u002F* Centrage propre via marges automatiques *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>Évitez\u003C\u002Fstrong> le positionnement avec \u003Ccode>position: relative\u003C\u002Fcode> et \u003Ccode>left: 15%\u003C\u002Fcode> pour centrer un élément — la technique \u003Ccode>margin: 0 auto\u003C\u002Fcode> est plus fiable et ne pose pas de problèmes sur mobile.\u003C\u002Fp>\n\u003Ch2>Méthode de diagnostic avec l'inspecteur navigateur\u003C\u002Fh2>\n\u003Cp>Avant de modifier quoi que ce soit, identifiez précisément quel sélecteur CSS contraint votre bannière :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Clic droit** sur la bannière → **Inspecter l'élément**\u003C\u002Fli>\n\u003Cli>Dans l'onglet **Styles**, repérez les propriétés `max-width`, `max-height`, `overflow: hidden` qui limitent l'affichage\u003C\u002Fli>\n\u003Cli>Identifiez le **fichier source** et le **numéro de ligne** de chaque règle\u003C\u002Fli>\n\u003Cli>Vérifiez la **spécificité CSS** : une règle dans `global.css` peut écraser celle de `blockbanner.css`\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Cette étape est indispensable. Chaque thème PrestaShop a sa propre structure CSS, et copier une solution trouvée en ligne sans vérifier les sélecteurs actifs sur votre site est la première cause d'échec.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques pour les bannières PrestaShop\u003C\u002Fh2>\n\u003Ch3>Préparer l'image en amont\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Largeur optimale** : 1170px (grille Bootstrap par défaut) ou 1920px pour un affichage pleine largeur\u003C\u002Fli>\n\u003Cli>**Format** : WebP avec fallback JPEG pour les anciennes versions de PrestaShop\u003C\u002Fli>\n\u003Cli>**Poids** : compressez sous 150 Ko pour ne pas impacter le temps de chargement\u003C\u002Fli>\n\u003Cli>**Ratio** : gardez un ratio cohérent (ex : 1170×300 pour un bandeau classique)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Où placer vos modifications CSS\u003C\u002Fh3>\n\u003Cp>Ne modifiez jamais directement les fichiers du module ou du thème par défaut. En cas de mise à jour, vos changements seront écrasés.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>PrestaShop 1.6 :\u003C\u002Fstrong> Créez un fichier \u003Ccode>custom.css\u003C\u002Fcode> dans votre thème et chargez-le via le fichier \u003Ccode>header.tpl\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>PrestaShop 1.7 \u002F 8.x :\u003C\u002Fstrong> Utilisez un thème enfant ou ajoutez vos styles dans \u003Ccode>themes\u002Fvotre-theme\u002Fassets\u002Fcss\u002Fcustom.css\u003C\u002Fcode>, référencé dans \u003Ccode>theme.yml\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-yaml\">\nassets:\n  css:\n    all:\n      - id: custom-styles\n        path: assets\u002Fcss\u002Fcustom.css\n        priority: 200\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Responsive : ne pas oublier le mobile\u003C\u002Fh3>\n\u003Cp>Ajoutez des media queries pour adapter la bannière sur petit écran :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n@media (max-width: 768px) {\n  .banner img {\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    object-position: center;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>La propriété \u003Ccode>object-fit: cover\u003C\u002Fcode> permet de recadrer proprement l'image sans déformation sur mobile, plutôt que de la réduire jusqu'à devenir illisible.\u003C\u002Fp>\n\u003Ch2>Récapitulatif des fichiers à modifier\u003C\u002Fh2>\n\u003Ctr>\u003Cth>Version\u003C\u002Fth>\u003Cth>Fichier module\u003C\u002Fth>\u003Cth>Fichier thème\u003C\u002Fth>\u003Cth>Recommandation\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>PS 1.6\u003C\u002Fth>\u003Cth>`modules\u002Fblockbanner\u002Fblockbanner.css`\u003C\u002Fth>\u003Cth>`themes\u002Fdefault-bootstrap\u002Fcss\u002Fglobal.css`\u003C\u002Fth>\u003Cth>Thème enfant ou `custom.css`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>PS 1.7\u003C\u002Fth>\u003Cth>`modules\u002Fps_banner\u002Fviews\u002Fcss\u002Fps_banner.css`\u003C\u002Fth>\u003Cth>`themes\u002Fclassic\u002Fassets\u002Fcss\u002Ftheme.css`\u003C\u002Fth>\u003Cth>Thème enfant\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>PS 8.x\u003C\u002Fth>\u003Cth>`modules\u002Fps_banner\u002Fviews\u002Fcss\u002Fps_banner.css`\u003C\u002Fth>\u003Cth>`themes\u002Fclassic\u002Fassets\u002Fcss\u002Ftheme.css`\u003C\u002Fth>\u003Cth>Thème enfant + `theme.yml`\u003C\u002Fth>\u003C\u002Ftr>",[41,44,47,50,53],{"q":42,"a":43},"Quelle taille de bannière utiliser pour PrestaShop ?","La largeur recommandée est 1170px pour s'adapter à la grille Bootstrap standard de PrestaShop. Pour un affichage pleine largeur (edge-to-edge), optez pour 1920px. La hauteur dépend de votre design, mais un ratio de 4:1 (ex : 1170×300) est un bon compromis entre impact visuel et espace page. Compressez toujours l'image sous 150 Ko en WebP ou JPEG optimisé.",{"q":45,"a":46},"Comment centrer une bannière plus petite que le conteneur PrestaShop ?","Appliquez `display: block` et `margin: 0 auto` sur l'image. Cela centre automatiquement tout élément bloc dont la largeur est inférieure à son conteneur. Évitez les techniques de positionnement relatif avec `left` en pourcentage, qui fonctionnent mal en responsive et peuvent décaler l'image sur mobile.",{"q":48,"a":49},"Ma bannière est coupée en bas dans PrestaShop, comment corriger ?","Le thème impose probablement une propriété `max-height` ou `overflow: hidden` sur le conteneur `.banner`. Utilisez l'inspecteur navigateur pour identifier la règle responsable, puis surchargez-la dans votre fichier CSS personnalisé avec `max-height: none` et `overflow: visible`. N'oubliez pas de vérifier que `height: auto` est bien appliqué sur l'image elle-même.",{"q":51,"a":52},"Faut-il modifier le CSS directement dans le module blockbanner ?","Non. Toute modification directe dans les fichiers du module sera perdue lors de la prochaine mise à jour. Créez plutôt un thème enfant (PS 1.7\u002F8.x) ou un fichier `custom.css` chargé après les styles du thème. Cela garantit la pérennité de vos personnalisations et facilite la maintenance.",{"q":54,"a":55},"Comment rendre ma bannière PrestaShop responsive sur mobile ?","Utilisez `width: 100%` et `height: auto` pour que l'image s'adapte à la largeur de l'écran. Pour les bannières très larges qui deviennent illisibles sur mobile, ajoutez `object-fit: cover` avec une `max-height` dans une media query `@media (max-width: 768px)`. Cela recadre l'image au centre plutôt que de l'écraser. Vous pouvez aussi envisager de servir une image différente sur mobile via la balise HTML `\u003Cpicture>`.","Pour adapter une bannière trop grande dans PrestaShop, surchargez le CSS du module banner avec `width: 100%; max-width: 1170px; height: auto; margin: 0 auto` et supprimez les contraintes `max-height` du conteneur. Utilisez toujours l'inspecteur navigateur pour identifier les règles CSS en cause avant de modifier quoi que ce soit.",5,"2026-03-21T15:22:10.000Z",[],"PrestaShop pour les développeurs",{"columns":62},[63,79,109,130],{"title":64,"links":65},"Plateforme",[66,70,73,76],{"label":67,"href":68,"external":69},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":71,"href":72,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":74,"href":75,"external":69},"Modules PrestaShop","\u002Fmodules",{"label":77,"href":78,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":80,"links":81},"Le Synedre",[82,85,88,91,94,97,100,103,106],{"label":83,"href":84,"external":69},"L'histoire","\u002Fsynedre",{"label":86,"href":87,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":89,"href":90,"external":69},"L'équipe","\u002Fequipe",{"label":92,"href":93,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":95,"href":96,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":98,"href":99,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":101,"href":102,"external":69},"Les agents IA","\u002Fagents-ia",{"label":104,"href":105,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":107,"href":108,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":110,"links":111},"Ressources",[112,115,118,121,124,127],{"label":113,"href":114,"external":69},"Blog","\u002Fblog",{"label":116,"href":117,"external":69},"Academy","\u002Facademy",{"label":119,"href":120,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":122,"href":123,"external":69},"Expertise PrestaShop","\u002Fexpertise",{"label":125,"href":126,"external":69},"Flywheel","\u002Fflywheel",{"label":128,"href":129,"external":69},"Manifeste","\u002Fmanifeste",{"title":131,"links":132},"À propos",[133,136,139],{"label":134,"href":135,"external":69},"Alexandre Carette","\u002Fa-propos",{"label":137,"href":138,"external":69},"Dossier de presse","\u002Fpresse",{"label":140,"href":141,"external":69},"Contact","\u002Fcontact",{"academy":143,"blog":144,"expertise":156},[],[145,150,153],{"title":146,"url":147,"score":148,"type":149},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back",1,"blog",{"title":151,"url":152,"score":148,"type":149},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":154,"url":155,"score":148,"type":149},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"items":158},[159,168,173,179,187,195,200,206],{"id":160,"type":161,"label":162,"href":123,"icon":164,"description":164,"badge":164,"groupTitle":164,"style":164,"gridColumns":164,"cssClass":164,"psCategoryId":164,"showPsChildren":69,"position":165,"children":166,"psChildren":167},41,"link",{"fr":163},"Expertise",null,0,[],[],{"id":169,"type":161,"label":170,"href":114,"icon":164,"description":164,"badge":164,"groupTitle":164,"style":164,"gridColumns":164,"cssClass":164,"psCategoryId":164,"showPsChildren":69,"position":148,"children":171,"psChildren":172},42,{"fr":113},[],[],{"id":174,"type":161,"label":175,"href":75,"icon":164,"description":164,"badge":164,"groupTitle":164,"style":164,"gridColumns":164,"cssClass":164,"psCategoryId":164,"showPsChildren":69,"position":176,"children":177,"psChildren":178},43,{"fr":74},2,[],[],{"id":180,"type":161,"label":181,"href":183,"icon":164,"description":164,"badge":164,"groupTitle":164,"style":164,"gridColumns":164,"cssClass":164,"psCategoryId":164,"showPsChildren":69,"position":184,"children":185,"psChildren":186},44,{"fr":182},"Outils IA","\u002Foutils-ia",3,[],[],{"id":188,"type":161,"label":189,"href":68,"icon":164,"description":164,"badge":164,"groupTitle":164,"style":191,"gridColumns":164,"cssClass":164,"psCategoryId":164,"showPsChildren":69,"position":192,"children":193,"psChildren":194},45,{"fr":190},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":196,"type":161,"label":197,"href":117,"icon":164,"description":164,"badge":164,"groupTitle":164,"style":164,"gridColumns":164,"cssClass":164,"psCategoryId":164,"showPsChildren":69,"position":57,"children":198,"psChildren":199},46,{"fr":116},[],[],{"id":201,"type":161,"label":202,"href":135,"icon":164,"description":164,"badge":164,"groupTitle":164,"style":164,"gridColumns":164,"cssClass":164,"psCategoryId":164,"showPsChildren":69,"position":203,"children":204,"psChildren":205},47,{"fr":131},6,[],[],{"id":207,"type":161,"label":208,"href":141,"icon":164,"description":164,"badge":164,"groupTitle":164,"style":164,"gridColumns":164,"cssClass":164,"psCategoryId":164,"showPsChildren":69,"position":209,"children":210,"psChildren":211},48,{"fr":140},7,[],[],{"header":213},{"logo":214,"topBar":219,"contactEmail":222,"features":223,"navBar":164},{"src":215,"alt":216,"text":134,"href":217,"class":218},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":164,"showLanguages":69,"align":220,"languages":221},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":224},"inline",{"footer":226},{"theme":227,"description":164,"hours":164,"logo":228,"contact":229,"social":230,"bottomBar":240},"dark",{"src":215,"href":217,"alt":134},{"email":164,"phone":164,"address":164,"cta":164},[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":164}]