Comment ajouter une vidéo produit sur Shopify (page produit, accueil, collection)

Vous pouvez ajouter une vidéo sur Shopify de trois façons : dans la galerie média de la fiche produit, dans une section Vidéo du thème, ou via un widget d'application. La première convient à une vidéo de démonstration propre à un produit, la deuxième à une vidéo de marque sur la page d'accueil, la troisième aux Reels, TikToks et vidéos clients que vous voulez rendre achetables.

Ce guide passe les trois méthodes en revue, avec les réglages exacts dans l'admin, les limites de taille à respecter et ce qui se passe réellement sur mobile. Il s'adresse aux boutiques en France, en Belgique, en Suisse et au Québec, que vous soyez sur Dawn, Horizon ou un thème sur mesure.

Si vous hésitez encore sur la place que la vidéo doit occuper dans votre boutique, le guide sur l'ajout de vidéo shoppable sur Shopify traite la stratégie avant la technique.

Les trois méthodes en une minute

Chaque méthode correspond à un emplacement et à un usage précis. Choisir la mauvaise vous coûte une heure de bricolage pour un résultat moyen.

La galerie produit est faite pour une vidéo par produit : le sac porté, la crème appliquée, la lampe allumée. Elle vit à côté des photos, se lit au clic et apparaît dans le même carrousel sur mobile.

La section Vidéo du thème est faite pour une vidéo par page : le film de marque sur l'accueil, la vidéo d'atelier sur la page À propos, un tutoriel au bas d'une page produit. Elle se pose depuis l'éditeur de thème sans toucher au code.

Le widget d'application est fait pour plusieurs vidéos par page, souvent verticales, souvent tournées par des clients ou déjà publiées sur Instagram ou TikTok. Il ajoute l'étiquetage des produits, l'ajout au panier dans le lecteur et la mesure du chiffre d'affaires par vidéo.

Méthode 1 : ajouter la vidéo dans la galerie produit

La galerie média est le seul endroit que le carrousel de la fiche produit lit. Une vidéo déposée ailleurs, par exemple dans Contenu puis Fichiers, ne s'affichera jamais dans la galerie, quoi que fasse le thème.

Ouvrez le produit dans l'admin Shopify. Dans la zone Médias, glissez votre fichier MP4 ou MOV, ou cliquez sur Ajouter depuis une URL et collez un lien YouTube ou Vimeo public ou non répertorié. Shopify transcode le fichier en plusieurs rendus, ce qui prend de quelques secondes à quelques minutes selon la durée et le débit. Tant que le badge de traitement est visible, la vidéo reste invisible sur la boutique.

Une fois le traitement terminé, déplacez la vidéo en deuxième ou troisième position. La première position alimente aussi la carte produit sur les collections et les aperçus sur les réseaux sociaux, il vaut donc mieux y laisser une photo propre. En deuxième position, la vidéo n'est qu'à un balayage de pouce sur mobile, là où elle sera réellement regardée.

Un point qui surprend souvent les marchands : sur les pages de collection, la carte produit affiche l'image de prévisualisation de la vidéo, pas un lecteur. Dawn, Horizon et la plupart des thèmes Online Store 2.0 fonctionnent ainsi. Ce n'est pas un défaut, c'est un choix de performance, et nous y revenons plus bas.

Pour les liens externes, trois cas font échouer l'affichage : une vidéo privée sur YouTube, l'intégration désactivée dans les paramètres de la vidéo, ou un lien vers un Short, une playlist ou une chaîne plutôt qu'une URL de lecture standard. Le symptôme est un cadre noir à la place du lecteur.

Méthode 2 : la section Vidéo du thème

Dawn, Horizon et la majorité des thèmes récents livrent une section Vidéo prête à l'emploi. Elle accepte un fichier hébergé par Shopify, choisi dans Contenu puis Fichiers, ou un lien YouTube ou Vimeo.

Rendez-vous dans Boutique en ligne, Thèmes, puis Personnaliser. Choisissez le modèle de page concerné dans le sélecteur en haut de l'éditeur : page d'accueil, produit par défaut, collection, page. Cliquez sur Ajouter une section, puis Vidéo. Sélectionnez la source, ajoutez une image de couverture si le thème le propose, et enregistrez.

Cette section s'affiche à sa propre place dans la page, en dehors de la galerie produit. Sur un modèle de page produit, elle apparaîtra donc sous ou au-dessus des informations produit, sur tous les produits qui utilisent ce modèle. Si vous voulez une vidéo différente par produit, créez un modèle de produit alternatif ou revenez à la méthode 1.

