Pourquoi acheter un thème Prestashop ? Parce qu’il est différent de celui fourni standard ? Parce qu’il est révolutionnaire pour le SEO ? Il existe pourtant une méthode assez simple… juste avec 50 lignes de code vous pouvez accomplir des « presque » miracles.
Choisir un template Prestashop est toujours un vrai casse-tête
Ce que je peux vous dire c’est que mes clients sont très attachés à la partie visuelle de leur shop (et je les comprends), sauf que lorsqu’il faut se décider à choisir un thème c’est toujours un peu le combat.
Les templates Prestashop « Premium » ont beaucoup de dépendances pour la plupart, des cargaisons de nouveaux modules « non natifs » sont installés en back-office et c’est à mon sens pas forcément représentatif de ce que doit-être un bon thème Prestashop.
On est bien sûr toujours attiré par les effets visuels qui font « Waouw », mais il est risqué de choisir un template juste pour ses effets. Les clients viennent avant tout chez vous pour faire un achat, pas pour s’extasier de votre beau template.
Le thème standard de Prestashop 1.7 « has been » ?
La première chose à comprendre c’est qu’à force de voir de sites sur Prestashop, vous devenez totalement « blasé ». Utiliser le thème de base de Prestashop peut même sembler être une « insulte » parce que trop de boutiques l’utilisent déjà.
Mais attendez… Pensez-vous que vos clients savent ce que c’est Prestashop ? Quelle est la probabilité qu’il aient déjà vu 2 thèmes « standard » Prestashop sur 2 sites qu’ils ont déjà visités ? Et même si ça arrivait, pensez-vous que vos clients vont être scandalisés ? Pas du tout.
En revanche, il est vrai tout de même que pour votre image de marque, le thème de base est un peu impersonnel. Pourtant il ne lui en faudrait pas beaucoup pour qu’il puisse être un peu plus imposant.
Refaire un thème depuis zéro ? Non ! 50 lignes de codes oui !
Je me suis posé la question s’il était possible de faire un thème Prestashop un peu différent du conventionnel tout en restant très proche du noyau principal… Et bien sûr savoir si c’était possible de le faire en 30 minutes.
Mon inspiration s’est faite sur la base du site Microspot (que j’aime beaucoup), qui semblait avoir une structure de shop assez proche de Prestashop. Se rapprocher d’un gros site leader e-commerce en suisse en seulement 1/2 heure… Hum ! Quel challenge ambitieux.
Vous allez voir dans la vidéo ci-dessous que le résultat final est quand même intéressant. Certains diront c’est la version « Wish » de Microspot que tu nous as fait (hahaha), mais sincèrement je trouve que le design est déjà beaucoup plus charismatique et avec peu de moyens.
Un bon intégrateur de thème ?
Combien de fois je vois des designers arriver avec un fichier PSD qui n’a rien à voir avec la structure de Prestashop standard et tout à coup perdre des jours voir des semaines à faire de l’intégration.
J’ai envie de vous dire « mais pourquoooooi ? »… Ce qu’il faut comprendre c’est que cela est sujet à de multiples bugs d’affichage parce qu’il faut trop coder de nouvelles règles. La bonne méthode à mon sens c’est de faire un thème enfant intelligent qui surcharge le thème de base natif. Si vous êtes à la recherche d’un thème Prestashop rapide lisez ce billet.
Le pire dans tout ça c’est qu’en finalité les thèmes Prestashop se ressemblent tous (y compris les thèmes Premium). Il serait donc dommage de compromettre la stabilité future de votre boutique Prestashop en l’encombrant de plugins inutiles.
Les templates Prestashop optimisés pour le SEO
On peut aussi bien sûr être tenté de se tourner vers ces templates optimisés pour le référencement de votre boutique Prestashop. Sur le principe c’est une bonne idée, mais voici ce que j’ai constaté…
Pour avoir comparé des clients avec des thèmes optimisés spécifiquement pour le SEO et des thèmes plus ou moins classiques, la différence sur le trafic n’est pas vraiment perceptible. Cela vous choque ? En fait c’est juste que l’influence du thème sur votre positionnement dans Google a ses limites.
Ce que vous devez comprendre c’est que jamais un thème Prestashop ne vous fera devenir le n°1 dans votre thématique. Bien sûr s’il est structuré correctement ça aide à Google à mieux comprendre votre site, mais l’impact reste limité. Vous pouvez regarder ma méthode SEO Ramsès II pour découvrir tous les leviers du référencement naturel.
Pour ce tutoriel Prestashop vous avez à disposition :
- 1 x header.tpl (pour le haut de page)
- 1 x footer.tpl (pour le pied de page)
- 1 x custom.css (pour designer le thème)
- 1 x logo.psd (un logo monochrome)
- 1 x slider.psd (un slide assorti au thème)
Résumé de la vidéo : Le meilleur template Prestashop ? C’est celui qu’on va faire ensemble
- Sur le principe on va donc s’inspirer du site de Microspot.
- Le menu horizontal on le retire pour gagner en clarté.
- On greffe le bloc des catégories à gauche.
- La partie champ de recherche on lui donne plus d’importance / place.
- On ajuste les couleurs aux emplacements clés.
- L’affichage des produits réparti sur 3 colonnes avec une règle en %.
- On révise la largeur du logo + intégration d’un logo monochrome.
- Sur le slider on laisse uniquement l’image sans texte dynamique.
- En page d’accueil on laisse uniquement affiché 6 produits
- La bannière et le bloc de texte on les inverse de position.
- Le bloc newsletter du pied de page on le supprime.
- Le footer on le redesign rapidement + enlever la signature Prestashop.
Hello Germain
Je suis tout à fait dans ta vision du template, et en suivant tes différents tuto j’ai pu personnalisé le miens.
Tu t’attaque notamment à ce menu qui à mon gout n’est pas adapté pour une navigation confortable, notamment pour smartphone, je l’ai conservé car je ne suis pas le seul décisionnaire, mais en mettant en place mes tuiles de navigation, j’aurai très bien pu le faire.
Concernant le SEO j’ai fait le choix de privilégier le contenu à la présentation d’articles, et cela semble payer.
Pour en revenir au menu, l’améliorer en faisant des listes verticales au lieux de horizontal serait déjà une grande avancée … Pour un prochain tuto peut être …
En tout cas ce tuto est une belle démonstration qu’en faisant avec ce qu’on a on peut déjà faire beaucoup, encore faut il savoir comment le faire et grâce à toi on arrive à en faire pas mal. Merci.
Hello,
Très bon choix de privilégier le contenu, ça reste prioritaire pour le positionnement du shop (pour déclencher les ventes). Un joli design c’est bien, mais un bon contenu c’est mieux ;).
A bientôt !
J’aime beaucoup cette approche, je me demande juste si ça va pas faire foirer les modifications que j’ai effectuées avec la technique du Grand Chaman !
https://www.webbax.ch/2020/04/09/prestashop-et-la-technique-de-newsletter-du-grand-chamane-ep-98/
Je suppose qu’il faudra modifier la taille des images ?
Je commente pas souvent donc je profite pour te remercier pour tes vidéos dont je reste un très grand fan et qu’il m’arrive parfois de mettre en pratique !!!
Hello Pascal,
Tu peux faire cohabiter les 2, il faut juste ne pas désactiver le bloc newsletter Prestashop dans ton cas (si tu l’as déjà optimisé avec ce tutoriel).
A bientôt !
Bonjour Germain,
J’ai suivi ton tuto et on arrête jamais de te remercier :), pour ma part j’ai un petit souci au niveau de menu vertical; en mode mobile (horizental ou vertical), j’ai qu’une seule catégorie qui s’affiche ! j’appelle à l’aide :).
Merci d’avance,
Mondher
Bonjour moi aussi , je suis dans le même cas, j’ai une seule catégorie qui s’affiche pour l’instant …. Merci
Bonjour Jérôme,
il mes semble je trouvais la solution, mais je ne suis plus sûr, car entre temps je changeais de design; il me semble il faut aller dans module manger, menu et rajouter les liens des catégories (ç’a l’air d’être simple, c’est pour ça je doute :). Allez bon courage.
Salut Germain,
Je suis en train d’effectuer ton tuto, mais suite à la modif pour afficher 3 article par ligne, il m’affiche l’entier des produits de la page sur une seule ligne. Je ne comprends pas pourquoi. Et autant dire que visuellement ça le fait pas du tout.
Tu peux m’aider ?
Merci beaucoup pour tes tutos, que je regarder fréquemment pour m’inspirer.
Re,
Après avoir supprimer les règles CSS suivantes :
/* affichage produits par rang de 3 */
.products .product-miniature{width:28%!important;}
.products .product-description{width:100%!important;}
.products .highlighted-informations{width:100%!important;}
.products .thumbnail-container{width:100%!important;}
Tout est nickel, il semblerait que ces règles créent un bug d’afichage sur la version 1.7.7.1 de presta. Merci
Excellent tutoriel comme toujours, j’aime cette approche et moi qui débute j’apprends beaucoup. Donc merci c’est cool.
Petite question existentielle, si si un peu… comment change t-on la monnaie en dollars actuellement pour la passer en euros ?
Je rame sérieux là dessus…
Merci pour vos lumières car je suis dans le noir complet.
Dominique
Bonjour,
Merci pour cette vidéo, je sais qu’elle date de 2020 mais j’ai tout de même tenté de l’appliquer sur une une boutique 8.0.4 en local, malheureusement beaucoup de changement ne sont pas pris en compte. J’étais vraiment content de découvrir ce que tu proposais c’est exactement ce que je cherchais pour pouvoir changer certaines couleurs de façon simple et avoir une présentation originale et ma joie et vite retombé. Est ce que vous auriez un fichier à jour pour ces modifs ?? Merci d’avance de votre gentillesse.
Jérémy
Bonjour,
Déjà, merci énormément pour toutes vos vidéos tuto qui m’aident grandement dans l’amélioration de ma boutique PS1.7
Avez-vous un moyen de faire apparaître un menu « catégories » vertical sur mobile? Par exemple à l’aide du bouton menu latéral qui contient le sélecteur de langues et le bouton « contactez-nous »?
Cordialement