Ajouter un carrousel vidéo sur Shopify : section du thème, code ou application

Pour ajouter un carrousel vidéo sur Shopify, commencez par regarder votre thème. Dans Horizon, cliquez sur Ajouter une section, choisissez Carousel et placez un bloc Vidéo dans chaque Card : ni code ni application. Dawn n'a aucune section qui fait défiler des vidéos : une boutique sous Dawn a donc besoin d'une section sur mesure (une soixantaine de lignes de Liquid, CSS et JavaScript) ou d'une application de carrousel du Shopify App Store.

Nous avons lu le code de Dawn 16.0.0 et d'Horizon 4.2.0, ainsi que les fiches App Store de cinq applications de carrousel, le 1er octobre 2026. Les méthodes diffèrent surtout par ce qu'elles chargent avec la page : avec un carrousel où chaque clip se lance seul, le navigateur télécharge tous les clips, même ceux hors de l'écran, alors qu'un carrousel à lancer d'un clic ne charge qu'une image de couverture par carte.

Les options pour un carrousel vidéo Shopify

Partez de clips MP4 verticaux importés dans Contenu > Fichiers ; notre page sur la taille et le format des vidéos Shopify liste les limites et les réglages d'export. Pour une seule vidéo sur la page d'accueil, comme un fond de hero, consultez notre guide pour ajouter une vidéo sur la page d'accueil Shopify.

Votre thème a-t-il une section carrousel vidéo ?

Horizon : la section Carousel

Horizon propose une section nommée Carousel, rangée sous Storytelling dans la liste des sections, avec quatre blocs Card par défaut. Une Card accepte un bloc Vidéo, et la Card elle-même a un réglage Background media (média de fond) avec une option Vidéo. Une Card peut aussi contenir un bloc Product card (carte produit), qui affiche le produit à côté du clip. Les réglages de la section sont Columns (de 1 à 8 colonnes sur ordinateur), Mobile columns (1 ou 2) et le style des flèches. Sur téléphone, la rangée défile au doigt et chaque carte se cale en place.

Pour construire un carrousel vidéo avec cette section :

1. Importez les clips dans Contenu > Fichiers.
2. Allez dans Boutique en ligne > Thèmes > Personnaliser, cliquez sur Ajouter une section et choisissez Carousel.
3. Dans chaque Card, supprimez le bloc Image, cliquez sur Ajouter un bloc, choisissez Vidéo et sélectionnez le clip.
4. Cliquez sur Enregistrer.

Les deux options vidéo se comportent différemment. Un bloc Vidéo avec Autoplay décoché, son réglage par défaut, affiche l'image de couverture du clip et un bouton de lecture, et la vidéo ne se charge qu'à l'appui. Elle joue alors sans le son, avec les commandes, et l'acheteur peut activer le son. La vidéo de fond d'une Card joue sans le son et en boucle, sans commandes, et le code d'Horizon commence à charger le fichier dès l'ouverture de la page, pour chaque carte. La référence MDN de l'élément HTML video en donne la raison : l'attribut autoplay a priorité sur preload. Aux débits 720p de Shopify, quatre clips de 15 secondes pèsent de 12,0 à 33,6 Mo s'ils jouent jusqu'au bout.

Dawn : aucun slider vidéo

Dawn 16.0.0 n'a aucune section qui fait défiler des vidéos. Slideshow (diaporama), Multicolumn (multicolonne) et Image banner (bannière d'image) n'acceptent que des images, et le bloc Vidéo de la section Collage accepte des liens YouTube ou Vimeo, ouverts dans une fenêtre contextuelle. Dans Dawn, le seul défilement vidéo natif est la galerie produit : sur téléphone, c'est un slider, et une vidéo ajoutée comme média produit défile donc avec les photos. Notre guide pour ajouter une vidéo sur une fiche produit Shopify détaille cette méthode.

Les thèmes d'autres éditeurs diffèrent : cherchez « video » et « slider » dans leur documentation avant d'écrire du code.

