Ecommerce design Prestashop

Prestashop 1.7 – Révolution avec cinq lignes de code CSS (ép. 73)

Les internautes naviguent rapidement sur de multiples sites e-commerce jusqu’à tomber enfin sur le vôtre… mais comment provoquer un petit effet de surprise sympa… sans forcément tout chambouler ? C’est ce que nous allons voir ensemble.

Avoir un site e-commerce standard ?

Pour ou contre avoir un site e-commerce basique et proche du standard ? Personnellement je suis à 100% pour du basique, car c’est rarement le design d’une boutique qui fait vendre. C’est aussi pour cela que je recommande aux e-commerçants débutants, d’utiliser directement le thème de base (moins de bugs, compatible totalement avec les modules natifs). Le problème c’est que parfois le standard c’est quand même un peu terne et il faut ajouter une petite étincelle.

Différencier son design, sans tout chambouler

C’est certainement là qu’il faut faire attention… il faut éviter de commencer à déplacer des modules à des emplacements non prévus ou réaliser des changements un peu « exotiques » pour copier un autre site… alors que celui-ci n’utilise pas forcément Prestashop et n’a pas les mêmes contraintes techniques. C’est là que le CSS3 peut vraiment vous aider à donner un coup de fraîcheur à votre site e-commerce, sans pour autant modifier le mécanisme de base de la boutique.

Les effets grâce à CSS3

Grâce à la nouvelle génération CSS3 il est possible d’intégrer des effets, sur les blocs… images, boutons de votre site e-commerce. L’un des gros avantages c’est que cela ne demande pas de mettre en oeuvre des centaines de règles… vous pouvez facilement en une ligne… intégrer, un ombrage… une rotation, une transition et cela est reconnu par tous les navigateurs du moment. C’est pour cela qu’il est intéressant de se limiter à des fonctions CSS3 connues, simples… mais diaboliquement efficaces (comme toujours).

La simplicité avant tout

Léonard de Vinci l’a dit « La simplicité est la sophistication suprême »… et je dois dire que je suis assez d’accord avec ça. Dans ma philosophie, le but est d’obtenir le maximum de différenciation, avec le plus d’efficacité… mais surtout avec le moins de code possible. Quand je recherche des effets CSS sur le web, j’évite au maximum les intégrations qui demandent l’injection de multiples fichiers / librairies. Si on peut utiliser les effets natifs qui reposent sur des fondamentaux… c’est plus facile à intégrer et à maintenir… et bien sûr moins de bugs.

Résister à l’excès d’effets CSS

Quand on découvre un nouvel effet, forcément on a envie de l’utiliser partout… mais ce n’est pas une bonne idée en terme d’expérience utilisateur. C’est pour cela qu’il faut définir des emplacements stratégiques (comme le bouton ajouter au panier qui stimule le coeur de vos clients). On en revient aussi à l’art du design et l’importance de créer une charte graphique globale « cohérente » (pas toujours facile je l’avoue). Essayez dans la mesure du possible de garder une uniformité dans le choix de vos couleurs et inspirez vous de grands noms du e-commerce pour le choix des couleurs / harmonie.

Pour ce tutoriel vous avez à disposition :

  • 1 x fichier « custom.css » (avec les règles CSS3)

Télécharger

Résumé de la vidéo : Différenciez votre design Prestashop grâce au CSS3

  • Intégration des règles CSS3 sur le listing des produits et comparaison avant / après, pour tirer un 1er bilan sur la perception générale.
  • Application de l’effet d’arrondi sur l’image de la fiche produit Prestashop.
  • Tester le code CSS en modifiant certaines valeurs, le plus important est donc de trouver le bon équilibre, sans que l’effet soit « brutal ».
  • Comment trouver des idées CSS à intégrer sur votre shop ?
  • Inspirez-vous de cette méthode minimaliste (produire un grand changement avec peu). La simplicité de mise en oeuvre est une clé vers le succès !

13 commentaires sur “Prestashop 1.7 – Révolution avec cinq lignes de code CSS (ép. 73)”

  1. Merci pour ce super tuto…j’ai testé sur ma boutique mais je suis en 1.6.1.17.
    Je ne sais pas trop comment faire…est-ce que c’est compatible ? Si oui, dans quel fichier css mettre ces lignes ?

    Bravo, je ne manque aucun de tes tutos 🙂

    1. Yes super tuto, fidèle lecteur aussi.
      Je suis sous1.6.1.23 je vais essayer d’appliquer quelques motifs, je pense qu’il faut changer les réglages du cache afin de voir quel fichier CSS est impacté …

      1. J’ai modifié le global.css pour voir avec dans Paramètres avancés -> Performances j’ai vidé le cache et mis sur Forcer la compilation à chaque appel au cas où….mais aucun changement 🙁
        Si tu as la solution, ce serait cool de partager 😉

          1. J’ai bien regardé, en fait je pense que ce n’est pas dans global.css qu’il faudrait modifier quelque chose mais plutôt dans product.css et product_list.css mais je ne vois pas trop quoi mettre et où le mettre (peut-être même category.css). Un peu perdu 🙁

      2. Bonjour,

        Pour la version 1.6, il faut en principe ajouter les règles à la fin du fichier « global.css » du thème… par contre il faudra modifier un peu les règles pour les appliquer aux bons éléments.

        A bientôt !

  2. Salut !
    Et paf ! 5 étoiles.
    Sympa ce tuto, et super fastoche … je l’ai adopté, mais sans mettre de délimiteur. Une grande partie de mes photos étaient en png avec effet de transparence, ça faisait vraiment épuré, peut être trop d’ailleurs, j’ai donc repassé mes images en jpg pour avoir un fond blanc. Pas mal de taf mais le site est plus cool.

  3. Bonjour,
    J’ai testé votre code pour les images. Cela fonctionne mais lorsque je clique sur un produit, l’image est bien ronde mais le hover dépasse de l’image lorsque je passe la souris 🤔
    Auriez-vous une explication ?
    Merci vos tutos sont géniaux !

Laisser un commentaire

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