Disponible pour missions & renforts d’agence · Réponse rapide, par la personne qui intervient

Bugs d’affichage CSS ou responsive après une modification de thème PrestaShop

Un menu qui se casse sur mobile, un CSS modifié qui semble « ignoré » après un changement de thème : dans la grande majorité des cas, le fichier n’est pas ignoré, il est simplement mis en cache. PrestaShop combine et met en cache les fichiers CSS et JS par défaut, et continue de servir l’ancienne version tant que ce cache n’est pas vidé.

Décrire mon problème Discuter sur WhatsApp

Le cache CCC, cause la plus fréquente et la plus mal comprise

PrestaShop propose une fonctionnalité native de combinaison, compression et cache des fichiers CSS et JS, réglable dans Préférences > Performances. Elle regroupe plusieurs fichiers en un seul pour accélérer le chargement, puis garde ce fichier combiné en cache. Après une modification de CSS, si ce cache n’est pas vidé, le site continue d’afficher l’ancienne version combinée : le CSS « semble ignoré » alors qu’il a bien été modifié sur le disque.

Autre cause fréquente : un fichier CSS ajouté directement dans les fichiers du thème plutôt que dans un module ou une surcharge propre. Cette modification directe est écrasée sans avertissement à la prochaine mise à jour du thème, ce qui donne l’impression qu’un bug est réapparu.

Un changement de grille entre les versions PrestaShop

La structure des grilles CSS change fortement entre PrestaShop 1.6, dont le thème par défaut est basé sur Bootstrap 3 (classes col-xs-12, img-responsive, pull-right), et PrestaShop 1.7/8, dont le thème Classic est basé sur Bootstrap 4 (classes col-12, img-fluid, float-right). Copier une classe CSS trouvée dans un tutoriel écrit pour l’une des deux versions et l’appliquer sur l’autre casse généralement la mise en page, en particulier sur mobile.

Configuration ou développement ?

Vider le cache CCC et vérifier qu’on modifie bien le bon fichier CSS, au bon endroit, suffit à résoudre la majorité des cas. Ça devient du développement quand il faut reprendre proprement une adaptation faite en modification directe du thème, la transformer en surcharge propre qui survit aux mises à jour, ou corriger une grille pensée pour une autre version de Bootstrap.

Pages liées

Décrivez votre besoin en 1 minute

Quelques questions ciblées pour que je vous réponde avec une estimation, pas avec un questionnaire de plus.

Quelle version de PrestaShop ?
Sur quoi avez-vous besoin d’aide ?
Quel est l’état actuel de la boutique ?
Le thème est-il un thème du marché ou sur mesure ? (facultatif)

Un thème très modifié change la façon d’intervenir sans rien casser.

Indiquez au moins un e-mail ou un téléphone pour que je puisse vous répondre.

Indiquez au moins un e-mail ou un téléphone pour que je puisse vous répondre.

Questions fréquentes

J’ai modifié mon CSS mais rien ne change sur le site, pourquoi ?
Vérifiez d’abord si le cache CCC (Préférences > Performances) est activé. Si oui, il faut le vider ou désactiver temporairement la combinaison de fichiers pour voir la modification prendre effet immédiatement.
Pourquoi ma modification a disparu après une mise à jour du thème ?
Parce qu’elle a probablement été faite directement dans les fichiers du thème, qui sont remplacés lors d’une mise à jour. Une modification pérenne doit passer par un module ou une surcharge dédiée, pas par le fichier du thème lui-même.
Un tutoriel trouvé en ligne ne fonctionne pas sur ma version de PrestaShop, pourquoi ?
Vérifiez la version PrestaShop visée par le tutoriel. Les classes CSS de grille ne sont pas les mêmes entre PrestaShop 1.6 (Bootstrap 3) et 1.7/8 (Bootstrap 4), et les mélanger casse la mise en page.
Le menu principal se casse uniquement sur mobile, est-ce lié au cache ?
Ça peut l’être, mais c’est aussi souvent un conflit JavaScript entre le script du thème et un module ajouté après coup. Les deux causes se diagnostiquent différemment, d’où l’intérêt de tester d’abord sans cache.
Faut-il un développeur pour corriger un bug d’affichage après un changement de thème ?
Pas systématiquement : vider le cache et vérifier le bon fichier suffit souvent. Un développement est nécessaire pour reprendre proprement une modification directe du thème ou adapter une grille à la bonne version de Bootstrap.