Le code d'un carrousel vidéo Shopify : une section sur mesure

Une section sur mesure fonctionne dans n'importe quel thème. D'après le guide de Shopify sur la modification du code d'un thème, vous ne pouvez modifier le code d'un thème payant qu'après l'avoir acheté, et si vos modifications de code sont incompatibles avec une mise à jour du thème, Shopify les supprime toutes dans la copie mise à jour. Dupliquez d'abord le thème et gardez une copie du fichier.

1. Allez dans Boutique en ligne > Thèmes, cliquez sur le bouton ... à côté de votre thème, puis sur Modifier le code (Edit code).
2. Faites un clic droit sur le dossier sections, choisissez Nouveau fichier (New file) et nommez-le video-carousel.liquid.
3. Collez le code ci-dessous et enregistrez.
4. Dans l'éditeur de thème, ajoutez la section Video carousel, puis un bloc Clip par vidéo, avec son fichier et, si vous le souhaitez, son produit.

<div class="vc" id="vc-{{ section.id }}">
  {%- for block in section.blocks -%}
    {%- assign clip = block.settings.video -%}
    {%- assign src = '' -%}
    {%- assign best = 0 -%}
    {%- for s in clip.sources -%}
      {%- if s.format == 'mp4' and s.width <= 720 and s.width > best -%}
        {%- assign src = s.url -%}
        {%- assign best = s.width -%}
      {%- endif -%}
    {%- endfor -%}
    <figure class="vc__item" {{ block.shopify_attributes }}>
      {%- if src != '' -%}
        <video muted loop playsinline preload="none"
          poster="{{ clip.preview_image | image_url: width: 540 }}">
          <source src="{{ src }}" type="video/mp4">
        </video>
      {%- endif -%}
      {%- assign p = block.settings.product -%}
      {%- if p -%}
        <a href="{{ p.url }}">{{ p.title }} <span>{{ p.price | money }}</span></a>
      {%- endif -%}
    </figure>
  {%- endfor -%}
</div>

<style>
  .vc { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; }
  .vc__item { flex: 0 0 min(70%, 280px); scroll-snap-align: start; margin: 0; }
  .vc video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; }
</style>

<script>
  (() => {
    const videos = document.querySelectorAll('#vc-{{ section.id }} video');
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
      videos.forEach((v) => (v.controls = true));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => (e.isIntersecting ? e.target.play().catch(() => {}) : e.target.pause()));
    }, { threshold: 0.6 });
    videos.forEach((v) => io.observe(v));
  })();
</script>

{% schema %}
{
  "name": "Video carousel",
  "blocks": [
    {
      "type": "clip",
      "name": "Clip",
      "settings": [
        { "type": "video", "id": "video", "label": "Video" },
        { "type": "product", "id": "product", "label": "Product shown" }
      ]
    }
  ],
  "presets": [{ "name": "Video carousel" }]
}
{% endschema %}

Rôle de chaque partie du code

• Le réglage video donne à chaque bloc un sélecteur alimenté par vos Fichiers, selon la référence des réglages de saisie de Shopify. Vous n'avez aucun lien à coller, et aucun lien ne casse quand vous remplacez un fichier.
• La boucle sur les sources choisit la version MP4 la plus large qui ne dépasse pas 720 pixels. Shopify encode plusieurs tailles de chaque fichier importé, et une carte de 280 pixels n'a pas besoin du fichier 1080p.
• preload="none" et l'image de couverture limitent le téléchargement : tant qu'un clip n'arrive pas à l'écran, le navigateur ne télécharge que son image de couverture. Le code ne contient aucun attribut autoplay, puisque autoplay passe avant preload.
• muted et playsinline permettent à un script de lancer la vidéo sans appui de l'acheteur, à l'intérieur de la page sur iPhone.
• Le script lance un clip dès que 60 % de sa surface est visible et le met en pause quand il sort de l'écran : un seul clip à la fois sur téléphone. Les acheteurs qui ont activé la réduction des animations sur leur appareil reçoivent les commandes de lecture à la place.
• Le lien produit affiche le titre et le prix en direct sous le clip, sans bouton d'ajout au panier.

