Intégrer un design Photoshop dans PrestaShop sans casser le responsive
Découvrez comment intégrer correctement un design découpé dans Photoshop sur PrestaShop avec Bootstrap, sans utiliser de tableaux HTML obsolètes.
En bref : 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.
Introduction
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 ( 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. Lorsqu'on utilise la fonction "Tranches" de Photoshop puis "Enregistrer pour le web", le logiciel produit automatiquement un fichier HTML structuré avec des balises Voici à quoi ressemble typiquement ce code généré : 1. Aucun responsive design possible 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. 2. Conflits CSS avec le thème PrestaShop Les thèmes PrestaShop appliquent des styles globaux aux tableaux. Par exemple, dans le fichier Ce padding s'applique à toutes 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. 3. Poids de page excessif 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. 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. Ajoutez cette classe CSS dans votre fichier de thème ( Puis ajoutez la classe Important : Cette solution corrige l'affichage desktop mais ne résout en rien le problème du responsive. C'est un pansement, pas un traitement. 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+). Chaque "ligne" de votre design Photoshop devient une Imaginons un design avec un bandeau pleine largeur suivi de trois blocs promotionnels côte à côte : C'est exactement le comportement souhaité, sans aucun JavaScript ni media query à écrire manuellement. Voici comment convertir un design Photoshop existant vers Bootstrap dans une page CMS PrestaShop : 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. Plutôt que d'utiliser les tranches Photoshop : Structurez votre HTML avec les Sur PrestaShop 8.x, quelques bonnes pratiques supplémentaires s'appliquent : 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. L'attribut Si vous devez inspecter les styles CSS de votre thème pour identifier des conflits, désactivez temporairement la concaténation CSS dans Paramètres avancés > Performances > CCC (Combine, Compress, Cache). N'oubliez pas de la réactiver une fois le debug terminé. Tout ce que vous devez savoir sur ce sujet. Un projet PrestaShop ? Discutons-en directement. 193 projets livrés 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. ) qui pose de sérieux problèmes en 2024 : absence totale de responsive design, performances dégradées et accessibilité catastrophique.
Le problème : les tranches Photoshop génèrent des tableaux HTML
,
et . Chaque tranche devient une cellule de tableau contenant une image.
<!-- ❌ Code généré par Photoshop — NE PAS UTILISER -->
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="1200">
<tr>
<td colspan="19">
<img src="/img/cms/banniere-hero.jpg" width="1200" height="589" />
</td>
</tr>
<tr>
<td rowspan="2">
<img src="/img/cms/spacer.gif" width="12" height="220" />
</td>
<td colspan="2">
<a href="/categorie-promo">
<img src="/img/cms/offre-1.jpg" width="380" height="220" />
</a>
</td>
</tr>
</table>
Les problèmes concrets de cette approche
global.css (ou theme.css sur PrestaShop 8.x), on trouve généralement :
table td, table th {
padding: 9px 10px;
text-align: left;
}
La solution temporaire : neutraliser le padding
custom.css ou via le module "Custom CSS") :
/* Fix temporaire pour les tableaux Photoshop */
table.no-padding td,
table.no-padding th {
padding: 0;
border: 0;
line-height: 0; /* Supprime l'espace sous les images inline */
}
table.no-padding img {
display: block; /* Élimine le gap lié au rendu inline des images */
}
no-padding sur votre balise :
<table class="no-padding" border="0" cellpadding="0" cellspacing="0" width="1200">
La bonne approche : Bootstrap Grid + images responsive
Principe de conversion
row Bootstrap, et chaque tranche devient une colonne (col-*) dont la taille s'adapte automatiquement selon la résolution.Exemple pratique
<!-- ✅ Intégration responsive avec Bootstrap -->
<div class="cms-design">
<!-- Bandeau hero pleine largeur -->
<div class="row">
<div class="col-12">
<img src="/img/cms/banniere-hero.jpg"
class="img-fluid w-100"
alt="Promotion de saison"
loading="lazy" />
</div>
</div>
<!-- Trois offres côte à côte (desktop) → empilées (mobile) -->
<div class="row mt-3">
<div class="col-12 col-md-4 mb-3">
<a href="/categorie/offre-1">
<img src="/img/cms/offre-1.jpg"
class="img-fluid w-100"
alt="Offre numéro 1"
loading="lazy" />
</a>
</div>
<div class="col-12 col-md-4 mb-3">
<a href="/categorie/offre-2">
<img src="/img/cms/offre-2.jpg"
class="img-fluid w-100"
alt="Offre numéro 2"
loading="lazy" />
</a>
</div>
<div class="col-12 col-md-4 mb-3">
<a href="/categorie/offre-3">
<img src="/img/cms/offre-3.jpg"
class="img-fluid w-100"
alt="Offre numéro 3"
loading="lazy" />
</a>
</div>
</div>
</div>
Explication des classes utilisées
Classe Rôle `col-12` Pleine largeur sur mobile (< 768px) `col-md-4` Un tiers de la largeur à partir de 768px `img-fluid` L'image s'adapte à la largeur de son conteneur `w-100` Force l'image à occuper 100 % de la colonne `mb-3` Marge basse entre les blocs sur mobile `loading="lazy"` Chargement différé pour la performance Comportement responsive
Méthode de conversion pas à pas
Étape 1 : Analyser la maquette
Étape 2 : Exporter les images correctement
Étape 3 : Construire la grille
row et col-* de Bootstrap en vous basant sur la grille de 12 colonnes.Étape 4 : Ajouter le CSS personnalisé
/* Style pour les pages CMS avec design intégré */
.cms-design .row {
--bs-gutter-x: 0.5rem; /* Réduit l'espacement entre colonnes */
}
.cms-design img {
border-radius: 8px; /* Coins arrondis optionnels */
transition: transform 0.2s ease;
}
.cms-design a:hover img {
transform: scale(1.02); /* Léger zoom au survol */
}
Optimisations supplémentaires pour PrestaShop 8.x
Utiliser le format WebP
Exploiter le lazy loading natif
loading="lazy" est supporté par tous les navigateurs modernes. Ajoutez-le systématiquement sur les images situées en dessous de la ligne de flottaison.Désactiver la compression CCC pour le debug
Erreurs fréquentes à éviter
Questions fréquentes
Lire sur le blog
