Prestashop vidéo background

Prestashop 1.7 – Animer l’arrière-plan (ép. 71)

Comment apporter un peu de fraîcheur rapidement sur votre boutique e-commerce Prestashop ? Voici une piste amusante et facile à exécuter… l’intégration d’une vidéo animée en arrière-plan pour créer l’effet WAOUW !

Vous adorez les gadgets !

En fait j’ai pu constater dans mon audience (donc peut-être vous aussi), vous adorez customiser votre boutique Prestashop… mais plutôt sur le plan esthétique. C’est assez drôle, car parfois je cherche des solutions plus complexes pour le SEO (pour par exemple développer la visibilité)… mais vous préférez quand même les gadgets ! En complément de l’image d’arrière Prestashop qui semble vous avoir beaucoup plus… je me dis que ça serait sympa de le faire avec un background vidéo cette fois-ci.

La vidéo en arrière-plan c’est impressionnant

Oui, en fait ce qui est intéressant avec cette méthode c’est d’impressionner le visiteur qui vient sur votre boutique en ligne… car peu de sites ont une vidéo en arrière-plan. Tout de suite cela donne l’impression d’un site plus « haut-de-gamme » avec des moyens financiers plus forts (oui c’est la 1ère perception que vous pouvez donner à vos visiteurs). Cette manipulation permet aussi de rester sur le thème de base Prestashop, mais de proposer quelque chose d’esthétiquement différent, sans devoir acheter un template.

Sur quelles pages Prestashop afficher la vidéo ?

Alors, c’est une très bonne question, il faut se mettre à la place de vos visiteurs pour éviter aussi qu’ils soient trop distraits ou agacés par la vidéo d’arrière-plan (cela dépend aussi du type de vidéo). Dans le tutoriel de base je propose de mettre la vidéo en background uniquement sur la page d’accueil qui sera forcément l’une des plus vues (on met le paquet sur la porte d’entrée en gros). Et sur les autres pages on reste sobre pour éviter de provoquer une indigestion visuelle.

Quel type de vidéo choisir ?

Le plus simple est de se fournir sur un site qui propose des vidéos libres de droits et d’en trouver une qui pourrait correspondre à votre business par exemple chez videos.pexels.com et la bonne nouvelle c’est que ces vidéos sont bien souvent en haute résolution. Pour les plus aventuriers, vous pouvez aussi improviser et créer votre propre vidéo avec votre smartphone… cela vous permettra d’avoir vraiment une vidéo unique en arrière-plan et qui soit vraiment associée à votre thématique.

Cela ne ralenti pas le shop ?

C’est une bonne question, en fait je me suis demandé si la page devait pré-charger automatiquement le fichier « mp4 » pour devoir s’afficher… A première vue il semblerait que le code HTML5 est assez intelligent pour laisser charger la page au navigateur et seulement ensuite il charge le flux stream vidéo. Bon il est évident que plus la vidéo est légère mieux c’est… donc si vous arrivez à trouver une vidéo courte et qui peut tourner en boucle sans donner l’impression que ça se répète trop c’est top.

Ressources

Pour ce tutoriel vous avez à disposition :

  • 1 x fichier bg.mp4 (animation vidéo)
  • 1 x layout-both-columns.tpl (charger le background vidéo)

Télécharger

Résumé de la vidéo : intégrer un arrière-plan vidéo dans Prestashop

  • La 1ère étape est assez simple et consiste à trouver une vidéo pour l’intégrer dans Prestashop, vous pouvez rechercher dans Google sur les termes « vidéo libre de droit ».
  • Une fois la vidéo récupérée on va le mettre simplement un nouveau dossier « /video » à la racine du shop et nommer la vidéo « bg.mp4 ».
  • Ensuite, juste après l’ouverture de la balise body du template « layout-both-columns.tpl » on va injecter le code qui va permettre le chargement de la vidéo (dans mon exemple j’intègre aussi le CSS dans le même fichier, mais vous pouvez le séparer bien entendu).
  • N’oubliez pas de faire un test sur les différents supports pour voir ce que ça donne… sur mobile la vidéo d’arrière-plan est masquée.
  • Cette méthode est rapide et économique et permet de donner une autre perception de votre boutique Prestashop à vos clients.
Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (12 votes, moyenne : 5,00 sur 5)
Loading...

2 commentaires sur “Prestashop 1.7 – Animer l’arrière-plan (ép. 71)”

  1. Bonjour.
    A quoi bon customiser sont site si personne ne le vois ?
    Il faut donc d’abord se concentrer sur le SEO, puis sur l’ergonomie pour une navigation simple et intuitive. Laissons la customisation pour le fun et une utilisation sporadique, si non ont en reviendra à cette lassitude des sites qui utilisaient les gifs animés dans tous les sens au début des année 2000.
    Ceci dit la customisation est assez ludique et sympa et celle ci est particulièrement simple à mettre en œuvre, merci Germain pour cette astuce.

    1. Bonjour,

      Oui tout à fait, un site « beau » n’attirera pas + de trafic, j’ai pris la décision de continuer de mixer les épisodes pour les prochaines publications. Et si on peut faire les 2 oui, c’est encore mieux.

      A bientôt !

Laisser un commentaire

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