Horizon ajoute un réglage de lecture automatique sur son bloc vidéo. Sur Dawn, la section Vidéo se lit au clic par défaut, avec une image de couverture. Les deux comportements sont acceptables ; le choix dépend de ce que vous voulez que le visiteur fasse en arrivant.

La section Vidéo est aussi la bonne réponse quand vous avez une seule vidéo qui doit apparaître sur toutes les fiches produit d'une gamme, par exemple un tutoriel de pose ou un film de fabrication. Un seul fichier, un seul réglage, aucune répétition dans l'admin.

Méthode 3 : un widget d'application pour les Reels, TikToks et vidéos clients

Dès que vous avez plusieurs vidéos par page, des vidéos verticales, ou l'envie d'étiqueter des produits directement sur la vidéo, la galerie et la section Vidéo montrent leurs limites. Un widget d'application prend le relais.

Le principe est simple : l'application importe vos vidéos, vous les rattachez à un ou plusieurs produits, puis vous placez un bloc d'application dans l'éditeur de thème à l'endroit voulu. Le widget gère la lecture muette sur mobile, le format vertical, le bouton d'ajout au panier dans le lecteur, et le chargement différé pour ne pas alourdir la page.

SwipeReel, par exemple, importe les Reels Instagram et les vidéos TikTok, propose quatre widgets en theme app extension (Inline, Overlay, Stacked et Stories) plus des mises en page en carrousel et en grille, et mesure les vues, les ajouts au panier et le chiffre d'affaires attribué par vidéo. Le plan Gratuit couvre 25 vidéos importées, 5 vidéos actives et un produit étiqueté par vidéo.

Pour installer un bloc d'application, ouvrez l'éditeur de thème, choisissez le modèle, cliquez sur Ajouter un bloc ou Ajouter une section, et cherchez dans l'onglet Applications. Le bloc se déplace ensuite comme n'importe quelle section. Le guide sur l'intégration des Reels Instagram sur Shopify détaille les options avec ou sans application.

Un avantage souvent oublié : un bloc d'application survit aux mises à jour du thème. Une modification Liquid dans la galerie, elle, doit être refaite à chaque nouvelle version de Dawn ou Horizon.

Page d'accueil : où placer la vidéo

Sur la page d'accueil, la vidéo joue un rôle de vitrine. Elle doit charger vite, se comprendre sans le son et donner envie de cliquer vers une collection ou un produit.

Deux emplacements fonctionnent bien. Le premier est juste sous la bannière principale, en pleine largeur, avec une section Vidéo du thème et une phrase de titre au-dessus. Le second est un carrousel de vidéos verticales à mi-page, entre la collection vedette et les avis, via un widget. Le carrousel montre des produits en usage et renvoie directement vers les fiches concernées.

Évitez la vidéo en fond de bannière si vous n'avez pas un fichier très compressé. Une vidéo de fond se charge avant tout le reste et pèse sur le LCP, l'indicateur de vitesse d'affichage que Google mesure. Si vous y tenez, gardez un fichier court, muet et léger, et testez sur un téléphone en 4G.

Pour une page d'accueil multilingue, par exemple une boutique belge en français et en néerlandais, choisissez un widget dont les textes s'adaptent à la langue active. Les libellés du widget SwipeReel sont multilingues, ce qui évite de dupliquer les blocs par langue. Le guide Shopify Belgique et Suisse traite ce cas en détail.

Page de collection : ce que Shopify affiche par défaut

Sur une collection, les cartes produit affichent une image fixe même quand le média principal est une vidéo. C'est le comportement de Dawn, Horizon et de presque tous les thèmes de l'App Store.

La raison est technique. Le code de la carte produit est partagé entre la collection, les résultats de recherche, les recommandations et le tiroir du panier. Vingt vidéos en lecture automatique sur une page de collection ralentiraient tout, et une carte qui bouge dans un tiroir de panier n'a aucun sens.

Vous avez trois options selon votre ambition.

La première, la plus simple : soigner la première image de chaque vidéo, puisque Shopify utilise la première image comme prévisualisation. Une vidéo qui s'ouvre sur un plan net et bien cadré donne une carte propre.

La deuxième : ajouter une section vidéo en haut ou au milieu de la page de collection, en dehors des cartes. Une section Vidéo du thème ou un widget en carrousel fait l'affaire et ne touche pas au code des cartes.

