Affichage mobile PrestaShop : comment corriger ou masquer un élément sur téléphone
Quand un élément casse l’affichage mobile de PrestaShop, le coupable habituel est une largeur fixe, un texte trop long ou les styles d’un module qui n’ont pas prévu d’écran étroit. Vous ajoutez la correction dans le fichier custom.css du thème enfant, dans une règle qui ne s’applique que sur téléphone. Ne masquez un élément que si les clients sur téléphone n’en ont vraiment pas besoin.
Auteur: L’équipe TellMyShop. Un guide pour les propriétaires de boutiques PrestaShop : la cause, la correction manuelle et le même travail dans une conversation avec le chat.
Dernière mise à jour: · 6 min de lecture
Pourquoi un élément s’affiche-t-il mal sur un téléphone ?
Une boutique PrestaShop n’a pas de version mobile séparée. Le même code se met en page autrement quand l’écran est étroit. Les problèmes commencent quand un élément ne peut pas rétrécir.
| Ce que vous voyez sur le téléphone | Cause la plus fréquente | Ce qui aide en général |
|---|---|---|
| la page défile sur le côté | un élément avec une largeur fixe en pixels, un large tableau dans une description | une largeur de 100 %, ou le défilement du seul tableau |
| le texte déborde de son cadre | un mot, une adresse ou un code long qui ne se coupe pas | la coupure des mots longs dans cet élément |
| les icônes de garantie occupent la moitié de l’écran | le module a de grandes icônes et trois colonnes sans règle pour téléphone | des icônes plus petites, une seule colonne, ou masquage sur téléphone |
| un bouton est recouvert | une fenêtre de chat, un bandeau de cookies ou une barre fixe | déplacer la fenêtre ou abaisser la barre |
| le titre du produit tient sur quatre lignes | une grande police de titre venue de la version ordinateur | une taille de titre plus petite sous une largeur choisie |
| une image est rognée ou étirée | une hauteur d’image fixe dans le CSS | une hauteur automatique |
Les éléments qui cassent le plus souvent sont ceux ajoutés après coup : modules tiers, blocs de texte collés depuis un éditeur, tableaux de tailles dans les descriptions des produits et barres d’annonce. Le thème lui-même est souvent correct.
Comment vérifier l’affichage mobile sans téléphone
Votre navigateur vous donne un aperçu rapide. Dans Chrome, ouvrez les outils de développement et activez la barre d’outils des appareils, comme l’explique le guide du mode appareil dans Chrome. Vous choisissez la largeur d’un téléphone courant et voyez tout de suite où la page se défait.
Le mode appareil est une approximation. Vérifiez toujours aussi sur un vrai téléphone, idéalement dans une fenêtre de navigation privée, pour ne pas regarder une ancienne version tirée du cache du navigateur.
Vérifiez dans l’ordre :
- La page d’accueil.
- Une catégorie avec des filtres.
- Une fiche produit avec un nom long et plusieurs variantes.
- Le panier et la première étape de la commande.
- Une page avec un tableau, comme un tableau des tailles.
Notez sur quelle page et à quelle largeur le problème apparaît. C’est la moitié de la correction.
Corriger ou masquer l’élément sur téléphone ?
Essayez d’abord de le corriger. Masquer est rapide, mais le client sur téléphone perd une information que le client sur ordinateur voit.
Masquer a du sens quand l’élément :
- répète une information déjà présente plus haut sur la page,
- est une décoration sans contenu,
- recouvre le bouton ou le prix et ne peut pas être facilement déplacé.
Ne masquez pas la description du produit, le prix, la disponibilité, le délai de livraison ni les informations sur les retours. C’est ce que les clients cherchent le plus sur un téléphone.
Où ajouter la correction CSS pour téléphone
Dans le fichier custom.css de votre thème enfant. Vous entourez les règles pour téléphone d’une media query, un bloc qui ne s’applique que sous une largeur d’écran choisie. Le guide de MDN sur les media queries explique comment cela fonctionne.
Le thème enfant compte pour une raison : une mise à jour du thème principal n’écrasera pas votre fichier. La documentation PrestaShop sur les thèmes enfants explique comment en construire un et y rattacher votre propre feuille de style. Nous expliquons pourquoi les modifications disparaissent après une mise à jour dans notre article sur une mise à jour du thème qui a effacé mes modifications.
Quelles sont les corrections pour téléphone les plus fréquentes ?
La plupart des problèmes d’affichage mobile se règlent avec une poignée de corrections récurrentes. Vous placez chacune dans le bloc pour écrans étroits, pour que la version ordinateur reste inchangée.
- Un large tableau dans une description de produit. Un tableau des tailles avec beaucoup de colonnes élargit la page. Au lieu de le comprimer, laissez seulement le tableau défiler sur le côté, pas toute la page.
- Les mots et adresses longs. Un code promo, une adresse e-mail ou un long nom de matière sans espaces déborde de son cadre. Une règle de coupure des mots longs dans ce seul élément suffit.
- Une fenêtre de chat sur le bouton Ajouter au panier. Les modules de chat ont souvent leur propre réglage de position sur téléphone. Vérifiez-le avant de commencer à écrire du CSS.
- Des titres trop grands. Un nom de produit sur quatre lignes repousse le prix hors du premier écran. Une taille de titre plus petite sur téléphone suffit en général.
- Trois colonnes d’icônes. Les blocs de garantie, de livraison et de retours rendent mieux sur téléphone en une seule colonne avec des icônes plus petites.
Corrigez une chose à la fois et vérifiez la page après chaque changement. Quand vous changez plusieurs règles à la fois, il est difficile de savoir laquelle a cassé quelque chose.
Que vérifier après la correction
Après l’enregistrement, videz le cache dans Paramètres avancés → Performances. Si vous ne voyez toujours pas le changement, suivez la liste de notre article sur les modifications qui ne s’affichent pas dans PrestaShop.
Comment corriger l’affichage mobile avec le chat
Vous décrivez ce qui ne va pas et sur quelle page. Vous pouvez coller une capture d’écran de votre téléphone dans la conversation. Votre chat (Claude ou ChatGPT) lit les fichiers du thème et le code de la page, détermine quelle classe gère l’élément et montre la règle avant l’enregistrement.
Vous: Sur téléphone, les icônes de garantie sous le bouton Ajouter au panier occupent la moitié de l’écran. Masque-les sous 768 px et réduis le titre du produit. Uniquement dans custom.css.
Votre chat: Les icônes viennent du module de réassurance, classe .blockreassurance_product. Le thème enfant a un fichier custom.css vide. J’ajoute :
Rien ne change sur ordinateur. Avant l’enregistrement, je ferai une copie du fichier, puis je viderai le cache.
Vous: Oui.
Votre chat: Enregistré. Sur la fiche produit, la règle ne s’applique que sous 768 px. Vérifiez-la aussi sur votre propre téléphone, dans une fenêtre de navigation privée.
Statut de la carte : attend votre « oui »ancienne version : (fichier vide)
nouvelle version : @media (max-width: 767px) {
nouvelle version : .blockreassurance_product { display: none; }
nouvelle version : .product-container h1 { font-size: 1.25rem; }
nouvelle version : }
Les tailles et les noms de classes de cet exemple sont donnés à titre d’illustration ; dans votre thème, ils peuvent être différents. Un exemple de demande se trouve dans le cas d’usage masquer ou corriger un élément sur téléphone.
TellMyShop Pro modifie les fichiers du thème une fois l’interrupteur Thème activé dans le panneau du module. L’interrupteur reste actif 24 heures et exige une sauvegarde de la base de données faite le même jour. Avant chaque enregistrement de fichier, une copie est faite, et la modification entre dans l’historique des modifications : vous pouvez donc annuler chaque modification par une seule demande. La version gratuite TellMyShop Free ne lit ni ne modifie les fichiers du thème ; elle aide avec les rapports de la boutique. Les versions sont comparées sur la page tarifs.
Questions et réponses
PrestaShop a-t-il une version mobile séparée de la boutique ?
Non. Le thème Classic et la plupart des thèmes récents sont responsives : la même boutique se met en page autrement sur un écran étroit. C’est pourquoi vous faites les corrections pour téléphone dans la même feuille de style, simplement à l’intérieur d’une règle qui s’applique sous une largeur d’écran choisie.
Masquer un élément sur téléphone nuit-il dans Google ?
Masquer une petite décoration ou une information répétée ne pose en général pas de problème. Faites attention au contenu qui compte pour les clients et pour Google, comme la description du produit ou le prix. Google juge une boutique surtout sur sa version pour téléphone : le contenu important doit donc y rester.
Comment vérifier l’affichage mobile sans téléphone ?
Ouvrez la boutique dans Chrome, ouvrez les outils de développement et activez le mode appareil. Vous voyez la page à la largeur d’un téléphone et pouvez changer la taille de l’écran. C’est une bonne approximation, mais faites le test final sur un vrai téléphone.
Pourquoi mes corrections pour téléphone ont-elles disparu après une mise à jour du thème ?
Parce qu’elles étaient écrites dans un fichier du thème que la mise à jour a écrasé, comme theme.css. Gardez vos propres styles dans le fichier custom.css du thème enfant. Ce fichier n’est pas écrasé quand le thème principal est mis à jour.
Le chat peut-il voir à quoi ressemble ma boutique sur un téléphone ?
Il ne regarde pas un écran de téléphone. Il lit les fichiers du thème et le code de la page, et vous décrivez le problème ou collez une capture d’écran dans la conversation. À partir de là, le chat détermine quelle règle changer et vous la montre avant l’enregistrement.
PrestaShop est une marque déposée de PrestaShop SA. Claude est une marque d’Anthropic PBC. ChatGPT et OpenAI sont des marques d’OpenAI. TellMyShop n’est pas affilié à ces entreprises.