La page d’accueil de votre boutique doit donner envie à l’internaute d’acheter, le potentiel acheteur doit comprendre rapidement ce que vous avez à lui proposer. Pensez à soigner la présentation des bannières et actualisez les régulièrement.
Tutoriel n°7
La recette miracle pour votre slider ? La réponse coule de source, « restez simple », une jolie image et un simple texte par-dessus feront l’affaire. Par contre, assurez vous de mettre le produit en contexte pour que ça donne envie (avec un objectif précis), … évitez un produit posé sur un fond blanc, on voit ça déjà partout dans la boutique. Pensez aussi à vous limiter à 3 slides seulement, les clients font rarement défiler les images (voir l’article, le slider est une mauvaise mode).
Dans les autres blocs qui côtoient le slider, essayez de proposer un contenu « fun », qui ne se concentre pas forcément que sur le côté vente. Mettre des boutons « Acheter », partout sur le shop… ne vous fera pas vendre plus.
Un autre élément déterminant à ne pas oublier « La fréquence d’actualisation » ! Une boutique qui fonctionne bien, actualise régulièrement ses sliders et sa page d’accueil. Vous devez le faire au moins une fois par mois, pour donner envie à vos clients de revenir.
Enfin, essayez de mettre le maximum de texte possibles dans le contenu HTML du slider. Ne mettez pas votre texte « incrusté » dans l’image, celui-ci ne sera pas lisible par les moteurs de recherche.
Ressources
Pour ce tutoriel nous vous fournissons :
- 1 x fichier PSD slider
- 2 x fichiers PSD blocs
- 2 x fichiers extraits CSS
Au programme
- Découvrez les différents formats / tailles, attendus par Prestashop.
- Intégrez le diaporama + nouvelles règles CSS.
- Intégrez les deux blocs complémentaires + nouvelles règles CSS.
Bonjour Germain,
Merci beaucoup pour tout ce que vous faites et vos tuto très concrets.
Concernant l’opacité au survol dans cette vidéo, j’ai essayé votre code, et il fonctionne que sur IE8 comme il est mentionné dans le code. Y a t il un moyen de l’appliquer sur tous les navigateurs?
Merci
Bonjour,
Cet effet fonctionne correctement sur tous les navigateurs récents, Chrome, Firefox, IE etc…
Mais si vous désirez mettre plus de règles pour Opacity, regardez ici :
https://css-tricks.com/css-transparency-settings-for-all-broswers/
Merci pour votre visite !
Bonjour,
Merci pour vos tuto
Par contre j’ai un soucis .
Le text viens en bas de l’image du diaporama. et non sur la photo
Je vue le code css et semble être ok.
Je pense que s’est due au theme car si je mais le défaut ca marche et mon theme ca viens comme cela .
Merci d’avance
Bonjour,
Dans le cas présent je fais toujours le test avec le thème par défaut. Avec un thème personnalisé les règles à définir vont être différentes et varieront selon la structure du thème et comment celui-ci a été codé par l’intégrateur HTML / CSS.
Avec un thème Prestashop acheté ou personnalisé, il y’a donc de grandes chances que cela ne fonctionne pas correctement.
A bientôt !
Bonjour,
Je souhaitais vous dire un grand merci pour tous vos tutos, ils me sont d’une grande aide.
Mais étant totalement novice je rencontre quelques difficultés.
A chaque fois que je colle dans les fichiers css les modifications que vous donnez, rien ne se passe sur ma page. Je ne sais pas pourquoi.
Encore merci grâce a vos tutos je vais pouvoir réaliser mon e-commerce sereinement.
Le jour où j’aurais fini je vous enverrais l’adresse du site.
Bonjour,
Merci pour votre retour
Il faut bien vider le cache du navigateur à chaque fois avec la console Google Chrome (dans la vidéo je le montre en principe) et aussi désactiver tous les caches de Prestashop et forcer la recompilation du template.
A bientôt !