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 !