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.

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.

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.

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.

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.

Redimensionner les colonnes de la fiche produit PrestaShop avec Bootstrap

Comprendre la mise en page de la fiche produit PrestaShop

La fiche produit PrestaShop repose sur le système de grille Bootstrap, un framework CSS qui découpe chaque ligne en 12 colonnes. Modifier la largeur d'un bloc (image, description, colonne d'achat) revient à changer la classe Bootstrap attribuée à la

correspondante.

Beaucoup de marchands tentent de forcer des largeurs en pixels avec width: 220px !important ou des float: right dans leur feuille de style personnalisée. Cette approche est contre-productive : elle casse le responsive design et crée des conflits avec le framework.

Le système de grille Bootstrap en 2 minutes

Bootstrap divise l'espace horizontal en 12 unités. Chaque élément se voit attribuer une classe qui définit combien de colonnes il occupe :

ClasseLargeur occupéePourcentage `col-md-3`3/1225 % `col-md-4`4/1233,3 % `col-md-6`6/1250 % `col-md-8`8/1266,6 % `col-md-12`12/12100 %

Le préfixe change selon le breakpoint (taille d'écran) :

`col-xs-*` : mobile (< 768 px)
`col-sm-*` : tablette (≥ 768 px)
`col-md-*` : desktop (≥ 992 px)
`col-lg-*` : grand écran (≥ 1200 px)

PrestaShop 8.x et Bootstrap 4 : Les classes col-xs-* n'existent plus. Elles sont remplacées par col-* (sans préfixe de breakpoint). Si vous migrez depuis PrestaShop 1.6, pensez à adapter vos templates.

Identifier les blocs de la fiche produit

Sur PrestaShop 1.6 (thème default-bootstrap), la fiche produit se compose de trois zones principales :


<!-- Colonne image -->
<div class="pb-left-column col-xs-12 col-md-5">
  <!-- Carrousel images -->
</div>

<!-- Colonne description centrale -->
<div class="pb-center-column col-xs-12 col-md-4">
  <!-- Nom, description courte, attributs -->
</div>

<!-- Colonne achat (droite) -->
<div class="pb-right-column col-xs-12 col-md-3">
  <!-- Prix, bouton panier, disponibilité -->
</div>

La somme des colonnes doit toujours faire 12 (ici 5 + 4 + 3 = 12).

Sur PrestaShop 1.7 et 8.x (thème Classic), la structure utilise deux colonnes :


<div class="col-md-6">
  <!-- Images produit -->
</div>
<div class="col-md-6">
  <!-- Infos produit : titre, prix, variantes, panier -->
</div>

Méthode propre : modifier les classes dans le template

Étape 1 : Localiser le fichier template

PrestaShop 1.6 :


themes/votre-theme/product.tpl

PrestaShop 1.7 / 8.x :


themes/votre-theme/templates/catalog/product.tpl

Étape 2 : Modifier les proportions

Pour agrandir la colonne image et réduire la colonne d'achat sur PrestaShop 1.6 :


<!-- AVANT : image 5 | description 4 | achat 3 -->
<div class="pb-left-column col-xs-12 col-md-6">
<div class="pb-center-column col-xs-12 col-md-4">
<div class="pb-right-column col-xs-12 col-md-2">

<!-- APRÈS : image 6 | description 4 | achat 2 -->

Sur PrestaShop 8.x, pour donner plus de place aux images :


<!-- AVANT -->
<div class="col-md-6"><!-- images --></div>
<div class="col-md-6"><!-- infos --></div>

<!-- APRÈS -->
<div class="col-md-7"><!-- images --></div>
<div class="col-md-5"><!-- infos --></div>

Étape 3 : Gérer le responsive mobile

Les classes peuvent se cumuler pour adapter l'affichage par device :


<div class="pb-center-column col-xs-12 col-sm-6 col-md-4">

occupe :

**100 %** sur mobile (`col-xs-12`)
**50 %** sur tablette (`col-sm-6`)
**33 %** sur desktop (`col-md-4`)

C'est le principe fondamental de Bootstrap : plusieurs classes sur un même élément fusionnent leurs règles CSS pour produire un comportement responsive sans media queries manuelles.

Ce qu'il ne faut PAS faire

Forcer des largeurs en pixels


/* ❌ MAUVAISE PRATIQUE */
.box-info-product {
    width: 220px !important;
    float: right;
}

Cette approche pose plusieurs problèmes :

**Casse le responsive** : 220 px sur un écran de 320 px déborde du viewport
**Conflit avec Bootstrap** : le `!important` écrase les media queries du framework
**Maintenance impossible** : chaque ajustement nécessite de recalculer les pixels
**Float obsolète** : `float` est remplacé par Flexbox dans les versions modernes de Bootstrap

Modifier le CSS du framework directement

Ne touchez jamais aux fichiers bootstrap.min.css ou aux classes natives. Travaillez uniquement dans vos templates ou dans votre feuille de style enfant.

Bonnes pratiques de personnalisation

**Toujours travailler dans un thème enfant** pour préserver vos modifications lors des mises à jour
**Respecter la règle des 12 colonnes** : la somme des `col-*` d'une même ligne doit valoir 12
**Tester sur tous les breakpoints** : utilisez les outils de développement du navigateur (F12 → mode responsive)
**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/5)
**Préférer les utilitaires Bootstrap** (`d-flex`, `justify-content-between`) plutôt que du CSS custom pour la mise en page

Récapitulatif par version

#bootstrap #product.tpl #grille CSS #responsive design #template produit #mise en page

Questions fréquentes

Tout ce que vous devez savoir sur ce sujet.

: 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.
: 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.
: 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.
: 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.
: 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.

Un projet PrestaShop ?

Discutons-en directement.

★★★★★

193 projets livrés

Lire sur le blog

PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain Sylius rachète PrestaShop : ce que ça change pour vous

Blog technique

Articles approfondis sur l'e-commerce headless

CodeMyShop

Votre boutique PrestaShop clé en main

Alexandre Carette

Expert PrestaShop & Architecture E-commerce

Développeur PrestaShop depuis 2014, 193 projets livrés. Je conçois des architectures headless Nuxt + PrestaShop et des outils d'automatisation IA pour les e-commerçants.

contact@alexandrecarette.fr ← Tous les articles