Zalando, les catégories sur mobile

Prestashop 1.7 – Imitation des catégories Zalando sur mobile (ép. 39)

Vous savez comme moi que le trafic mobile est devenu très important, alors mieux vaut ne pas décevoir ses acheteurs. J’ai décidé de vous proposer une méthode toute simple pour augmenter la pertinence de navigation sur mobile.

Faire du mieux qu’on peut sur smartphone

Quand je dis à mes clients qu’il faut optimiser la version mobile, bien souvent c’est plus facile à dire qu’à faire… car optimiser une version mobile d’un site e-commerce Prestashop, peut demander beaucoup de temps. Alors, je préconise des méthodes d’efficacité qui font 80% du travail… mais qui sont appliquées très rapidement. L’une des erreurs de Prestashop en terme d’ergonomie c’est de proposer un affichage mono-colonne de produits.

Pourquoi c’est pas bien ? En fait sur le plan pratique deux colonnes c’est tout à fait jouable et ça permet de montrer plus de produit sur la surface affichable et ça permet de diminuer le scrolling vertical. Cela peut sembler un détail, mais vos clients pourront parcourir votre catalogue deux fois plus vite. Chez les e-commerces rentables (qui optimisent leur version mobile), j’ai souvent observé cette tendance de la double colonne sur smartphone et c’est pour ça que je la conseille vivement.

En fin de tutoriel je vous explique aussi la méthode ultime pour mobile, pour cacher rapidement des éléments. En fait sur tous les éléments qui vous semblent superflus, il faut ajouter des règle dans votre fichier CSS pour les masquer. Ne montrez pas 36 fonctionnalité à vos clients sur mobile, on veut pouvoir aller rapidement à l’essentiel et passer commande.

Ressources

Pour ce tutoriel vous aurez à disposition :

  • Le fichier custom.css avec les règles pour optimiser l’affichage des catégories sur smartphone (Iphones et smartphones avec une résolution de 320).

Télécharger

Résumé de la vidéo : des listes de produits compactes dans votre Prestashop

  • Observons ensemble comment fait Zalando sur mobile et regardons aussi comment Prestashop le fait sur le template par défaut.
  • Il faut noter aussi le point positif, c’est qu’actuellement il n’y a plus ces boutons ajouter au panier et voir le produit dans les listings d’articles. C’est un bon point pour l’ergonomie et le référencement.
  • Intégration des règles CSS, quelques lignes seulement suffisent à obtenir un résultat plus pertinent sur les supports mobiles.
  • Parfois il peut y avoir la nécessité de mettre des règles spécifiques dédiées aux toutes petites résolutions (320px de largeur).
  • Enfin, ne négligez jamais l’interface, mobile… pensez à utiliser la règle CSS display:none, pour aérer l’ergonomie de votre boutique.

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (6 votes, moyenne : 5,00 sur 5)
Loading...

14 commentaires sur “Prestashop 1.7 – Imitation des catégories Zalando sur mobile (ép. 39)”

  1. Hello,
    Bonne astuce et j’ai aussi souvent besoin d’afficher 2 produits par ligne sur mobile car on en voit plus en scrollant 2 fois moins. Il y a d’autres optimisations comme la colonne de gauche qui apparait en slide et non au-dessus des produits. J’ai publié un tuto assez similaire avec une grille dynamique pour ne pas s’embêter : https://www.arnaud-merigeau.fr/prestashop-1-7-comment-afficher-la-liste-produits-avec-une-grille-responsive/
    Bref, il faut bosser son affichage mobile, ça c’est certain !
    ++

    1. Hello,

      Effectivement la colonne de gauche sur mobile c’est quelque chose qui devrait être systématiquement désactivé déjà lors du déploiement de Prestashop. Avec la configuration standard on a à tous les coups une page à rallonge non-pertinent sur mobile avec les produits tout en fin de page (pas très logique).

      Merci d’avoir fait référence à ton tutoriel, cette alternative plaira certainement aux lecteurs.

      A bientôt !

  2. Hello Germain,

    Comme toujours, une vidéo intéressante et facile à mettre en place.
    Petit à petit, au fur et à mesure de vos vidéos, le custom.css s’enrichit !

    Merci donc encore pour cette dynamique !

    Bien cordialement.

    1. Hello,

      Effectivement je ne le vois pas forcément de mon côté, car je démarre régulièrement à zéro sur une base propre… mais il doit commencer à y avoir pas mal de règles. J’espère que ça ne devient pas trop le Capharnaüm ahah !

      A bientôt !

  3. super comme toutes tes vidéos, un grand merci pour le temps que tu passe à faire les vidéos et à les partager.
    j’ai hésite à me lancer dans ce projet de la création d’un site marchand avec prestashop tout seul et grâce à toi je suis en train de le faire. merci .

  4. J’ai pas eu le temps de finir la vidéo, mais question peut être bidon, l’astuce est elle applicable sur 1.6 tel quel? Et comment on fait avaler à PS les custom.css? BOn j’en demande peut être un peu trop =) Merci

    1. Hello,

      Le tutoriel est valable pour Prestashop 1.7, pour la version 1.6 les règles à appliquer sont différentes, car la structure n’est pas la même.

      A bientôt !

  5. Hello Germain
    Super intéressant et accessible, comme toujours, merci.
    Serait il possible d’avoir la même chose pour PS1.6 ou faut il migrer vers 1.7 ?
    et merci encore pour tes tutos

    1. Hello,

      Sous Prestashop 1.6 on peut faire le même genre de patch, mais les règles CSS sont différentes. Si tu cherches à faire ça sous Prestashop 1.6, le mieux est de demander à un intégrateur CSS de coder quelques règles dans le global.css.

      A bientôt !

  6. Bonjour,

    J’était en train d’appliquer ton code et je me suis rendu compte qu’avec par exemple un iphone 7, lorsque l’on fait la rotation de l’écran on se retrouve de nouveau avec un seul produit (zalando 3) et pour un ipad on en a 2 avec un grand blanc a droite au lieu de 3.
    penses tu qu’il soit possible de faire la meme chose et comment?

    Encore une fois merci pour tes partages précieux pour beaucoup d’entre nous!

    1. Hello,

      Dans ce cas, je pense qu’il faudrait ajouter des nouvelles règles CSS de principe avec la résolution concernée. Il faudrait prendre la même logique que les règles existantes ou augmenter le max-width:600px de la règle principale afin de l’appliquer à des supports plus grands.

      A bientôt !

  7. Bonjour,

    Je suis en train de préparer un site sous Prestashop, j’ai regarder pleins de vidéos sur youtube, et je suis tombé sur les votres …. BRAVO, Bravo, tout est très clair, bien expliqué, avec de vraies bonnes astuces très pratiques, et simples à mettre en oeuvre.
    Un grand merci pour votre aide, car cela demande beaucoup de temps de travail pour faire toutes ces vidéos.

    1. Bonjour,

      Cela me fait très plaisir d’avoir ce retour positif, heureux de savoir que cela puisse vous aider.

      Bonne continuation dans l’avancement de votre boutique Prestashop !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *