Prestashop de A à Z – diaporama et blocs (ép.7)

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.

Diaporama Prestashop

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

Télécharger les sources

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.

6 réflexions au sujet de « Prestashop de A à Z – diaporama et blocs (ép.7) »

  1. 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

  2. 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

    1. 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 !

  3. 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.

    1. 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 !

Laisser un commentaire

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