Les applications de carrousel vidéo pour Shopify

Une application de carrousel ajoute son propre bloc, importe les clips et tague des produits sur chaque vidéo. Cinq applications mettent « video carousel » ou « video slider » dans le nom ou l'accroche de leur fiche (fiches lues le 1er octobre 2026) :

Application	Note (avis)	Forfait gratuit	Premier forfait payant	Tags produits
Moast Shoppable Video & UGC	5,0 (338)	Vues illimitées, 10 vidéos par widget	15 $/mois	Oui
Vizup Shoppable Video Carousel	5,0 (97)	Vues et tags produits illimités	19,99 $/mois	Oui
Spark UGC Video Carousel	4,8 (69)	500 vues/mois, toutes les fonctions	19 $/mois, vues illimitées	Oui
Video Carousel : Video Reels	5,0 (10)	300 vues/mois, imports illimités	5 $/mois, essai de 14 jours	Oui, plusieurs par vidéo
POWR: Video Slider & Carousel	4,8 (11)	Jusqu'à 4 diapositives vidéo	5,94 $/mois, 6 diapositives et lecture automatique	Non indiqué

Moast, Vizup et Spark portent le badge Built for Shopify. Spark importe les Reels et les TikToks en un clic. Video Carousel : Video Reels, de l'éditeur drilly, existe depuis novembre 2024. POWR lit les vidéos YouTube, Vimeo et TikTok et réserve la lecture automatique aux forfaits payants.

Les forfaits gratuits plafonnent des unités différentes. Notre comparatif de huit applications de vidéo shoppable détaille les grilles complètes, et le guide pour ajouter des Reels Instagram et des TikToks sur Shopify couvre l'import.

Sous le bouton d'ajout au panier ou sur la page d'accueil

Sur les fiches produits, l'emplacement voulu détermine la méthode. Dans Dawn et Horizon, la section d'informations produit accepte les blocs d'application : le carrousel d'une application peut donc se placer juste sous les boutons d'achat. Une section, qu'il s'agisse du Carousel d'Horizon ou de votre fichier sur mesure, se place sous l'ensemble de la section produit, c'est-à-dire, sur un téléphone, après la description. Dans notre analyse de 8 boutiques Shopify qui utilisent la vidéo shoppable, Sacheu affiche cinq clips verticaux sous son bouton d'ajout au panier avec Videowise.

Sur la page d'accueil, toutes les méthodes fonctionnent. Gardez un seul élément en lecture automatique par page : avec un hero en boucle au-dessus d'un carrousel en lecture automatique, chaque visite télécharge deux séries de fichiers vidéo.

Une barre de stories à la place d'un carrousel : dans quels cas

Storiq, notre application, n'a pas de carrousel. Elle ajoute une barre de stories avec un bloc d'application : des bulles rondes qui ouvrent un lecteur plein écran, où l'acheteur fait défiler d'un appui de courts clips verticaux tirés de votre bibliothèque de fichiers Shopify. Un produit tagué sur une slide affiche une carte avec son image, son titre et son prix lu en direct dans votre catalogue.

Une barre de stories convient aux clips à regarder dans l'ordre et en plein écran, comme un essayage, un tutoriel ou un lancement. Un carrousel convient mieux quand les clips doivent bouger sur la page avant tout appui, quand les acheteurs comparent beaucoup de clips côte à côte, ou quand vous voulez importer automatiquement vos Reels (Storiq n'a pas d'import : vous téléchargez le clip puis vous l'importez). Le forfait Free couvre 3 stories sur les fiches produits ; les emplacements sur la page d'accueil et les pages collections ainsi que les cartes produit viennent avec Starter, à 9,99 $ par mois avec 7 jours d'essai gratuit. Notre page sur les stories shoppables compare les deux formats plus en détail.