Ajouter une vidéo sur une page collection Shopify : en-tête, collection unique et grille de produits

Pour ajouter une vidéo sur une page collection Shopify, importez le fichier MP4 dans Contenu > Fichiers, ouvrez l'éditeur de thème et passez le menu déroulant des modèles, en haut de l'écran, sur Collections > Collection par défaut. Dans Horizon, sélectionnez la section Heading et réglez Background media sur Video. Dans Dawn, cliquez sur Ajouter une section et choisissez Vidéo. Quel que soit le thème, la vidéo apparaît sur toutes les collections qui utilisent ce modèle : pour donner sa propre vidéo à une seule collection, il vous faut un modèle alternatif ou un métachamp de collection. Les cartes produit suivent une autre logique : les deux thèmes y affichent une image fixe de la vidéo produit, jamais la vidéo elle-même.

Nous avons lu les modèles de collection dans le code des deux thèmes de référence de Shopify, Dawn 16.0.0 et Horizon 4.2.0, le 1er octobre 2026. Dans Horizon, l'en-tête de collection lit nativement une vidéo de fond. La Collection banner de Dawn n'accepte que l'image de la collection, d'où les fils de forum qui renvoient sans cesse les marchands sous Dawn vers le fichier Liquid de la bannière.

Les emplacements vidéo sur une page collection Shopify

Une page collection offre quatre emplacements pour la vidéo : l'en-tête, une section au-dessus ou en dessous de la grille de produits, les cartes produit, et un bloc d'application comme une barre de stories.

L'acheteur voit l'en-tête en premier, et la vidéo qu'il contient alourdit la page à chaque visite. Une section Vidéo plus bas ne charge qu'une image de couverture jusqu'au clic. La grille est l'emplacement que votre thème prend le moins en charge.

Ajouter une vidéo dans l'en-tête de la page collection

Horizon : la vidéo de fond de la section Heading

Le modèle de collection d'Horizon s'ouvre sur une section Heading qui affiche le titre et la description de la collection. Sélectionnez-la, descendez jusqu'à Appearance et réglez Background media sur Video. Choisissez votre fichier, puis la Video position : Cover remplit la section et rogne les bords, Contain montre l'image entière.

Dans le code, la balise vidéo porte autoplay, muted, loop et playsinline, sans commandes. L'image d'aperçu de la vidéo s'affiche d'abord, avec une priorité de chargement élevée quand la section Heading est la première de la page, puis le script charge la vidéo aussitôt. Votre titre et votre description s'affichent par-dessus : éloignez le sujet du texte, ou activez Background overlay pour le contraste.

La section Heading accepte aussi des blocs. Ajoutez plutôt un bloc Video pour une vidéo à lancer d'un clic avec commandes (elle démarre sans le son, et l'acheteur peut activer le son), ou pour une vidéo placée à côté du titre et non derrière.

Dawn : une section Vidéo au-dessus de la grille de produits

La Collection banner de Dawn propose deux cases à cocher, Description et Image, et l'image est l'image principale de la collection. Aucune option vidéo. La section Vidéo de Dawn, elle, peut s'ajouter à n'importe quel modèle, en dehors des groupes d'en-tête et de pied de page. Sur le modèle de collection, cliquez sur Ajouter une section, choisissez Vidéo, puis faites-la glisser entre la bannière et la Product grid.

La section affiche une image de couverture avec un bouton de lecture, puis lit la vidéo avec le son et les commandes après le clic. Notre guide de la vidéo sur la page d'accueil Shopify détaille ses réglages, et explique pourquoi une section à lancer d'un clic est l'option la plus légère.

Tout thème : Liquid personnalisé

Une section Liquid personnalisé contenant une balise <video> et un lien vers Fichiers de Shopify se lance automatiquement dans n'importe quel thème, Dawn compris. Le code et ses attributs figurent dans notre guide pour ajouter une vidéo MP4 sur Shopify sans YouTube. Une limite : vous saisissez le lien dans la section, donc toutes les collections qui utilisent ce modèle lisent le même fichier.

Afficher une vidéo sur une seule collection

Les sections appartiennent au modèle, et chaque collection utilise le modèle par défaut tant que vous ne lui en attribuez pas un autre. Shopify vous offre deux façons de contourner cette limite, sans code.

Un modèle de collection alternatif

Dans l'éditeur de thème, ouvrez le menu déroulant des modèles, choisissez Collections, puis Créer un modèle. Nommez-le, basez-le sur le modèle par défaut et ajoutez votre vidéo. Allez ensuite dans Produits > Collections, ouvrez la collection et choisissez le nouveau modèle sous Modèle de thème. La documentation de Shopify sur les modèles autorise jusqu'à 1 000 modèles par thème. Cette méthode convient à une ou deux collections, car chaque modification de mise en page ultérieure devra être refaite dans chaque modèle.

