Prestashop design

Karl Lagerfeld vient relooker votre Prestashop (ép. 94)

Est-ce que vous avez déjà remarqué que l’on fonctionne beaucoup « par habitude » ? On se calque souvent sur les méthodes appliquées par d’autres site e-commerce, sans se reposer les bonnes questions et c’est bien ça le problème… Utilisons les conseils avisés de Karl !

Se plier aux standards sans réfléchir

Voilà un des nouveaux problèmes du web… on a tendance à faire comme les autres « puisque tout le monde le fait » alors ça doit être bien. Par exemple beaucoup de sites e-commerce présentent sur leurs interfaces les mêmes fonctionnalités, les mêmes boutons, les mêmes menus… Mais a-t-on vraiment besoin de surcharger Prestashop pour réussir à vendre ?

Ce n’est pas le nombre de fonctionnalités de votre shop qui fait vendre

Votre objectif en tant qu’e-commerçant est simple « VENDRE ». Pour cela il faut que le cerveau de vos clients puisse être concentré à son maximum, cela implique donc de limiter les sources de distractions. Moins il y aura d’éléments à l’écran, plus son attention pourra être canalisée. Trop de choix « TUE » le choix, c’est pour cela qu’il faut simplifier l’interface jusqu’au moindre détail.

Le soucis du détail ? C’est du Bullshit

Oui, moi aussi je disais ça avant… mais plus j’avance et je me rends compte que l’e-commerce est en train de tourner dans l’autre sens. Les éditeurs de solutions e-commerce et les créateurs de thèmes, veulent aussi « VENDRE »… Leur méthode c’est d’en proposer toujours plus, alors que le futur à mon sens c’est de proposer moins de fonctions, fluidifier les interfaces et que l’expérience mobile soit au top (en 2020 c’est loin d’être le cas).

Je fais souvent du « DISPLAYNONEIMPORTANT »

Et oui comme vous l’entendrez dans la vidéo c’est un dicton pour moi, j’adore masquer les éléments des interfaces (je vous conseille aussi de tester la méthode DESAKTIVTOU… Parce que je me rends bien compte qu’il faut revenir à l’essentiel. Les sites e-commerce incluant trop d’options et de possibilités dans leurs interfaces, sont souvent bugguées / déformés. Afficher un minimum de choses à l’écran permet de diminuer aussi grandement le travail d’optimisation de l’interface et ça c’est super important pour votre budget.

Une PME TPE ne peut pas égaler un gros site e-commerce alors…

Bien souvent je vois des demandes de clients, qui veulent égaler de gros sites leader sur leur marché… Il faut être réaliste, en terme d’expérience client leur site ne peut pas rivaliser avec les leader… Vous savez pourquoi ? Parce qu’ils essaient des les imiter avec 36’000 fonctions (qui marchent à moitié)… Alors que la bonne stratégie serait de se dire, on se concentre sur l’essentiel, on fait au plus simple… mais ce qu’on fait on le fait bien. « Qui a des photos & des descriptions uniques pour ses produits ? Levez la main ! »…. Ahaha…

Pour ce tutoriel Prestashop vous avez à disposition :

  • 1 x exemple pour illustrer le cas (custom.css)

Télécharger

Résumé de la vidéo : Comme Karl, analysez chaque détail de la boutique Prestashop pour qu’elle soit au TOP

  • Pour commencer je vous montre la méthodologie à adopter, on regarde une page et on se dit « qu’est-ce qui est inutile ici ? ».
  • Ensuite, on va prendre différents emplacement, comme par exemple le footer, la page des catégories, la fiche produit ou encore le processus de commande et masquer les éléments qui sont inutiles.
  • La règles CSS « display:none » permet d’accomplir de vrai miracles, car elle peut vraiment épurer l’interface rapidement sans contraintes techniques de mise en oeuvre.
  • Masquer des éléments ne veut pas dire « faire moins bien »… au contraire, c’est de déterminer ce qui est important ou non pour vos acheteurs, afin d’améliorer leur expérience d’achat sur votre shop.

4 commentaires sur “Karl Lagerfeld vient relooker votre Prestashop (ép. 94)”

  1. Je dois te dire MERCI car n’étant pas professionnel j’étais en train de galérer pour supprimer le bloc newsletter en page d’accueil sur mon thème (qui n’est pas d’origine) car j’étais constamment spammé via ce bloc. Alors tu as raison car le bloc newsletter en page d’accueil ? ça sert à quoi ? À pas à grand-chose je te l’accorde. Non mais qui va volontairement mettre son email sur un site e-commerce !
    À part peut-être se faire spammer pour nous petits e-commerçants hahhaa!
    Heureusement que tu es là j’ai économisé une prestation, ce n’est pas mal j’ai gagné ma journée.
    Bonne journée et encore merci pour tes vidéos
    Sébastien

    1. Hello,

      Oui trop souvent on a une multitude de blocs sur sa boutique Prestashop qui ne servent à rien, on les laisse par habitude. Cette manière de faire est très basique, mais elle permet d’intervenir rapidement sur une multitude d’éléments.

      A bientôt !

  2. Je plussois cette idée de thème plus minimalistes, elle n’a que des avantages.

    MAIS, j’aimerais insister sur un point…

    -> Masquer un élément ou module par le CSS ne doit-être QUE provisoire et ne servir qu’au prototypage !

    Une fois qu’on a un aperçu de ce qu’on désire :
    • On désactive/supprimer les modules inutiles.
    • On désactive les options inutiles.
    • On supprime ce qu’on a désactivé avec le CSS dans les fichiers TPL (avec un thème enfant ou un copie du thème) (et on vite tous ces display inutiles dans le CSS).

    La raison est simple, un site qui conserve du code inutile est un site qui sera plus lourd, plus long à chargé, moins fluide, bouffera plus de bande passante et de puissance serveur, avec un indexation sur les moteurs de recherche moindre et moins sécurisé !

    PS : Révise un peu le ciblage CSS, il y a mieux que cibler une classe bootstrap pour masquer un truc.

    1. Bonjour,

      Vous avez tout à fait raison, la bonne méthode c’est prioritairement de désactiver les modules concernés afin de préserver les ressources du serveur & améliorer le temps de chargement.

      Cette approche permet d’avoir un « Proof of concept » rapidement exploitable pour démarrer… (mais qu’il faudra réviser à long terme).

      Merci pour ces conseils.

      A bientôt !

Laisser un commentaire

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