Comme on le sait tous, les mobiles et les tablettes sont fréquemment utilisées par vos clients… Il est donc important que votre boutique Prestashop s’affiche au mieux sur tous les supports (cela peut se gérer directement via le CSS).
Mon thème est déjà responsive !
Voilà une phrase qui revient très souvent des clients, « Mon thème est reponsive et il marche très bien ». En fait trop souvent on fait confiance à la structure technique du thème et pourtant il ne faut ne pas oublier de « TESTER » son thème sur mobile et tablette, car il y a bien souvent des éléments à ajuster.
Les Media Queries en CSS
En fait les Media Queries permettent de définir les règles plus précisément en fonction des différents types de supports. Sur le principe on va demander au fichier CSS d’exécuter des règles sur la base d’une largeur spécifique indiquée en pixels. Il faut donc créer plusieurs sections de règles en code CSS pour gérer séparément le format ordinateur, tablette et smartphone.
Quoi optimiser ?
En fait le plus important est d’être objectif quand on navigue sur son propre shop, il y’a parfois des éléments qu’il faudrait masquer sur les supports du type smartphone ou par exemple ajuster des tailles de polices ou largeur des éléments. Dans un précédent tutoriel on avait par exemple vu comment mieux présenter les produits sur mobile. Si votre shop semble irréprochable demandez à un ami d’aller sur votre boutique et regardez comment il navigue… soyez attentifs aux problèmes d’ergonomie qu’il rencontre.
Révisez chaque page type
L’optimisation d’une boutique et ses différentes pages demandera du temps, pour y parvenir je conseille d’y aller de manière progressive. Par exemple, en définissant un objectif hebdomadaire, afin que le rendu général de votre shop puisse s’améliorer au fil des semaines. N’essayez pas de faire tout en 1 jour, car sinon c’est l’overdose… et cela demande de la patience de mettre ces règles en place et de les tester.
- la semaine 1 : optimiser la page d’accueil
- la semaine 2 : optimiser les catégories,
- la semaine 3 : optimiser la fiche produit
- la semaine 4 : optimiser le processus de commande
- etc…
Regardez dans Google Analytics le trafic mobile
C’est certainement là le plus important « le trafic sur mobile »… regardez dans votre console Google Analytics le trafic que cela représente sur votre shop. Si vous avez 50% et +, de trafic smartphone et que votre boutique semble négligée sur ce support, vous aurez de la peine à convertir en commandes. Pour commencer une optimisation intelligente, je recommande d’utiliser la méthode DESAKTIVTOUT qui va déjà réduire une charge de votre travail. Le mobile ça devient la source de trafic n°1… alors il faut absolument soigner ce canal.
Pour ce tutoriel vous aurez à disposition :
- 1 x fichier « custom.css » avec les règles de base Media Queries
Résumé de la vidéo : améliorer l’ergonomie Prestashop sur mobile, tablette et ordinateur via CSS
-
- Utilisation de la console Google Chrome pour tester les différentes résolutions et voir les différents types de supports.
- Les Media Queries aident à améliorer le rendu de votre boutique, il est conseillé de les intégrer en fin de fichier « custom.css » afin qu’elles aient la priorité sur les règles CSS précédentes.
- Ordonnancement de la feuille de style pour les différents supports avec découpage des résolutions et application d’un fond de couleur pour le contrôle de la règle.
- Il est important que les règles CSS ne se chevauchent pas afin d’éviter les conflits. En utilisant 1 pixel d’écart cela permet de palier à cette problématique.
- Ne mettez pas en place des règles génériques, soyez précis sur chacune de vos règles afin de ne pas déformer le shop sur une autre page.
Bonjour,
avant tout, je voudrais vous remercier pour le travail que vous faite et l’aide que vous apportez au jeune padawan que nous sommes.
j’ai suivi pas mal de vos tutoriels mais il y a un bug que je n’arrive pas a résoudre et qui touche je penses beaucoup de personnes mais je n’ai trouvé aucun forum la dessus. Vous faites les test d’affichage sur google (pour mobile et tablette), et effectivement cela fonctionne, mais quand on fait le test sur le matériel en réel il y un bug d’affichage sur les tablette et certain mobile. Tous les produit sont affiché sur 1 seule ligne.
J’ai longtemps cru que c’était mon site mais en prenant la tablette et en allant sur prestashop demo c’est pareil. (test et bug trouvé avec ipad et iphone 4, fonctionne sur iphone 7…) sur iphone 4 ca me pose pas vraiment probleme mais un peu plus sur tablette. Et c’est je pense que c’est la raison pour laquelle google search console me trouve comme erreur : Contenu plus large que l’écran.
Y a t’il une solution pour ca?
mon site est monster-pieces.com
Bonjour,
Sur quelle page cela fait le problème ? Je viens de faire un test et cela semble correct… à tester aussi avec la gestion des caches « totalement » désactivé (compression JS / CSS). Par contre, il est vrai qu’il y’a des différences parfois entre le support « réel » et la simulation et c’est pas toujours évident à trouver la cause.
A bientôt !
Bonjour,
excusez moi pour la réponse tardive. Je n’avais pas vu que vous aviez répondu.
Le probleme est sur toutes les pages. Cela fonctionne très bien en simulation. Mais sur un support réel ça coince. J’ai déjà essayé en désactivant les caches et même chose..
Je n’ai plus d’idées et personne n’en parle nul part c’est étonnant quand même.. Et ce n’est pas comme si j’avais pris un thème c’est celui de base..
Auriez vous d’autres pistes pour que je puisse creuser dans ce sens?
Bonjour,
Ce que j’essaierai de faire c’est de re-télécharger une version complète de Prestashop et de mettre juste le dossier thème original à la place pour voir si cela provoque une différence (afin de voir si c’est les changements ajoutés qui causent problèmes).
A bientôt !
Bonjour,
Merci pour votre travail complet!
Selon moi, il faut énormément insister sur le fait que le trafic mobile devient la source de trafic numéro 1 donc il est primordial de travailler sérieusement sur l’affichage du site en responsive !
A bientôt !
Bonjour Germain,
j’ai trouvé la vidéo excellente comme très souvent 😉
Néanmoins sur ta vidéo j’ai bien suivi les règles custom.ccs pour les mobiles, la modification des prix, taille et couleurs, ça fonctionne pas de soucis.
Mais cela ne modifie pas les : « Prix soldés Barrés » sur les fiches produits soldés. Lorsque je vais dans inspecter l’élément de la fiche produit soldé dans le navigateur « Product-discount » puis « regular-price » je peux changer la couleur et la taille, mais je ne trouve pas la règle pour les changer dans le thème. J’ai pourtant bien suivi tes infos ainsi que la règle que tu as donné.
Après Plusieurs essais, je ne trouve pas la règle pour changer la couleur ainsi que son font-size du regular-price dans product-discount.
As-tu une règle pour ça ?
Est ce que cela se change toujours dans le custom.css?
N’étant pas codeur, encore moins développeur… en te suivant je fais parfois des miracles sur mon thème.
Merci pour ta réponse 😉
Joss
Hello,
La 1ère étape c’est de modifier le fichier « theme.css » en l’unminifiant : https://www.webbax.ch/2017/03/27/prestashop-1-7-modifier-css-ep-16/ ensuite il est plus facile de localiser la zone à modifier. Sinon tu peux essayer de rajouter en CSS « !important » après la règle pour forcer le comportement.
A bientôt !
Bonsoir
Je suis tombé par hasard sous votre vidéo et oh merveilleux !
J’ai un soucis sur l’affichage mobile , je suis vos conseils pas a pas mais je n’ai pas le dossier modif ds css du thème , je peux créer un nouveau dossier , sera-t-il pris en compte ?
Je vous remercie d’avance de votre retour et merci pour cette vidéo !
Bonjour,
Pour l’optimisation du thème, normalement vous pouvez ajouter les règles dans le fichier « custom.css », si vous n’avez pas ce fichier avec votre thème personnalisé… vous pouvez toujours ajouter les règles à la suite du fichier principal (ex. theme.css).
A bientôt !
je pense que même si on cache avec un display:none quelque block, le code des ces derniers se charge toujours, du coup, réellement, le poids de la page reste le même. l’idéal c’est qu’on peut mettre en place un système qui dés le départ , sur le mobile, ne charge pas les blocks en question.
j’ai utilisé un bout de code :
{if Context::getContext()->getDevice() > 1}votre code {/if}
1 c’est pour les ordinateur, mais le cache fausse toujours le résultat.
un autre exemple que je trouve lors en terme de nombre de lien sur la page d’accueil, c’est le menu avec en display : none, le menu du mobile, qui, en général regroupe tous les lien qui figure sur le grand menu de la version ordinateur. c’est lourd sur une seule page.
Bonjour,
Vous avez tout à fait raison, le display:none n’est pas forcément une finalité en soi.
Voici 2 tutoriels Prestashop (l’un pour compacter la taille du Prestashop et l’autre avec la méthode DESAKTIVTOU) :
https://www.webbax.ch/2018/07/05/prestashop-1-7-seo-boutique-rapide-ep-15/
https://www.webbax.ch/2018/04/12/prestashop-1-7-methode-desaktivtou-ep-50/
A bientôt !
j’ai vu vos deux liens. bon ça ne résolue pas le problème du poids et des blocs et liens inutiles qui sont affichés ou générés par le navigateur même s’ils portent un display : none.
l’idéal c’est que la version mobile soit minimaliste. soit on intègre une version amp que google a lancé, soit créer , comme la version 1.5 ou 1.4 de prestashop ( j’ai oublié) , un dossier spécial pour un template mobile.
je sais qu’actuellement les version des template sont responsive, mais là le but est de supprimer les blocs qui sont en display : none sur le mobile ( un code allégé ).
Avez vous une idée sur la création d’un template pour le mobile pour la 1.6 et la 1.7 ?
Bonjour,
Peut-être qu’il serait préférable de regarder un template optimisé pour le SEO et qui soit rapide… Essayez de regarder du côté de https://www.seo-presta.com/ (faire une version dédié mobile demande trop de temps / entretien, je conseille d’utiliser le responsive).
A bientôt !
Bjr,
Sur mon site en mode pc , j’ai bien mes deux boutons pour mes réseaux sociaux tout en haut à gauche
Mais quand je passe en dessous de je pense 786px ceux-ci disparaissent. J’aimerais qu’ils apparaissent à partir de 400px,
J’ai essayé avec @media …. mais rien ne change. Par contre je vois dans le code des syntaxe style ..sm.. qui apparement font leur office quand on est sur mobile…une idée pour moi ??
Bonjour, je suis vos vidéos depuis quelques mois et elles sont très intéressantes
J’avais une question à vous car j’ai cherché sur internet et j’ai pas pu trouvé de réponse.
J’ai site fait avec prestashop, et je souhaite ajouter d’autres pages avec un design assez joli avec des blocs (du moins c’est pas un design basique). Et dans la section d’insertion du code dans prestashop quand je mets le code il marche par contreje n’arrive pas à modifier le responsive. Donc sur tablette et smartphone l’affiche du contenu de ces pages est horrible.
Je voulais savoir comment je pourrais procéder pour appliquer le responsive s’il vous plaît.
Bonne journée !
Bonjour!
Je visionne vos posts et vos vidéo. Je trouve cela sympa ca permet d’arranger certaines choses mais concernant les personnalisation j’ai un soucis et concernant la mise en page je souhaiterais obtenir la mise en page bureau sur mobile car le menu a gauche reste fixe et a chaque fois que je clique sur une categorie cela change et montre les sous catégories alors que sur la version mobile et tablette cela montre tout meme les catégories parentes j’aimerais donc savoir comment faire pour obtenir la version bureau sur mobile seriez vous me dire comment je peux faire? en plus la mon menu a gauche ne montre plus rien c’est dommage.
Cordialemment Bruno
Toujours de bonnes idées pour améliorer nos boutiques. Merci à webbax!