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)
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.
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.
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 !
c’est vraiment sympa. Le premier à regarder et se faire plaisir son propre site, c’est d’abord soit! Des tutos « custom » simple et bien fait, on en redemande.
Hello,
Merci pour le retour, oui j’aime bien ces « petits tutos » avec un impact rapide 😉
A bientôt !
Salut Germain !
Très sympa la vidéo, mais dans quel tpl faut-il placer le code et est-il compatible avec un site 1.6 stp ?
Quand c’est possible et que le travail n’est pas trop compliqué de penser à ceux encore sur 1.6 pour plein de raisons…
Merci d’avance
Bruno
Hello,
Le tutoriel proposé n’est pas compatible avec Prestashop 1.6, sur le principe il faudrait ajouter le code dans le header.tpl (en 1.6) et le CSS dans le « global.css »… mais je n’ai pas testé pour voir ce que ça donne.
A bientôt !
Ah dsl, je fais un up et je n’ai pas vu ta réponse !!!
Je vais tester ça 😉
Re-,
Bon dans le header.tpl sous 1.6, ça marche à condition de coller le code en bas de fichier sinon le reste du code de la page n’est pas pris en charge…
D’ailleurs c’est sûrement une conséquence, le css du footer est cassé (ou surchargé avec le fond blanc de la page main).
Aussi quand on est en multilangues, il vaut mieux mettre un lien absolu, car le chemin est perdu (à cause du /fr ou /en, etc…)
Sinon, la variable $pages.page_name doit être différente sous 1.6, car index, category ne sont visiblement pas reconnues et aucune vidéo ne s’affiche dans ce cas…
Comment peut-on ajuster cela s’il te plait, mon très cher Webbax ?!!!
🙂
Bonjour,
Pour les variables sous Prestashop 1.6 voir cela directement ici : https://www.team-ever.com/les-variables-smarty-de-prestashop/
En l’occurence sous PS 1.6 il faudrait utiliser la variable $page_name
A bientôt !
Bonjour, c’est super merci 🙂
j’ai une petite question, quand je suis dans la partie commande, je ne vois pas la vidéo, une solution, j’ai essayé tout ce que je pensais 🙁 elle y est partout avec {if $page.page_name=’index’} sauf dans la partie commande. merci pour ta réponse 🙂
Hello,
Pour la partie commande, il faudrait essayer d’ajouter le même code dans « themes\classic\templates\layouts\layout-full-width.tpl » juste après {block name=’content_wrapper’}
A bientôt !
bonjour, merci, j’ai essayé, ça ne marche pas, j’ai essayé avec index, order, content, content_wrapper, wrapper mais rien, pas de vidéo
Bonjour,
Difficile de répondre sur ce point, il faudrait commencer par mettre le code sans la condition de contrôle pour voir si cela s’affiche dans le processus.
A bientôt !
Hello mon Webbax préféré !
Juste un truc, corrige-moi si ce n’est que chez moi, mais que ce soit en 1.7 comme en 1.6, je trouve que ça casse un peu le (centre du) footer, non ?
Hello,
Il me semble que ce n’est pas le cas (pour Prestashop 1.7… sur 1.6 je n’ai pas testé). A vérifier en mettant dans le custom.css uniquement les règles du tutoriel pour voir si ça change quelque chose (à condition d’utiliser le thème par défaut).
A bientôt !
Hello,
En fait c’était juste le css qui modifie la couleur du background du footer en blanc ce qui ne convient pas au template d’origine de la version 1.6 :
#footer{ background:#fff; }(le bout de code à mettre en commentaire…)
: )
Bruno
Merci pour le retour !
Merci encore pour tous ces tutos Germain
J’ai fait l’installation sans soucis d’une video mais je coince sur un truc.
Comment rendre transparent le background central.
Cela permettrais de voir un peu plus la video
Bonjour, encore un super tuto!
Je suis avec ps 1.6, et je voudrais ajouter une vidéo en arrière-plan uniquement sur la page de connexion BO (en fait pour moi et mes collègues).
Saurais-tu comment procéder ?
Merci pour ces infos et les posts toujours utile !