Quoi de mieux pour présenter vos produits ou services que de pouvoir ajouter une vidéo sur vos fiches produits. Si votre boutique utilise la plateforme PrestaShop, vous avez sûrement constaté que cette fonction manque cruellement en natif. Certes il existe des modules mais je vais vous expliquer comment, sans module complémentaire, afficher une vidéo YouTube dans une fiche produit d’une boutique PrestaShop.

Comment ça marche ?

L’idée est de permettre au commerçant de pouvoir associer simplement une vidéo YouTube au produit qu’il est en train de gérer. Pour ce faire, nous allons exploiter un champ disponible sur la fiche produit : la référence fournisseur.

Pour afficher la vidéo dans le descriptif du produit, nous avons besoin de la référence de la vidéo. Par exemple, une vidéo située à cette adresse http://www.youtube.com/watch?v=BlvX9sHPjc4 a pour référence BlvX9sHPjc4

Ensuite, nous allons saisir la référence de la vidéo dans le champs référence fournisseur comme ceci :

Enregistrer la fiche produit et voilà que la vidéo s’affiche dans le descriptif du produit ou service :

 

Quelles modifications faire ?

Bon là on passe du coté du code informatique de votre thème graphique pour PrestaShop. Va falloir mettre un peu les mains dans le cambouis…
Dans les fichiers du thème graphique, éditer product.tpl qui permet l’affichage d’une fiche produit. A l’endroit ou vous souhaitez afficher la vidéo YouTube, insérer le code suivant :

supplier_reference correspond à la reference fournisseur mais vous pouvez utiliser tout autre element de la fiche produit.

Vous pouvez également personnaliser la taille de la vidéo affichée (width= »450″ height= »290″).

Et voilà vous pouvez maintenant afficher une vidéo YouTube dans la fiche produit d’une boutique en ligne PrestaShop

 

Remerciements

Je voudrais remercier Gabriel Crowe pour avoir partagé cette astuce. Vous pouvez consulter le billet original sur son blog : Embed a #youtube video in #prestashop.

Mon billet est une traduction libre de la méthode donnée par Gabriel.

Catégories : Atelier numérique

Claude BUENO

Je suis passionné par les technologies de l'information et de la communication. Ma mission : accompagner les clients dans leur transformation digitale. Je blogue depuis 2008 sur les sujets numériques. Je suis fan de Star Wars, Vikings et Game of Thrones. J'habite à Tours.

16 Comments

Regroupement de crédit · 3 juin 2011 à 12 h 00 min

Mille merci Claude, votre astuce m’aide beaucoup à mieux présenter mes produits qui sont en vente.

    Claude · 5 juin 2011 à 14 h 52 min

    Bonjour mais votre site n’est pas motorisé avec PrestaShop.

Samy Adjemi · 2 novembre 2011 à 17 h 17 min

Superbe astuce, je viens de partager l’article sur Twitter! Nous avions la problématique avec une cliente.

gérald · 3 décembre 2011 à 14 h 25 min

merci claude, c’est très exactement ce que je cherchais, je vais essayer ça tout de suite. 🙂

avat · 2 janvier 2012 à 14 h 28 min

Bonjour,

je dirais « hummm oui… mais par contre on a plus la référence fournisseur… »

me trompe-je ?

Merci

(ps: « regroupement de crédit » = contenu spinné pour un backlink en dofollow donc normal qu’il n’est pas un prestashop)

    Claude · 2 janvier 2012 à 15 h 15 min

    Effectivement on a plus la référence fournisseur mais il est possible d’utiliser un autre champs non utilisé de la fiche produit.
    L’astuce est à adapter à con besoin…
    PS : c’est un peu le soucis du Dofollow : attirer des commentaires purement seo…

Oemlibert · 16 janvier 2012 à 2 h 06 min

bonjour, je n’arrive pas a faire fonctionner le script sur mon prestashop 1.4.5.1… comment cela se fait il alors que tout est bien en place product.tpl etc…

Oemlibert · 16 janvier 2012 à 12 h 21 min

Merci.. j’y suis déjà lol..:D

nadège · 9 février 2012 à 14 h 34 min

Bonjour,
auriez-vous une solution identique pour la version 1.3.1.1 ? car je n’arrive pas à afficher de vidéo youtube :/

    Claude · 13 février 2012 à 9 h 46 min

    Bonjour,
    Cette solution fonctionne également pour toutes les versions de PrestaShop 1.3

LHfage · 8 septembre 2012 à 22 h 28 min

Bonjour
J’ai essayé plein d’espoir votre bidouille. Hélas cela n’a pas marché. Par contre, en intégrant (en mode html) le code d’intégration Youtube tel qu’il est généré sur le site de chaque vidéo, ça marche nickel…
C’est peut-être un peu plus long, mais c’est parfait !

    Claude · 9 septembre 2012 à 11 h 38 min

    Bonjour,
    Quelle version de Prestashop utilisez-vous ?

Liés · 14 septembre 2012 à 23 h 06 min

Bonsoir,
une solution plus simple conciste a intégrer le lien de la vidéo dans le texte de la fiche produit et sa marche trés bien

sandy · 22 novembre 2012 à 22 h 13 min

Bonjour,

cela fonctionne mais, pas sur les tablettes(ipad etc)!!!

merci

moss · 11 août 2013 à 17 h 03 min

J’ai fait autrement dans l’éditeur html tinymce cliquer sur le bouton « html » et ajouter le code complet de la video youtube, dailymotion ect…, et vous avez la video sur la fiche produit , vous pouvez faire la même méthode dans le petit descriptif en haut de la fiche produit la ou il y a le bouton « plus de d »étails » la video s’afficher aussi Sur PS 1.25 je sais pas si ça fonctionne pour les autre versions.

Laisser un commentaire

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

Articles similaires

Atelier numérique

Définir DuckDuckGo moteur de recherche par défaut sur Google Chrome

Ce n’est plus un secret : nos échanges sur la grande toile du Net sont à la merci des grandes oreilles des services secrets et des entreprises du Net. La NSA a mis sur pied Lire la suite…

Atelier numérique

Comment améliorer en 3 étapes les commentaires WordPress grâce au CSS3 ?

Je me demandais comment donner plus de relief à l’espace commentaire sur mon blog WordPress aussi, je profite de ce samedi matin pour revoir le style graphique de ce coin d’échange et de partage avec Lire la suite…

Atelier numérique

Comment installer PrestaShop chez OVH ?

Nous allons voir dans ce billet comment installer simplement le moteur de boutique en ligne PrestaShop sur un serveur mutualisé OVH Cette méthode ne requiert aucune connaissance technique pour mettre en place PrestaShop puisque tout Lire la suite…