La troisième : modifier le fichier de carte produit du thème pour afficher une balise vidéo muette en survol ou en lecture automatique. C'est possible, mais cela demande une garde-fou de performance et une reprise à chaque mise à jour du thème. L'article en anglais sur la vidéo sur la page de collection Shopify décrit la modification et ses précautions.

Format, poids et lecture automatique

Le format le plus sûr est un MP4 encodé en H.264 avec une piste audio AAC. Safari sur iPhone et sur Mac le lit sans conversion, de même que Chrome et Firefox. Un MOV issu directement d'un iPhone passe généralement, mais peut être encodé en HEVC, que certains navigateurs refusent.

Pour les vidéos verticales issues d'Instagram ou de TikTok, gardez le ratio 9:16 en 1080x1920. Pour une vidéo de galerie produit, un 1:1 ou un 4:5 s'aligne mieux sur les photos. Le guide sur la taille et le format vidéo Shopify donne les réglages d'export complets.

La lecture automatique obéit à une règle stricte sur mobile : Safari et iOS n'autorisent l'autoplay que si la vidéo est muette et porte les attributs muted et playsinline. Sans cela, la vidéo reste sur sa première image avec un bouton de lecture, ce que beaucoup de marchands prennent pour une panne. La galerie produit de Dawn se lit au clic par conception. Si vous voulez du mouvement sans clic, utilisez une section avec autoplay, un widget, ou la modification décrite dans le guide sur la vidéo en autoplay sur la page produit.

Sur le poids, le bon réflexe est de compresser avant l'envoi. Un clip de quinze secondes en 1080p bien encodé pèse quelques Mo, pas cent. Shopify transcode, mais partir d'un fichier raisonnable donne des rendus plus légers et un traitement plus rapide.

Quelle méthode choisir selon votre objectif

Le bon choix dépend moins du thème que de ce que vous attendez de la vidéo.

Si l'objectif est de rassurer sur un produit précis, la galerie suffit. Une vidéo de vingt secondes qui montre la matière, la taille réelle ou le geste d'utilisation répond aux questions que la fiche produit laisse ouvertes. Cela réduit les retours, un sujet sensible quand vous payez la logistique retour en euros ou en francs.

Si l'objectif est l'image de marque, la section Vidéo du thème sur l'accueil fait le travail, à condition d'avoir un fichier léger et un message lisible sans le son.

Si l'objectif est la conversion par la preuve sociale, c'est-à-dire montrer des clients réels avec vos produits, un widget est la seule méthode qui tient à l'échelle. Vous importez les Reels et les TikToks déjà publiés, vous étiquetez les produits, et vous lisez ensuite quelles vidéos génèrent des ajouts au panier. Le guide sur le contenu UGC pour Shopify explique comment obtenir ces vidéos et cadrer les droits.

Beaucoup de boutiques combinent les trois : une vidéo de démonstration dans la galerie, un film de marque sur l'accueil, un carrousel de vidéos clients sous le bouton d'ajout au panier. Les trois méthodes ne se gênent pas, tant que chaque vidéo est chargée à la demande et non toutes en même temps.

Vérifier que la vidéo s'affiche vraiment

Une fois la vidéo en place, ouvrez la boutique dans une fenêtre de navigation privée, sur ordinateur puis sur téléphone. Votre navigateur habituel peut servir une version en cache de la page, datée d'avant le traitement de la vidéo.

Sur mobile, balayez la galerie jusqu'à la vidéo et vérifiez qu'elle se lit au toucher. Si vous attendiez une lecture automatique, relisez la section sur l'autoplay : l'absence de mouvement est presque toujours une question d'attributs, pas un fichier défectueux.

Si la vidéo n'apparaît nulle part, les causes les plus fréquentes sont, dans l'ordre : traitement inachevé, fichier déposé dans Fichiers au lieu de la galerie, lien externe non intégrable, ou thème ancien qui boucle sur les images plutôt que sur les médias. Le diagnostic complet est dans l'article sur la vidéo produit Shopify qui ne s'affiche pas.

Un dernier contrôle utile : ouvrez l'onglet Réseau des outils de développement du navigateur, filtrez sur Média, et rechargez. Vous verrez si la vidéo est demandée, à quel poids, et à quel moment. C'est le moyen le plus rapide de savoir si votre page charge une vidéo de 80 Mo avant même que le visiteur ait fait défiler.