Ajouter une vidéo sur la page d'accueil Shopify : sections, lecture automatique, format vidéo et chargement

Pour ajouter une vidéo sur la page d'accueil de votre boutique Shopify, importez le fichier MP4 dans Contenu > Fichiers, puis allez dans Boutique en ligne > Thèmes > Personnaliser et, sur la page d'accueil qui s'ouvre par défaut, cliquez sur Ajouter une section. Choisissez la section Vidéo, ou une section hero ou bannière qui accepte la vidéo, sélectionnez votre fichier et enregistrez. D'un thème à l'autre, le comportement de la vidéo change : lancement automatique ou non, son ou non, et poids ajouté à la page.

Nous avons lu le code des deux thèmes de référence de Shopify, Dawn 16.0.0 et Horizon 4.2.0, ainsi que les pages correspondantes du centre d'aide, le 1er octobre 2026. La section Vidéo de Dawn ne se lance jamais toute seule et ne charge qu'une image de couverture tant que l'acheteur n'a pas cliqué. La section Hero d'Horizon joue une boucle muette dès l'ouverture de la page, sans image de couverture ni commandes de lecture.

Les options pour une vidéo sur la page d'accueil Shopify

Vous avez quatre possibilités : la section Vidéo et un hero ou une bannière qui accepte la vidéo (tous deux intégrés au thème, sans code), une section Liquid personnalisé (quelques lignes de HTML, dans n'importe quel thème) et une application.

Une vidéo dans le hero est la première chose que voit le visiteur : elle alourdit donc la page à chaque visite. Une section Vidéo placée plus bas ne coûte presque rien tant que personne ne clique dessus. Pour les fiches produits, notre guide pour ajouter une vidéo sur une fiche produit Shopify détaille les cinq méthodes propres au produit, et notre page sur la vidéo dans une page collection Shopify couvre l'en-tête de collection, une vidéo pour une seule collection et la grille de produits.

Étape 1 : importer le MP4 dans les fichiers Shopify

Toutes les méthodes partent du même fichier. Dans votre admin, allez dans Contenu > Fichiers et cliquez sur Importer des fichiers (Upload files). Vous pouvez sélectionner jusqu'à 20 fichiers à la fois. D'après les exigences de Shopify sur les fichiers, une vidéo peut être au format MP4, MOV ou WebM, jusqu'à 1 Go, 10 minutes et 4 096 pixels sur son plus grand côté. Notre page sur la taille et le format des vidéos Shopify liste toutes les limites et les réglages d'export que Shopify recommande. Elles s'appliquent telles quelles aux vidéos de la page d'accueil.

Trois détails de la même page comptent ici :

• Une boutique en période d'essai ne peut pas importer de vidéo. Les formats autorisés pendant l'essai sont JS, CSS, GIF, JPEG, PNG, JSON, CSV, PDF, WebP et HEIC.
• Le bouton de lien (Link) à côté d'un fichier copie son URL dans votre presse-papiers. Il ne sert que pour la méthode Liquid personnalisé, que notre guide pour ajouter une vidéo MP4 sur Shopify sans YouTube applique aussi aux fiches produits, aux pages et aux articles de blog.
• Remplacer un fichier change son lien. Shopify précise que le nom du fichier reste le même, mais que son lien change. Un lien collé dans du code Liquid personnalisé ne fonctionne plus après un remplacement : mettez le code à jour quand vous changez de vidéo.

La page Fichiers permet aussi de modifier l'image de couverture d'une vidéo. La section Vidéo de Dawn s'en sert comme affiche (poster) pour une vidéo hébergée par Shopify.

Méthode 1 : la section Vidéo

Dans Dawn, cliquez sur Ajouter une section et choisissez Vidéo. La section accepte soit un fichier sous l'intitulé Shopify-hosted video (vidéo hébergée par Shopify), soit un lien YouTube ou Vimeo sous Or embed video from URL (ou intégrer une vidéo depuis une URL). Le thème n'utilise le lien que si vous n'avez choisi aucune vidéo hébergée par Shopify. Autres réglages : Cover image (image de couverture), Video alt text (texte alternatif), Loop video (lecture en boucle, désactivée par défaut) et Full width (pleine largeur).

Dawn affiche l'image de couverture avec un bouton de lecture. Au clic, le lecteur se charge et joue la vidéo avec le son et les commandes. Il n'existe aucun réglage de lecture automatique, ce qui en fait l'option la plus légère : jusqu'au clic, le navigateur télécharge une seule image.

Dans Horizon, la vidéo est un bloc et non une section. Ajoutez une Custom section (section personnalisée), cliquez sur Ajouter un bloc et choisissez Vidéo. Vous pouvez aussi utiliser la section Media with text (média avec texte) et régler le Type de son bloc média sur Vidéo. Le bloc Vidéo propose un réglage Source (Uploaded pour un fichier importé, ou URL), une case Autoplay décochée par défaut avec la mention « Videos will be muted by default » (les vidéos seront muettes par défaut), et Loop video, activé par défaut. Avec Autoplay décoché, le bloc affiche l'image de couverture et un bouton de lecture, et ne charge la vidéo qu'au clic.

La section Collage de Dawn possède elle aussi un bloc Vidéo, mais elle n'accepte que des liens YouTube et Vimeo. Son propre texte d'aide indique que la vidéo s'ouvre dans une fenêtre contextuelle si la section contient d'autres blocs.

Méthode 2 : un fond vidéo dans le hero ou la bannière

Pour placer une vidéo en fond de bannière sur votre page d'accueil Shopify, il vous faut une section hero ou bannière avec une option vidéo. Horizon en a une. Dawn n'en a pas : ses sections Image banner (bannière d'image), Slideshow (diaporama) et Image with text (image avec texte) n'acceptent que des images.

Dans la section Hero d'Horizon, ouvrez Media 1, réglez Type sur Vidéo, puis sélectionnez votre fichier. La section accueille deux médias côte à côte (Media 1 et Media 2). Le code affiche la vidéo avec la lecture automatique, la boucle et le son coupé activés, sans commandes et sans image de couverture. Le hero joue donc en silence dès l'ouverture de la page, recommence en boucle et n'offre aucun bouton pause.

Deux réglages du Hero concernent les téléphones. Show different media on mobile (afficher un autre média sur mobile) vous laisse définir une vidéo ou une image distincte pour les petits écrans : c'est ainsi que vous servez un montage vertical aux téléphones. Stack media (empiler les médias) place Media 1 et Media 2 l'un au-dessus de l'autre au lieu de côte à côte.

Le Slideshow d'Horizon fonctionne de la même façon, diapositive par diapositive : réglez le type de média de la diapositive sur Vidéo et elle se lance seule, sans le son et en boucle, avec l'image de couverture de la vidéo affichée derrière pendant le chargement du fichier.

Dans Dawn, une bannière animée passe par une section Vidéo en pleine largeur (qui reste à lancer d'un clic) ou par la méthode 3.

Méthode 3 : Liquid personnalisé avec un lien des fichiers Shopify

Une section Liquid personnalisé vous donne une vidéo en lecture automatique dans n'importe quel thème, Dawn compris. Cliquez sur Ajouter une section, choisissez Liquid personnalisé (Custom Liquid) et collez une balise video dans le champ Liquid code, avec le lien copié depuis Fichiers :

<video autoplay muted loop playsinline preload="metadata"
  poster="PASTE-THE-POSTER-IMAGE-LINK.jpg"
  style="display:block;width:100%;height:auto">
  <source src="PASTE-THE-VIDEO-FILE-LINK.mp4" type="video/mp4">
</video>

Le rôle de chaque attribut :

• muted autorise la vidéo à démarrer seule (voir la partie sur la lecture automatique).
• playsinline garde la vidéo dans la page sur iPhone. Sans cet attribut, l'iPhone lit la vidéo en plein écran.
• poster affiche une image fixe en attendant la première image de la vidéo. Exportez une image du film en JPG, importez-la dans Fichiers et collez son lien.
• preload="metadata" ne récupère que les informations de base de la vidéo avant la lecture, la même valeur que celle produite par le filtre video_tag de Shopify.

Les contreparties : aucun réglage, uniquement du code ; un lien qui casse quand vous remplacez le fichier ; et une balise video simple lit l'unique fichier vers lequel pointe son lien. Les sections construites sur le filtre Liquid video_tag de Shopify reçoivent en plus un flux HLS, qui adapte la qualité à la connexion de l'acheteur (sauf quand la boucle est active). Si un développeur maintient votre thème, une section sur mesure avec un sélecteur vidéo et video_tag conserve ces avantages.

Méthode 4 : une application

Les applications du Shopify App Store ajoutent leur propre section ou bloc d'application, que vous placez depuis l'éditeur de thème comme n'importe quel autre bloc : carrousels vidéo, grilles de vidéos shoppables, bulles de stories. La lecture et le poids de la page dépendent alors du code de l'application et non plus de celui de votre thème. Avant d'installer une application, vérifiez si ses vidéos se chargent avec la page ou seulement à l'ouverture, et si elles se lancent automatiquement.

Lecture automatique et son sur la page d'accueil Shopify

Toutes les méthodes se heurtent aux mêmes règles des navigateurs. Selon sa politique de lecture automatique, Chrome autorise toujours la lecture automatique sans le son. Pour une lecture automatique avec le son, le visiteur doit d'abord interagir avec la page, par un clic ou un appui.

Safari sur iPhone est plus strict. D'après les règles vidéo de WebKit pour iOS, une vidéo ne se lance sans geste de l'utilisateur que si elle est muette ou sans piste audio, elle ne démarre qu'une fois visible à l'écran, et elle se met en pause quand l'acheteur la fait sortir de l'écran en faisant défiler la page. Sans playsinline, une vidéo exige toujours le plein écran sur iPhone.

Les recommandations média de Shopify pour les développeurs de thèmes vont dans le même sens : une vidéo devrait être en pause par défaut au chargement de la page, et si elle se lance au chargement, elle devrait être muette par défaut. Sur les fiches produits, la galerie ajoute ses propres limites : voyez ce que font Dawn et Horizon dans notre partie sur la lecture automatique des vidéos de fiche produit Shopify.

Une vidéo de page d'accueil en lecture automatique joue donc sans le son, quels que soient le thème et le navigateur. Prévoyez-le :

• Mettez le message à l'écran. Un message porté uniquement par la voix off se perd.
• Exportez les boucles de fond sans piste audio. L'iPhone les traite comme muettes, et le fichier est plus léger.
• Si la vidéo a besoin du son, utilisez une section à lancer d'un clic : ce clic vaut interaction aux yeux des navigateurs.
• Donnez aux acheteurs un moyen d'arrêter le mouvement. Les règles d'accessibilité (WCAG) demandent une commande de pause sur tout contenu animé qui démarre seul, et le Hero d'Horizon n'affiche aucune commande.

Taille et format de la vidéo de page d'accueil Shopify

Exportez un MP4 en H.264, le codec vidéo listé par Shopify, avec un son en AAC si la vidéo garde sa bande sonore. Shopify recommande les ratios 16:9, 9:16, 4:3, 3:4 ou 1:1, à des résolutions comme 1920x1080 ou 1280x720 (ou 720x1280 en vertical), et 25, 30 ou 60 images par seconde.

Sur la page d'accueil, c'est la section qui fixe le cadre. Le centre d'aide de Shopify l'explique pour les images de bannière : la section a sa propre forme, et une image large sur un écran de téléphone haut perd ses bords gauche et droit au recadrage. Une vidéo en 16:9 dans une bannière haute perd ses côtés de la même façon. Deux solutions : gardez le sujet au centre du cadre ou, dans le Hero d'Horizon, utilisez Show different media on mobile avec une version en 9:16. Dans Dawn, la section Vidéo évite le problème en calant son cadre sur le ratio de l'image de couverture.

Garder une page d'accueil rapide

Shopify publie les débits auxquels il encode les vidéos MP4 : de 0,9 à 1,5 Mbit/s en 480p, de 1,6 à 4,5 Mbit/s en 720p et de 2,5 à 7,2 Mbit/s en 1080p. Multipliez par la durée et vous obtenez le volume téléchargé. Un clip de 15 secondes pèse de 1,7 à 2,8 Mo en 480p, de 3,0 à 8,4 Mo en 720p et de 4,7 à 13,5 Mo en 1080p. Un hero en boucle télécharge ce volume à chaque visite.

La boucle a un effet secondaire. La documentation de video_tag indique que, si la boucle est active, Shopify n'utilise pas la source HLS afin de permettre un téléchargement progressif qui met la vidéo en cache. Une boucle de fond reçoit donc un simple fichier MP4 au lieu d'un flux qui s'adapte à la connexion.

La même page fixe la règle du chargement différé : video_tag règle automatiquement loading sur lazy pour les vidéos des sections situées plus bas dans la page, et Shopify recommande de ne pas différer le chargement des vidéos visibles sans défilement. Un hero en haut de page se charge donc immédiatement, par construction.

Pour garder une vidéo de page d'accueil rapide :

1. Préférez le lancement au clic quand c'est possible. La section Vidéo de Dawn et le bloc Vidéo d'Horizon avec Autoplay décoché ne chargent qu'une image jusqu'au clic.
2. Des boucles courtes et muettes pour les fonds. Ne gardez que les secondes qui portent l'idée, et supprimez la piste audio.
3. Une image de couverture ou une couleur de fond assortie. Le Hero d'Horizon n'affiche aucune image de couverture : le visiteur voit la couleur de fond de la section jusqu'à l'arrivée de la première image. Choisissez une couleur proche de cette image.
4. Une seule vidéo en lecture automatique par page. Les recommandations de Shopify pour les médias produit demandent que, lorsque plusieurs médias s'affichent en même temps, tous restent en pause jusqu'à une action de l'acheteur. La même logique vaut pour une page d'accueil.

Quelle méthode choisir

• Un film de marque avec le son : la section Vidéo, à lancer d'un clic.
• Un fond animé derrière votre titre : le Hero d'Horizon, ou du Liquid personnalisé dans Dawn.
• Plusieurs clips courts (nouveautés, tutoriel, lancement) : un carrousel vidéo ou une rangée de stories, qui lit chaque clip à la demande.

Plusieurs clips courts sur la page d'accueil : les stories

Les stories conviennent à une page d'accueil qui a plus à montrer qu'un seul film. Une rangée de bulles se place sous l'en-tête, et chaque bulle ouvre un lecteur plein écran où l'acheteur fait défiler de courts clips d'un appui. Notre guide pour ajouter des stories façon Instagram sur Shopify explique quoi filmer et où placer les bulles, et la page sur les stories shoppables les compare à un flux Instagram intégré.

Storiq ajoute cette barre de stories à votre thème avec un bloc d'application, sans code. Les clips viennent de votre bibliothèque de fichiers Shopify : les limites de fichiers ci-dessus s'appliquent donc toujours, et le CDN de Shopify les diffuse. Les emplacements sur la page d'accueil et les pages collections font partie du forfait Starter, à 9,99 $ par mois avec 7 jours d'essai gratuit, tout comme les cartes produit sur les slides, qui affichent le prix lu en direct dans votre catalogue. Le forfait Free couvre les stories sur les fiches produits.