[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$f9oFtSyjZJ_i_MTH7Dvd7kVKXFFaIzG2D8F1iAzBv5hQ":22,"megamenu":61,"footer-db":130,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":149,"$fxSW0VgSt1upayI_ctAEWAdn2yzSctwXAMx_UmmWjkEg":216,"header-db":230},{"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},"Redimensionner les colonnes de la fiche produit PrestaShop avec Bootstrap","redimensionner-colonnes-fiche-produit-prestashop-bootstrap","Guide complet pour modifier la largeur des colonnes sur product.tpl dans PrestaShop grâce au système de grille Bootstrap. Méthode propre et responsive.","design",[28,29,30,31,32,33],"bootstrap","product.tpl","grille CSS","responsive design","template produit","mise en page","debutant",[36,37,38],"1.6","1.7","8.x","\u003Ch2>Comprendre la mise en page de la fiche produit PrestaShop\u003C\u002Fh2>\n\u003Cp>La fiche produit PrestaShop repose sur le \u003Cstrong>système de grille Bootstrap\u003C\u002Fstrong>, un framework CSS qui découpe chaque ligne en \u003Cstrong>12 colonnes\u003C\u002Fstrong>. Modifier la largeur d'un bloc (image, description, colonne d'achat) revient à changer la classe Bootstrap attribuée à la \u003Ccode>\u003Cdiv>\u003C\u002Fcode> correspondante.\u003C\u002Fp>\n\u003Cp>Beaucoup de marchands tentent de forcer des largeurs en pixels avec \u003Ccode>width: 220px !important\u003C\u002Fcode> ou des \u003Ccode>float: right\u003C\u002Fcode> dans leur feuille de style personnalisée. Cette approche est \u003Cstrong>contre-productive\u003C\u002Fstrong> : elle casse le responsive design et crée des conflits avec le framework.\u003C\u002Fp>\n\u003Ch2>Le système de grille Bootstrap en 2 minutes\u003C\u002Fh2>\n\u003Cp>Bootstrap divise l'espace horizontal en \u003Cstrong>12 unités\u003C\u002Fstrong>. Chaque élément se voit attribuer une classe qui définit combien de colonnes il occupe :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Classe\u003C\u002Fth>\u003Cth>Largeur occupée\u003C\u002Fth>\u003Cth>Pourcentage\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`col-md-3`\u003C\u002Fth>\u003Cth>3\u002F12\u003C\u002Fth>\u003Cth>25 %\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`col-md-4`\u003C\u002Fth>\u003Cth>4\u002F12\u003C\u002Fth>\u003Cth>33,3 %\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`col-md-6`\u003C\u002Fth>\u003Cth>6\u002F12\u003C\u002Fth>\u003Cth>50 %\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`col-md-8`\u003C\u002Fth>\u003Cth>8\u002F12\u003C\u002Fth>\u003Cth>66,6 %\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>`col-md-12`\u003C\u002Fth>\u003Cth>12\u002F12\u003C\u002Fth>\u003Cth>100 %\u003C\u002Fth>\u003C\u002Ftr>\n\u003Cp>Le préfixe change selon le breakpoint (taille d'écran) :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>`col-xs-*` : mobile (\u003C 768 px)\u003C\u002Fli>\n\u003Cli>`col-sm-*` : tablette (≥ 768 px)\u003C\u002Fli>\n\u003Cli>`col-md-*` : desktop (≥ 992 px)\u003C\u002Fli>\n\u003Cli>`col-lg-*` : grand écran (≥ 1200 px)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\u003Cstrong>PrestaShop 8.x et Bootstrap 4 :\u003C\u002Fstrong> Les classes \u003Ccode>col-xs-*\u003C\u002Fcode> n'existent plus. Elles sont remplacées par \u003Ccode>col-*\u003C\u002Fcode> (sans préfixe de breakpoint). Si vous migrez depuis PrestaShop 1.6, pensez à adapter vos templates.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>Identifier les blocs de la fiche produit\u003C\u002Fh2>\n\u003Cp>Sur PrestaShop 1.6 (thème default-bootstrap), la fiche produit se compose de trois zones principales :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- Colonne image -->\n<div class=\"pb-left-column col-xs-12 col-md-5\">\n  <!-- Carrousel images -->\n<\u002Fdiv>\n\n<!-- Colonne description centrale -->\n<div class=\"pb-center-column col-xs-12 col-md-4\">\n  <!-- Nom, description courte, attributs -->\n<\u002Fdiv>\n\n<!-- Colonne achat (droite) -->\n<div class=\"pb-right-column col-xs-12 col-md-3\">\n  <!-- Prix, bouton panier, disponibilité -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>La somme des colonnes doit \u003Cstrong>toujours faire 12\u003C\u002Fstrong> (ici 5 + 4 + 3 = 12).\u003C\u002Fp>\n\u003Cp>Sur \u003Cstrong>PrestaShop 1.7 et 8.x\u003C\u002Fstrong> (thème Classic), la structure utilise deux colonnes :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<div class=\"col-md-6\">\n  <!-- Images produit -->\n<\u002Fdiv>\n<div class=\"col-md-6\">\n  <!-- Infos produit : titre, prix, variantes, panier -->\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Méthode propre : modifier les classes dans le template\u003C\u002Fh2>\n\u003Ch3>Étape 1 : Localiser le fichier template\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>PrestaShop 1.6 :\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nthemes\u002Fvotre-theme\u002Fproduct.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>PrestaShop 1.7 \u002F 8.x :\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nthemes\u002Fvotre-theme\u002Ftemplates\u002Fcatalog\u002Fproduct.tpl\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Étape 2 : Modifier les proportions\u003C\u002Fh3>\n\u003Cp>Pour \u003Cstrong>agrandir la colonne image\u003C\u002Fstrong> et \u003Cstrong>réduire la colonne d'achat\u003C\u002Fstrong> sur PrestaShop 1.6 :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- AVANT : image 5 | description 4 | achat 3 -->\n<div class=\"pb-left-column col-xs-12 col-md-6\">\n<div class=\"pb-center-column col-xs-12 col-md-4\">\n<div class=\"pb-right-column col-xs-12 col-md-2\">\n\n<!-- APRÈS : image 6 | description 4 | achat 2 -->\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Sur \u003Cstrong>PrestaShop 8.x\u003C\u002Fstrong>, pour donner plus de place aux images :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- AVANT -->\n<div class=\"col-md-6\"><!-- images --><\u002Fdiv>\n<div class=\"col-md-6\"><!-- infos --><\u002Fdiv>\n\n<!-- APRÈS -->\n<div class=\"col-md-7\"><!-- images --><\u002Fdiv>\n<div class=\"col-md-5\"><!-- infos --><\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Étape 3 : Gérer le responsive mobile\u003C\u002Fh3>\n\u003Cp>Les classes peuvent se cumuler pour adapter l'affichage par device :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<div class=\"pb-center-column col-xs-12 col-sm-6 col-md-4\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ce \u003Ccode>\u003Cdiv>\u003C\u002Fcode> occupe :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>**100 %** sur mobile (`col-xs-12`)\u003C\u002Fli>\n\u003Cli>**50 %** sur tablette (`col-sm-6`)\u003C\u002Fli>\n\u003Cli>**33 %** sur desktop (`col-md-4`)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>C'est le principe fondamental de Bootstrap : \u003Cstrong>plusieurs classes sur un même élément fusionnent leurs règles CSS\u003C\u002Fstrong> pour produire un comportement responsive sans media queries manuelles.\u003C\u002Fp>\n\u003Ch2>Ce qu'il ne faut PAS faire\u003C\u002Fh2>\n\u003Ch3>Forcer des largeurs en pixels\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* ❌ MAUVAISE PRATIQUE *\u002F\n.box-info-product {\n    width: 220px !important;\n    float: right;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette approche pose plusieurs problèmes :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Casse le responsive** : 220 px sur un écran de 320 px déborde du viewport\u003C\u002Fli>\n\u003Cli>**Conflit avec Bootstrap** : le `!important` écrase les media queries du framework\u003C\u002Fli>\n\u003Cli>**Maintenance impossible** : chaque ajustement nécessite de recalculer les pixels\u003C\u002Fli>\n\u003Cli>**Float obsolète** : `float` est remplacé par Flexbox dans les versions modernes de Bootstrap\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Modifier le CSS du framework directement\u003C\u002Fh3>\n\u003Cp>Ne touchez jamais aux fichiers \u003Ccode>bootstrap.min.css\u003C\u002Fcode> ou aux classes natives. Travaillez \u003Cstrong>uniquement dans vos templates\u003C\u002Fstrong> ou dans votre feuille de style enfant.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques de personnalisation\u003C\u002Fh2>\n\u003Col>\n\u003Cli>**Toujours travailler dans un thème enfant** pour préserver vos modifications lors des mises à jour\u003C\u002Fli>\n\u003Cli>**Respecter la règle des 12 colonnes** : la somme des `col-*` d'une même ligne doit valoir 12\u003C\u002Fli>\n\u003Cli>**Tester sur tous les breakpoints** : utilisez les outils de développement du navigateur (F12 → mode responsive)\u003C\u002Fli>\n\u003Cli>**Utiliser les classes offset** pour centrer un bloc : `col-md-8 col-md-offset-2` (Bootstrap 3) ou `col-md-8 offset-md-2` (Bootstrap 4\u002F5)\u003C\u002Fli>\n\u003Cli>**Préférer les utilitaires Bootstrap** (`d-flex`, `justify-content-between`) plutôt que du CSS custom pour la mise en page\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Récapitulatif par version\u003C\u002Fh2>\n\u003Ctr>\u003Cth>Version PS\u003C\u002Fth>\u003Cth>Framework\u003C\u002Fth>\u003Cth>Fichier template\u003C\u002Fth>\u003Cth>Classes typiques\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>1.6\u003C\u002Fth>\u003Cth>Bootstrap 3\u003C\u002Fth>\u003Cth>`themes\u002F*\u002Fproduct.tpl`\u003C\u002Fth>\u003Cth>`col-xs-*`, `col-md-*`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>1.7\u003C\u002Fth>\u003Cth>Bootstrap 4\u003C\u002Fth>\u003Cth>`themes\u002F*\u002Ftemplates\u002Fcatalog\u002Fproduct.tpl`\u003C\u002Fth>\u003Cth>`col-*`, `col-md-*`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>8.x\u003C\u002Fth>\u003Cth>Bootstrap 4\u003C\u002Fth>\u003Cth>`themes\u002F*\u002Ftemplates\u002Fcatalog\u002Fproduct.tpl`\u003C\u002Fth>\u003Cth>`col-*`, `col-md-*`\u003C\u002Fth>\u003C\u002Ftr>",[41,44,47,50,53],{"q":42,"a":43},"Comment agrandir la colonne image sur la fiche produit PrestaShop ?","Ouvrez le fichier product.tpl de votre thème et modifiez la classe Bootstrap de la div contenant les images. Par exemple, passez de col-md-5 à col-md-7. Pensez à réduire proportionnellement les autres colonnes pour que la somme reste égale à 12.",{"q":45,"a":46},"Pourquoi ne pas utiliser width en pixels pour redimensionner les colonnes PrestaShop ?","Le système de grille Bootstrap fonctionne en pourcentages relatifs pour garantir un affichage responsive. Forcer une largeur en pixels avec !important casse le comportement adaptatif sur mobile et tablette, et crée des conflits avec les media queries du framework.",{"q":48,"a":49},"Quelle est la différence entre col-xs, col-sm, col-md et col-lg dans PrestaShop ?","Ces classes définissent la largeur d'un élément selon la taille de l'écran. col-xs s'applique aux mobiles (moins de 768 px), col-sm aux tablettes, col-md aux desktops et col-lg aux grands écrans. On peut combiner plusieurs classes sur un même élément pour un comportement responsive complet. Attention : col-xs n'existe plus en Bootstrap 4 (PrestaShop 1.7+), remplacé par col sans préfixe.",{"q":51,"a":52},"Comment passer la fiche produit PrestaShop en pleine largeur sur mobile ?","Ajoutez la classe col-12 (Bootstrap 4) ou col-xs-12 (Bootstrap 3) à chaque div de la fiche produit. Cette classe force l'élément à occuper 100 % de la largeur sur les petits écrans, empilant naturellement les blocs les uns sous les autres.",{"q":54,"a":55},"Faut-il modifier le CSS ou le template pour changer la mise en page produit ?","Privilégiez toujours la modification du template (product.tpl) en changeant les classes Bootstrap. Modifier le CSS pour contourner le framework (float, width en pixels) crée de la dette technique. Le template est l'endroit prévu pour définir la structure de la page, le CSS ne devrait gérer que le style visuel.","Pour redimensionner les colonnes de la fiche produit PrestaShop, modifiez les classes Bootstrap (col-md-*) directement dans product.tpl en respectant la règle des 12 colonnes. N'utilisez jamais de largeurs en pixels ou de !important qui cassent le responsive.",4,"2026-03-21T14:36:18.000Z",[],"Utilisation de PrestaShop : configuration et difficultés",{"items":62},[63,74,82,90,98,106,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":57,"children":104,"psChildren":105},45,{"fr":101},"Offre Starter ✨","\u002Foffre-starter",{"highlight":20},[],[],{"id":107,"type":65,"label":108,"href":110,"icon":69,"description":69,"badge":69,"groupTitle":69,"style":69,"gridColumns":69,"cssClass":69,"psCategoryId":69,"showPsChildren":70,"position":111,"children":112,"psChildren":113},46,{"fr":109},"Academy","\u002Facademy",5,[],[],{"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,[],[],{"footer":131},{"theme":132,"description":69,"hours":69,"logo":133,"contact":137,"social":138,"bottomBar":148},"dark",{"src":134,"href":135,"alt":136},"\u002Flogo-ac.svg","\u002F","Alexandre Carette",{"email":69,"phone":69,"address":69,"cta":69},[139,142,145],{"platform":140,"href":141,"label":140},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":143,"href":144,"label":143},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":146,"href":147,"label":146},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":69},{"columns":150},[151,163,193,209],{"title":152,"links":153},"Plateforme",[154,156,159,160],{"label":155,"href":102,"external":70},"Offre Starter (2 500 €)",{"label":157,"href":158,"external":70},"Devenir Ambassadeur","\u002Fambassadeur",{"label":85,"href":86,"external":70},{"label":161,"href":162,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":164,"links":165},"Le Synedre",[166,169,172,175,178,181,184,187,190],{"label":167,"href":168,"external":70},"L'histoire","\u002Fsynedre",{"label":170,"href":171,"external":70},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":173,"href":174,"external":70},"L'équipe","\u002Fequipe",{"label":176,"href":177,"external":70},"Le réacteur en direct","\u002Freacteur",{"label":179,"href":180,"external":70},"Le Drill (entraînement)","\u002Fdrill",{"label":182,"href":183,"external":70},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":185,"href":186,"external":70},"Les agents IA","\u002Fagents-ia",{"label":188,"href":189,"external":70},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":191,"href":192,"external":70},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":194,"links":195},"Ressources",[196,197,198,201,203,206],{"label":77,"href":78,"external":70},{"label":109,"href":110,"external":70},{"label":199,"href":200,"external":70},"Dictionnaire","\u002Fdictionnaire",{"label":202,"href":68,"external":70},"Expertise PrestaShop",{"label":204,"href":205,"external":70},"Flywheel","\u002Fflywheel",{"label":207,"href":208,"external":70},"Manifeste","\u002Fmanifeste",{"title":117,"links":210},[211,212,215],{"label":136,"href":118,"external":70},{"label":213,"href":214,"external":70},"Dossier de presse","\u002Fpresse",{"label":125,"href":126,"external":70},{"academy":217,"blog":218,"expertise":229},[],[219,223,226],{"title":220,"url":221,"score":79,"type":222},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":224,"url":225,"score":79,"type":222},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":227,"url":228,"score":79,"type":222},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"header":231},{"logo":232,"topBar":235,"contactEmail":238,"features":239,"navBar":69},{"src":134,"alt":233,"text":136,"href":135,"class":234},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":69,"showLanguages":70,"align":236,"languages":237},"left",[],"contact@alexandrecarette.fr",{"showSearch":70,"showWishlist":70,"showLogin":20,"showContact":70,"showCart":70,"stickyHeader":20,"headerLayout":240},"inline"]