Un métachamp de collection connecté à la vidéo

Pour une vidéo différente sur de nombreuses collections, stockez la vidéo sur la collection elle-même. Ouvrez n'importe quelle collection, trouvez Métachamps, cliquez sur Ajouter une définition, nommez-la (par exemple « Vidéo d'en-tête ») et choisissez le type Fichier en acceptant les vidéos. Les types de métachamps de Shopify acceptent les MP4 et MOV de moins de 1 Go et de moins de dix minutes, et une valeur de type Fichier « s'affiche comme une vidéo dans les réglages de thème de type vidéo » (will render as a video when used in video-type theme settings). Importez une vidéo sur chaque collection qui en a besoin.

De retour dans le modèle de collection, cliquez sur l'icône de source dynamique à côté du réglage vidéo et sélectionnez le métachamp. La référence de Shopify sur les sources dynamiques rend les métachamps de la collection disponibles pour les sections du modèle de collection, et permet de connecter un réglage vidéo à un métachamp de type fichier qui accepte les vidéos.

Prévoyez le cas des collections sans vidéo. Dans Horizon, une vidéo de fond vide affiche une illustration de remplacement. Dans Dawn, une vidéo vide se rabat sur le lien YouTube de la section, prérempli avec une vidéo d'exemple quand vous ajoutez la section. La configuration propre combine les deux méthodes : un modèle alternatif qui contient la section connectée, attribué uniquement aux collections qui ont une vidéo.

La vidéo dans la grille de produits

Le premier média d'un produit sert d'image à sa carte sur les pages collections. Quand ce média est une vidéo, Dawn et Horizon affichent tous deux son image d'aperçu, une image fixe. Show second image on hover (un réglage de la Product grid dans Dawn, dans les réglages Product cards du thème dans Horizon) fait apparaître le deuxième média, lui aussi en image fixe. Aucun des deux thèmes ne lit de vidéo dans une carte, et la section Collection d'Horizon n'accepte aucun bloc en dehors des filtres et de la carte produit : il n'existe donc pas non plus de vignette vidéo native.

Pour lire des vidéos dans les cartes, il faut modifier le code de la carte produit ou passer par une application. Calculez d'abord le coût : même au débit MP4 480p de Shopify, de 0,9 à 1,5 Mbit/s, une boucle de 5 secondes pèse de 0,6 à 0,9 Mo. Dawn affiche par défaut 16 produits par page, et Horizon 24.

Les recommandations de Shopify sur les médias pour les développeurs de thèmes couvrent ce cas : « If more than one media element is displaying at a time, then all media should be inactive by default, requiring the customer to initiate activity » (si plusieurs médias s'affichent en même temps, tous doivent être inactifs par défaut et attendre une action du client). Une grille de cartes en boucle fait l'inverse. Si vous voulez du mouvement dans la grille, limitez-le à quelques cartes, ou laissez les acheteurs ouvrir de courts clips à la demande avec un carrousel vidéo placé au-dessus de la grille. Pour la fiche produit elle-même, notre guide pour ajouter une vidéo sur une fiche produit Shopify couvre la galerie.

Comparatif Dawn et Horizon sur les pages collections

Les thèmes d'autres éditeurs nomment ces sections autrement : consultez la documentation de votre thème avant de modifier le code. Les règles de lecture automatique des navigateurs sont les mêmes sur toutes les pages : une vidéo ne se lance seule que si elle est muette, comme l'explique notre guide de la vidéo sur la page d'accueil avec les règles de Chrome et de Safari. Exportez une boucle d'en-tête sans piste audio et aux dimensions recommandées par Shopify.

Des stories sur les pages collections

Une rangée de bulles de stories sous l'en-tête de collection regroupe plusieurs clips courts : l'acheteur touche une bulle et les clips défilent en plein écran, l'un après l'autre. Ce format convient à une collection qui demande une explication, par exemple comment choisir sa taille dans la gamme ou ce qui est nouveau cette semaine. Notre guide pour ajouter des stories façon Instagram sur Shopify indique quoi filmer pour chaque emplacement.

Storiq ajoute cette barre de stories avec un bloc d'application de thème, sans toucher au code du thème, et les clips restent dans votre bibliothèque Fichiers de Shopify. Les pages collections sont un emplacement payant. Le forfait Starter, à 9,99 $ par mois avec 7 jours d'essai gratuit, ajoute les emplacements sur la page d'accueil et les pages collections ainsi que des règles de ciblage par collection, qui incluent ou excluent des collections pour qu'une story ne s'affiche qu'au bon endroit. Starter ajoute aussi les cartes produit sur les slides, avec le prix lu en direct dans votre catalogue. Le forfait Free ne couvre que les stories sur les fiches produits.