[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":22,"megamenu":103,"$fB9aQsOHOKAmKPNJkV_yBfjhDZ76qJEjpCcPvEQ2ZIHY":160,"header-db":204,"footer-db":217,"$fwnEUWEMeUDimJIYfAjPk3rybT5zXze2A5dwhxlUSJFc":233},{"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",{"items":104},[105,114,120,126,134,142,148,154],{"id":106,"type":107,"label":108,"href":84,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":111,"children":112,"psChildren":113},41,"link",{"fr":109},"Expertise",null,0,[],[],{"id":115,"type":107,"label":116,"href":75,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":117,"children":118,"psChildren":119},42,{"fr":74},1,[],[],{"id":121,"type":107,"label":122,"href":36,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":123,"children":124,"psChildren":125},43,{"fr":35},2,[],[],{"id":127,"type":107,"label":128,"href":130,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":131,"children":132,"psChildren":133},44,{"fr":129},"Outils IA","\u002Foutils-ia",3,[],[],{"id":135,"type":107,"label":136,"href":29,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":138,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":139,"children":140,"psChildren":141},45,{"fr":137},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":143,"type":107,"label":144,"href":78,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":145,"children":146,"psChildren":147},46,{"fr":77},5,[],[],{"id":149,"type":107,"label":150,"href":96,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":151,"children":152,"psChildren":153},47,{"fr":92},6,[],[],{"id":155,"type":107,"label":156,"href":102,"icon":110,"description":110,"badge":110,"groupTitle":110,"style":110,"gridColumns":110,"cssClass":110,"psCategoryId":110,"showPsChildren":30,"position":157,"children":158,"psChildren":159},48,{"fr":101},7,[],[],{"title":161,"slug":162,"metaDescription":163,"category":164,"tags":165,"difficulty":172,"psVersions":173,"content":177,"faq":178,"tldr":200,"readingTime":151,"generatedAt":201,"publishDate":201,"relatedArticles":202,"sourceCategory":203},"Intégrer un design Photoshop dans PrestaShop sans casser le responsive","integrer-design-photoshop-prestashop-responsive-bootstrap","Découvrez comment intégrer correctement un design découpé dans Photoshop sur PrestaShop avec Bootstrap, sans utiliser de tableaux HTML obsolètes.","design",[166,167,168,169,170,171],"photoshop","responsive-design","bootstrap","integration-html","css","theme-prestashop","intermediaire",[174,175,176],"1.6","1.7","8.x","\u003Ch2>Introduction\u003C\u002Fh2>\n\u003Cp>La découpe d'une maquette Photoshop en \"tranches\" (slices) pour l'intégrer dans une page CMS PrestaShop est une technique qui remonte aux débuts du web. Si elle permettait autrefois de reproduire fidèlement un visuel complexe, cette approche génère systématiquement du code à base de tableaux HTML (\u003Ccode>\u003Ctable>\u003C\u002Fcode>) qui pose de sérieux problèmes en 2024 : absence totale de responsive design, performances dégradées et accessibilité catastrophique.\u003C\u002Fp>\n\u003Cp>Cet article explique pourquoi cette méthode est à proscrire et comment intégrer correctement un design visuel riche dans PrestaShop en utilisant la grille Bootstrap, nativement disponible dans tous les thèmes depuis la version 1.6.\u003C\u002Fp>\n\u003Ch2>Le problème : les tranches Photoshop génèrent des tableaux HTML\u003C\u002Fh2>\n\u003Cp>Lorsqu'on utilise la fonction \"Tranches\" de Photoshop puis \"Enregistrer pour le web\", le logiciel produit automatiquement un fichier HTML structuré avec des balises \u003Ccode>\u003Ctable>\u003C\u002Fcode>, \u003Ccode>\u003Ctr>\u003C\u002Fcode> et \u003Ccode>\u003Ctd>\u003C\u002Fcode>. Chaque tranche devient une cellule de tableau contenant une image.\u003C\u002Fp>\n\u003Cp>Voici à quoi ressemble typiquement ce code généré :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- ❌ Code généré par Photoshop — NE PAS UTILISER -->\n<table id=\"Table_01\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"1200\">\n  <tr>\n    <td colspan=\"19\">\n      <img src=\"\u002Fimg\u002Fcms\u002Fbanniere-hero.jpg\" width=\"1200\" height=\"589\" \u002F>\n    <\u002Ftd>\n  <\u002Ftr>\n  <tr>\n    <td rowspan=\"2\">\n      <img src=\"\u002Fimg\u002Fcms\u002Fspacer.gif\" width=\"12\" height=\"220\" \u002F>\n    <\u002Ftd>\n    <td colspan=\"2\">\n      <a href=\"\u002Fcategorie-promo\">\n        <img src=\"\u002Fimg\u002Fcms\u002Foffre-1.jpg\" width=\"380\" height=\"220\" \u002F>\n      <\u002Fa>\n    <\u002Ftd>\n  <\u002Ftr>\n<\u002Ftable>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Les problèmes concrets de cette approche\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>1. Aucun responsive design possible\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Un tableau HTML avec une largeur fixe de 1200px ne peut pas s'adapter à un écran mobile de 375px. Les images débordent, le scroll horizontal apparaît, et l'expérience utilisateur est désastreuse. Or, en 2024, plus de 60 % du trafic e-commerce provient du mobile.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>2. Conflits CSS avec le thème PrestaShop\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Les thèmes PrestaShop appliquent des styles globaux aux tableaux. Par exemple, dans le fichier \u003Ccode>global.css\u003C\u002Fcode> (ou \u003Ccode>theme.css\u003C\u002Fcode> sur PrestaShop 8.x), on trouve généralement :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\ntable td, table th {\n  padding: 9px 10px;\n  text-align: left;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ce padding s'applique à \u003Cstrong>toutes\u003C\u002Fstrong> les cellules de tableau, y compris celles de votre design Photoshop. Résultat : des espaces indésirables apparaissent entre chaque tranche, cassant totalement l'assemblage visuel.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>3. Poids de page excessif\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Les tranches Photoshop incluent souvent des images \"spacer\" (GIF transparents de 1×1 pixel) pour maintenir la structure. Ce sont des requêtes HTTP inutiles qui alourdissent le chargement.\u003C\u002Fp>\n\u003Ch2>La solution temporaire : neutraliser le padding\u003C\u002Fh2>\n\u003Cp>Si vous héritez d'un site existant avec ce type d'intégration et que vous ne pouvez pas tout refondre immédiatement, voici comment supprimer le padding parasite.\u003C\u002Fp>\n\u003Cp>Ajoutez cette classe CSS dans votre fichier de thème (\u003Ccode>custom.css\u003C\u002Fcode> ou via le module \"Custom CSS\") :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Fix temporaire pour les tableaux Photoshop *\u002F\ntable.no-padding td,\ntable.no-padding th {\n  padding: 0;\n  border: 0;\n  line-height: 0; \u002F* Supprime l'espace sous les images inline *\u002F\n}\n\ntable.no-padding img {\n  display: block; \u002F* Élimine le gap lié au rendu inline des images *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Puis ajoutez la classe \u003Ccode>no-padding\u003C\u002Fcode> sur votre balise \u003Ccode>\u003Ctable>\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<table class=\"no-padding\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"1200\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Important :\u003C\u002Fstrong> Cette solution corrige l'affichage desktop mais ne résout en rien le problème du responsive. C'est un pansement, pas un traitement.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>La bonne approche : Bootstrap Grid + images responsive\u003C\u002Fh2>\n\u003Cp>La solution pérenne consiste à abandonner les tableaux au profit de la grille Bootstrap, présente nativement dans PrestaShop depuis la version 1.6 (Bootstrap 3), et toujours disponible en 1.7 et 8.x (Bootstrap 4+).\u003C\u002Fp>\n\u003Ch3>Principe de conversion\u003C\u002Fh3>\n\u003Cp>Chaque \"ligne\" de votre design Photoshop devient une \u003Ccode>row\u003C\u002Fcode> Bootstrap, et chaque tranche devient une colonne (\u003Ccode>col-*\u003C\u002Fcode>) dont la taille s'adapte automatiquement selon la résolution.\u003C\u002Fp>\n\u003Ch3>Exemple pratique\u003C\u002Fh3>\n\u003Cp>Imaginons un design avec un bandeau pleine largeur suivi de trois blocs promotionnels côte à côte :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- ✅ Intégration responsive avec Bootstrap -->\n<div class=\"cms-design\">\n  <!-- Bandeau hero pleine largeur -->\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <img src=\"\u002Fimg\u002Fcms\u002Fbanniere-hero.jpg\" \n           class=\"img-fluid w-100\" \n           alt=\"Promotion de saison\" \n           loading=\"lazy\" \u002F>\n    <\u002Fdiv>\n  <\u002Fdiv>\n\n  <!-- Trois offres côte à côte (desktop) → empilées (mobile) -->\n  <div class=\"row mt-3\">\n    <div class=\"col-12 col-md-4 mb-3\">\n      <a href=\"\u002Fcategorie\u002Foffre-1\">\n        <img src=\"\u002Fimg\u002Fcms\u002Foffre-1.jpg\" \n             class=\"img-fluid w-100\" \n             alt=\"Offre numéro 1\" \n             loading=\"lazy\" \u002F>\n      <\u002Fa>\n    <\u002Fdiv>\n    <div class=\"col-12 col-md-4 mb-3\">\n      <a href=\"\u002Fcategorie\u002Foffre-2\">\n        <img src=\"\u002Fimg\u002Fcms\u002Foffre-2.jpg\" \n             class=\"img-fluid w-100\" \n             alt=\"Offre numéro 2\" \n             loading=\"lazy\" \u002F>\n      <\u002Fa>\n    <\u002Fdiv>\n    <div class=\"col-12 col-md-4 mb-3\">\n      <a href=\"\u002Fcategorie\u002Foffre-3\">\n        <img src=\"\u002Fimg\u002Fcms\u002Foffre-3.jpg\" \n             class=\"img-fluid w-100\" \n             alt=\"Offre numéro 3\" \n             loading=\"lazy\" \u002F>\n      <\u002Fa>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Explication des classes utilisées\u003C\u002Fh3>\n\u003Ctr>\u003Cth>Classe\u003C\u002Fth>\u003Cth>Rôle\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`col-12`\u003C\u002Fth>\u003Cth>Pleine largeur sur mobile (\u003C 768px)\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`col-md-4`\u003C\u002Fth>\u003Cth>Un tiers de la largeur à partir de 768px\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`img-fluid`\u003C\u002Fth>\u003Cth>L'image s'adapte à la largeur de son conteneur\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`w-100`\u003C\u002Fth>\u003Cth>Force l'image à occuper 100 % de la colonne\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`mb-3`\u003C\u002Fth>\u003Cth>Marge basse entre les blocs sur mobile\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`loading=\"lazy\"`\u003C\u002Fth>\u003Cth>Chargement différé pour la performance\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ch3>Comportement responsive\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Desktop (≥ 768px)** : les trois offres s'affichent côte à côte sur une ligne\u003C\u002Fli>\n\u003Cli>**Mobile (\u003C 768px)** : chaque offre occupe toute la largeur et s'empile verticalement\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>C'est exactement le comportement souhaité, sans aucun JavaScript ni media query à écrire manuellement.\u003C\u002Fp>\n\u003Ch2>Méthode de conversion pas à pas\u003C\u002Fh2>\n\u003Cp>Voici comment convertir un design Photoshop existant vers Bootstrap dans une page CMS PrestaShop :\u003C\u002Fp>\n\u003Ch3>Étape 1 : Analyser la maquette\u003C\u002Fh3>\n\u003Cp>Identifiez les grandes zones du design : bandeau principal, blocs de contenu, appels à l'action. Dessinez mentalement les lignes horizontales qui séparent chaque rangée.\u003C\u002Fp>\n\u003Ch3>Étape 2 : Exporter les images correctement\u003C\u002Fh3>\n\u003Cp>Plutôt que d'utiliser les tranches Photoshop :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Sélectionnez chaque zone individuellement\u003C\u002Fli>\n\u003Cli>Exportez en **WebP** (ou JPEG pour la compatibilité) avec une qualité de 80-85 %\u003C\u002Fli>\n\u003Cli>Nommez les fichiers de manière descriptive : `promo-noel-offre-1.webp` plutôt que `slice_03.gif`\u003C\u002Fli>\n\u003Cli>Uploadez-les dans `\u002Fimg\u002Fcms\u002F` via le gestionnaire de médias PrestaShop\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Étape 3 : Construire la grille\u003C\u002Fh3>\n\u003Cp>Structurez votre HTML avec les \u003Ccode>row\u003C\u002Fcode> et \u003Ccode>col-*\u003C\u002Fcode> de Bootstrap en vous basant sur la grille de 12 colonnes.\u003C\u002Fp>\n\u003Ch3>Étape 4 : Ajouter le CSS personnalisé\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Style pour les pages CMS avec design intégré *\u002F\n.cms-design .row {\n  --bs-gutter-x: 0.5rem; \u002F* Réduit l'espacement entre colonnes *\u002F\n}\n\n.cms-design img {\n  border-radius: 8px; \u002F* Coins arrondis optionnels *\u002F\n  transition: transform 0.2s ease;\n}\n\n.cms-design a:hover img {\n  transform: scale(1.02); \u002F* Léger zoom au survol *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Optimisations supplémentaires pour PrestaShop 8.x\u003C\u002Fh2>\n\u003Cp>Sur PrestaShop 8.x, quelques bonnes pratiques supplémentaires s'appliquent :\u003C\u002Fp>\n\u003Ch3>Utiliser le format WebP\u003C\u002Fh3>\n\u003Cp>PrestaShop 8 gère nativement le WebP. Privilégiez ce format qui offre une réduction de poids de 25 à 35 % par rapport au JPEG à qualité visuelle équivalente.\u003C\u002Fp>\n\u003Ch3>Exploiter le lazy loading natif\u003C\u002Fh3>\n\u003Cp>L'attribut \u003Ccode>loading=\"lazy\"\u003C\u002Fcode> est supporté par tous les navigateurs modernes. Ajoutez-le systématiquement sur les images situées en dessous de la ligne de flottaison.\u003C\u002Fp>\n\u003Ch3>Désactiver la compression CCC pour le debug\u003C\u002Fh3>\n\u003Cp>Si vous devez inspecter les styles CSS de votre thème pour identifier des conflits, désactivez temporairement la concaténation CSS dans \u003Cstrong>Paramètres avancés > Performances > CCC\u003C\u002Fstrong> (Combine, Compress, Cache). N'oubliez pas de la réactiver une fois le debug terminé.\u003C\u002Fp>\n\u003Ch2>Erreurs fréquentes à éviter\u003C\u002Fh2>\n\u003Col>\n\u003Cli>**Utiliser `width` et `height` en attributs fixes** sur les images au lieu de `img-fluid` : cela empêche le redimensionnement responsive\u003C\u002Fli>\n\u003Cli>**Oublier `display: block`** sur les images dans les anciennes intégrations tableau, ce qui crée un espace de 3-4px sous chaque image\u003C\u002Fli>\n\u003Cli>**Mélanger tableaux et Bootstrap** dans la même page : choisissez l'un ou l'autre pour maintenir la cohérence\u003C\u002Fli>\n\u003Cli>**Utiliser des images GIF spacer** : remplacez-les par des marges CSS (`margin`, `padding`, `gap`)\u003C\u002Fli>\n\u003Cli>**Négliger les attributs `alt`** : chaque image doit avoir un texte alternatif descriptif pour le SEO et l'accessibilité\u003C\u002Fli>\n\u003C\u002Ful>",[179,182,185,188,191,194,197],{"q":180,"a":181},"Pourquoi mes images découpées dans Photoshop ont des espaces blancs dans PrestaShop ?","Le thème PrestaShop applique un padding par défaut sur toutes les cellules de tableau (généralement `padding: 9px 10px` dans global.css). Pour corriger temporairement, ajoutez une classe `no-padding` sur votre balise `\u003Ctable>` et créez une règle CSS qui annule le padding. La solution long terme est de migrer vers la grille Bootstrap.",{"q":183,"a":184},"Comment rendre responsive un design Photoshop intégré dans une page CMS PrestaShop ?","Il est impossible de rendre responsive un design basé sur des tableaux HTML générés par Photoshop. La seule solution fiable est de reconstruire l'intégration avec la grille Bootstrap (classes `row`, `col-*`, `img-fluid`) déjà incluse dans tous les thèmes PrestaShop depuis la version 1.6. Les images s'empileront automatiquement en mobile.",{"q":186,"a":187},"Quel format d'image utiliser pour remplacer les tranches Photoshop dans PrestaShop ?","Privilégiez le format WebP, nativement supporté par PrestaShop 8.x, qui offre une réduction de poids de 25 à 35 % par rapport au JPEG. Exportez depuis Photoshop avec une qualité de 80-85 %. Pour la compatibilité avec les très anciens navigateurs, conservez un fallback JPEG.",{"q":189,"a":190},"Comment désactiver la compression CSS dans PrestaShop pour déboguer un problème d'affichage ?","Rendez-vous dans le back-office PrestaShop sous Paramètres avancés > Performances, puis désactivez les options CCC (Combine, Compress, Cache) pour le CSS. Cela vous permettra d'inspecter les fichiers CSS individuels et d'identifier quelle règle cause le conflit. Pensez à réactiver la compression une fois le debug terminé.",{"q":192,"a":193},"La grille Bootstrap est-elle disponible dans toutes les versions de PrestaShop ?","Oui. PrestaShop 1.6 inclut Bootstrap 3, PrestaShop 1.7 utilise Bootstrap 4 (via le thème Classic), et PrestaShop 8.x conserve Bootstrap 4. Les classes de grille (`row`, `col-md-*`) fonctionnent de manière identique. Seules quelques classes utilitaires diffèrent entre Bootstrap 3 et 4 (par exemple `img-responsive` devient `img-fluid`).",{"q":195,"a":196},"Peut-on utiliser les tranches Photoshop uniquement pour le desktop et cacher sur mobile ?","Techniquement oui, avec des classes comme `d-none d-md-block`, mais cette approche est fortement déconseillée. Vous devriez alors créer une version mobile alternative, ce qui double le travail de maintenance. Il est bien plus efficace d'investir le temps dans une intégration Bootstrap responsive unique qui fonctionne sur tous les appareils.",{"q":198,"a":199},"Comment intégrer un bandeau promotionnel responsive dans PrestaShop sans coder ?","Utilisez l'éditeur de pages CMS de PrestaShop en mode source HTML. Collez une structure Bootstrap simple avec une `row` et un `col-12` contenant votre image avec la classe `img-fluid`. Si vous n'êtes pas à l'aise avec le HTML, des modules comme Creative Elements ou Starter Theme Builder offrent des constructeurs visuels avec grille responsive intégrée.","Les tranches Photoshop génèrent des tableaux HTML non responsive et incompatibles avec les styles PrestaShop. La solution pérenne est de reconstruire l'intégration avec la grille Bootstrap, nativement disponible dans PrestaShop depuis la version 1.6, pour obtenir un design adaptatif sur tous les écrans.","2026-03-21T14:58:49.000Z",[],"Discussion générale",{"header":205},{"logo":206,"topBar":211,"contactEmail":214,"features":215,"navBar":110},{"src":207,"alt":208,"text":95,"href":209,"class":210},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":110,"showLanguages":30,"align":212,"languages":213},"left",[],"contact@alexandrecarette.fr",{"showSearch":30,"showWishlist":30,"showLogin":20,"showContact":30,"showCart":30,"stickyHeader":20,"headerLayout":216},"inline",{"footer":218},{"theme":219,"description":110,"hours":110,"logo":220,"contact":221,"social":222,"bottomBar":232},"dark",{"src":207,"href":209,"alt":95},{"email":110,"phone":110,"address":110,"cta":110},[223,226,229],{"platform":224,"href":225,"label":224},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":227,"href":228,"label":227},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":230,"href":231,"label":230},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":110},{"academy":234,"blog":235,"expertise":246},[],[236,240,243],{"title":237,"url":238,"score":117,"type":239},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":241,"url":242,"score":117,"type":239},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":244,"url":245,"score":117,"type":239},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[]]