Tuto Mettre une vidéo sur sa fiche produit sur shopify sans passer par Youtube, viméo ou autres hébergeurs de médias

Cliquez sur « Files » -> « Upload » et allez chercher votre vidéo sur votre ordinateur

Une fois la vidéo sur le serveur de shopify, copier/coller le lien du champ URL et stockez ce bout de code que nous nommerons CODE1 dans votre bloc note ou autre éditeur de votre choix

tuto1

Ca va donnez quelque chose de ce type:

CODE1 (code d’exemple) :

https://cdn.shopify.com/s/files/1/2031/3857/files/nomdupreoduit.mp4?68255290660821217701598

Ensuite vous allez copier/coller ce bout de code ci dessous dans votre bloc note en dessous du CODE1 pour avoir ceci:

CODE2 (à prendre) :

<video controls="controls" width="100%" height="100%" src="CODE1"></video>

Maintenant vous allez remplacer la zone de code src=CODE1 par l’URL de votre CODE1 pour avoir quelque chose du genre (en gardant les guillemets):

CODE3 (code d’exemple du code final que vous devez avoir):

<video controls="controls" width="100%" height="100%" src="https://cdn.shopify.com/s/files/1/2031/3857/files/nomdupreoduit.mp4?68255290660821217701598"></video>

Rendez vous ensuite sur une de vos fiches produit et cliquez sur le bouton <> (show html) pour rentrer en mode codage et copiez le CODE3 ou vous voulez

tuto2

tuto3

La vidéo prendra toute la largeur de la zone et s’adaptera automatiquement en hauteur

Ce code est optimisée pour que la vidéo soit redimensionnée automatiquement sur tablette et smartphone

Si vous souhaitez que la vidéo se lance automatiquement vous devez rajouter entre height=100% et src=…. le code suivant pour avoir quelque chose de ce type:

autoplay

…height=100% autoplay src=…

Respectez bien les ouvertures et fermetures de balises afin d’éviter tout problème… 

Les balises sont les zones de codes commencent pas < et finissant par >

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

54 commentaires sur “Tuto Mettre une vidéo sur sa fiche produit sur shopify sans passer par Youtube, viméo ou autres hébergeurs de médias

  1. Patrick

    Bonjour et un grand merci pour tout votre travail.

    Est ce que ce tuto veut dire que l’on peut importer sur notre shop des videos de youtube sans que FB détecte que c’est du youtube ?

    Merci d’avance pour la reponse 🙂

  2. Nico

    Bonsoir,

    Pour moi cela ne fonctionne pas j’ai un fond gris avec écrit : le format vidéo ou le type MIME n’est pas géré

    Quel format vidéo faut il utiliser ? Ma vidéo est au format .wmv

    Merci de votre aide.

  3. Jean-Paul

    Bonjour,

    J’utilise une vdéo mp4. Je l’ai téléchargé et je peux la visionner sans problème depuis mes fichiers téléchargés. Du coup, je ne comprends pas pourquoi j’ai aussi le message « le format vidéo ou le type MIME n’est pas géré » lorsque je fais la manip pour l’avoir dans mon article de blog.

    Je voudrais bien la télécharger en WEBM, mais dans ma page de téléchargement keepvid, ça fait 25Mo, et on est limité à 20Mo. Ça craint parce que j’ai droit à du 480p en mp4 pour 17Mo et du 360p en WEBM pour 25Mo…

  4. Gael

    Salut,
    comment faire la même chose sur une page d’accueil o il est possible de mettre une vidéo!? Come sur le thème Narrative par exemple!

    Merci pour ton retour et tous tes tutos!

  5. Arnaud

    Bonjour, j’aurai souhaiter mettre ma vidéo sur ma page d’accueil mais il m’est impossible pour moi de comprendre dans quelle ranger de code le mettre et je n’ai pas envie de toucher à tout..
    j’ai un grand menu dans Customize avec tout les selections  » Layout » « Templates » « Secrtions » « Snippets » « Assets » « Config » « Locales ».. remplis de code
    help me please 🙂

  6. yannick Poumeyrol

    Bonjour je souhaiterais mettre une vidéo à l’emplacement d’une image . Connaissez-vous la procédure à suivre ? merci d’avance

  7. Seb. V

    Bonjour,
    Merci beaucoup! très utile!

    Une question: Je trouve que ma vidéo ne monte pas suffisamment haut (trop d’espace avec le « header »).

    Suite obligé de codé si je veux « remonter » l’emplacement de ma vidéo?

    Merci encore,

    SV

      1. Dgeo Dev

        Tout dépend du poid de la vidéo, parfois interne pèse moins lourd qu’une externe de poid plus conséquent, le mieux étant de faire des splits tests des 2

  8. Corentin

    Bonjour,

    Merci pour le truc,

    J’ai cependant un petit problème, ok sur l’ordi mais sur le smartphone il n’y à rien.
    C-est-à-dire que j’ai juste le texte de la description qui est descendu… mais pas de vidéo.

    Une idée ?

    D’avance merci.

  9. sihem

    Bonjour,
    pouvez vous me dire ou se trouve le files dans ma fiche produit? merci
    Cliquez sur « Files » -> « Upload » et allez chercher votre vidéo sur votre ordinateur

  10. Caroline

    La vidéo s’affiche bien mais l’autoplay ne marche pas. J’ai essayé les différentes balises HMTL possible. Quand j’applique votre méthode, il me rajoute automatiquement un = »  » juste après le mot auoplay . Je suis sur le thème Debut. Vous auriez une idée d’où peut venir le problème? Merci

    1. Dgeo Dev

      Hello, alors attention certaines navigateurs empêchent l’autoplay désormais et surtout sur mobile. c’est une mauvaise pratique que les nouvelles règles sanctionnent. Bonne soirée

  11. dri

    Salut Dgeo,
    Excellent le travail que tu partage! Merci
    Peux stp m’expliquer comment peut-on mettre la description produit s’afficher sur toute la page pas seulement à droite dans le thème Brooklyn si c’est possible bien sur?
    Merci par avance

    1. Dgeo Dev

      Hello, merci 😉
      Il te faut trouver dans product-template ou product selon les thèmes le {{ product.description }} et le couper/coller a différent endroit plus bas jusqu’à trouver l’emplacement voulu 😉

  12. Fabrice

    Bonjour Dgeo Dev,

    Tous bien fait top Merci
    Par contre est-il possible de diminué la taille ?
    Elle prend toute la page, est-il possible de mettre une taille prescise ?
    Merci

    Ps : Est -il possible d’avoir un coaching personnalisé avec vous ?
    Pour la configuration de mon thème

  13. cindy

    bonjour,

    J’ai bien upload la video dans le serveur shopify mais ensuite lorsque la manipulation est fini la vidéo est bien sur la page produit, mais impossible que la vidéo démarre.

    Cela peut venir de quoi? merci beaucoup

Laisser un commentaire

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

*
*