Comment ajouter une vidéo sur une fiche produit Shopify?

Comment ajouter une vidéo sur une fiche produit Shopify?

9 mai 2020 0 Par david

Ajouter une vidéo sur Shopify est parfois nécessaire. Il se peut que tu veuilles rajouter de la vie sur ta page produit.

Dans ce tutoriel je vais t’apprendre différentes méthodes pour ajouter une vidéo dans Shopify.

La première t’appendra à insérer une vidéo directement hébergée sur le serveur de ton site et la seconde comment mettre une vidéo depuis Youtube ou d’autres services tiers comme Viméo.

Insérer une vidéo hébergée sur Shopify.

Si tu n’a pas de chaine Youtube ou que tu souhaites que tes ressources soient centralisées sur ton site Shopify tu peux opter pour cette solution pour mettre une vidéo sur ta fiche produit.

Rends-toi sur ton tableau de bord Shopify. Clique en bas à gauche sur la roue « paramètres » puis clique sur « fichiers« .



Appuie sur le bouton bleu « télécharger des fichiers » et sélectionne ta vidéo au format MP4 que tu chargera sur Shopify.

Une fois ta vidéo chargée tu auras la possibilité de copier son URL dans un encadré à sa droite.


url de video hébergée sur shopify

Copie-colle cet URL dans un bloc-note ou ailleurs, tu en aura besoin pour la suite.


Copie ce code

<video width="100%" height="100%" controls="controls" src="TON-LIEN"></video>

Rends-toi sur la page produit où tu souhaites intégrer ta vidéo. Une fois sur celle-ci, passe en éditeur HTML.


éditeur HTML shopify

Repère l’endroit de ta fiche produit où tu souhaites intégrer ta vidéo.

Colle le code HTML que je t’ai fourni juste au dessus à cet endroit. Remplace la partie « TON-LIEN » du code HTML par le lien de la vidéo que tu avais préalablement collé dans ton bloc-note.

Ton code devra ressembler à ceci :

<video width="100%" height="100%" controls="controls"
src="https://cdn.shopify.com/s/files/1/0287/7138/5422/files/nom_de_tavideo.mp4?v=1586565658">
</video>

Tu n’a plus qu’à sauvegarder et te rendre sur ta fiche produit pour te rendre compte que ta vidéo produit a bien été intégrée.

Ce code permet l’affichage responsive, les dimensions de la vidéo s’adapterons à la taille de l’écran des visiteurs de ta page produit.

Si tu souhaites intégrer un vidéo Youtube, Vimeo ou encore Dailymotion je t’invite à rester pour la suite du tuto.

Mettre une vidéo sur Shopify hébergée sur un service tiers (Youtube, Vimeo, etc.)

Pour insérer une vidéo Youtube sur ta page produit c’est très simple. Dans un premier temps, il te suffit de cliquer sur le bouton « Partager » sous la vidéo Youtube de ton choix puis de sélectionner « intégrer« .

Ensuite, un code commençant par  » <iframe  » te sera fourni par Youtube. Copie ce code et rends toi ensuite sur ta fiche produit Shopify.

Clique maintenant à l’endroit de ta description où tu souhaites afficher ta vidéo puis clique sur la petite icone en forme de caméra.


icone caméra shopify

Colle le code HTML qui t’a été fourni par Youtube puis enregistre les modifications.

Vérifie ensuite sur ta page produit que ta vidéo a bien été intégrée.

La démarche est exactement la même pour les lecteurs tels que Vimeo ou Dailymotion. Il te suffit simplement de cliquer sur partager et de chercher le code d’intégration.

Conclusion

Ajouter une vidéo sur sa page produit peut faire une réelle différence sur ton taux de conversion. Je te conseille de ne pas t’en priver.

J’espère que ce tutoriel t’aura été utile. N’hésite pas à laisser un commentaire en cas de question.

Si tu veux aller plus loin dans la personnalisation des fonctions de ton lecteur tu peux cliquer sur ce lien. Je me suis aidé de cet article pour la création de ce tutoriel.

Un tutoriel vidéo est également disponible ci dessous :