Pour avoir un beau template Prestashop, pas forcément nécessaire d’acheter un template premium, vous pouvez tout à fait partir du thème de base et ajuster seulement quelques règles de vos fichiers CSS afin de le rendre plus convivial.
La simplicité d’un design c’est la clé
Actuellement il faut essayer de se plier aux standards et se baser sur des modèles de templates qui ont fait leurs preuves. Par exemple si on prend le cas de Zalando, leur site utilise la prédominance blanc ce qui est vraiment passe-partout en terme de design et du coup laisse vraiment aux images exprimer leur total potentiel. L’oeil du visiteur sera donc attiré par le contenu de la boutique plutôt que ce qui l’entoure et ça c’est une très bonne chose (focaliser l’attention sur le plus important).
Le template de base Prestashop 1.7
Même si je préférais le thème 1.6 en terme d’agencement des blocs, le thème Prestashop 1.7 a le mérite d’être de base déjà très épuré. Ce que je suggère dans un 1er temps c’est de le convertir vers un design plus « FLAT » c’est-à-dire qu’il faut retirer la couleur d’arrière-plan et convertir les bordures d’ombrage en bordure simple… voir même retirer complètement les bordures dans certains cas. Dans le thème de Prestahop 1.7 de base, ils ont vraiment utilisé un maximum le « box-shadow », l’enlever donne vraiment un style différent (on le voit bien quand on compare avant / après, durant le tutoriel).
Google Fonts pour relooker les titres
Comme mentionné dans le tutoriel, le fait d’utiliser Google Fonts peut vraiment donner un trait de caractère à votre boutique Prestashop. Par contre, le grand secret est de savoir l’utiliser avec parcimonie… car si on en met trop c’est étouffant. Je conseille par exemple de l’appliquer de manière globale sur les titres du type h1,h2,h3 afin de retrouver cette police sur l’ensemble de votre Prestashop. Dans notre cas, j’applique la règle de police au menu Prestashop (sur le niveau 1 à la racine) ce qui donne un air « cartoon » plutôt sympa.
Le choix des couleurs du thème Prestashop
Pour faire quelque chose de vraiment neutre, je conseille d’opter pour le noir et blanc. Le thème Prestashop par défaut repose sur 2 couleurs principales (bleu et blanc). Donc ce que je recommande de faire, c’est un remplacement massif des codes couleurs dans le fichier « theme.css » ce qui permettra de convertir très rapidement tous les boutons en noir, ainsi que la couleur des liens.
Le plus difficile est de faire preuve de bon goût
On ne s’improvise pas designer du jour au lendemain, même si vous tentez d’épurer l’apparence de votre boutique Prestashop, il faut réussir à trouver un équilibre et une cohérence dans l’affichage. Si on enlève trop de bordures, on aura de la peine à distinguer les sections de la page, si on en met trop on risque d’avoir l’impression de se trouver sur une boutique quadrillée de bordures. C’est pour cela que je conseille de bien regarder comment font des gros sites e-commerce comme Zalando avec leur template. Vous savez, ils paient des designers très chers pour améliorer leurs visuels, donc inspirez vous de leur travail.
Pour ce tutoriel Prestashop vous avez à disposition :
- 1 x fichier custom.css (pour retirer les ombrages & mettre des bordures)
- 1 x fichier theme.css (pour relooker les boutons)
- 1 x fichier head.tpl (pour Google Fonts)
Résumé de la vidéo : Un thème Prestashop en noir & blanc minimaliste, ça passe toujours bien.
- Tout d’abord on visite Zalando pour voir comment ils font sur leur site.
- Sur Prestashop on commence par mettre un fond blanc au lieu de gris.
- Ensuite, on retire les ombrages pour obtenir un design « FLAT ».
- Puis, on convertit la couleur bleue de base, vers la couleur noire.
- Parfois juste en diminuant la taille de police, cela change la perception de l’oeil… c’est le cas par exemple avec les flags « Nouveaux » ou « Promotions ».
- Intégrez Google Font pour donner une identité au shop. Ne mixez pas trop de polices différentes, utilisez leur application avec modération.
- Pensez à tester chaque fois sur mobile vos changements, pour vérifier que le fait d’ajouter ou retirer une bordure soit bien explicite.
- A travers ce tutoriel je vous montre bien sûr le « concept »… pour faire un thème Prestashop à 100% au TOP il faut prévoir quand même un peu plus de temps.
