Tutorials

Wie du eine Video-Carousel-Slider-Section in Shopify hinzufügst [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial, wie du im Jahr 2025 eine Video-Carousel-Sektion zu deinem Shopify-Store hinzufügst – von der einfachen App-Lösung bis zur professionellen (kostenlosen) Code-Variante.

Video-Content ist 2025 der wichtigste Treiber für Conversions. Ein Video-Carousel ermöglicht es dir, Produkte in Aktion zu zeigen, Testimonials zu präsentieren oder Markenstorys zu erzählen, ohne die Ladezeit deiner Seite durch zu viele Einzelvideos zu sprengen.

Es gibt drei Hauptwege, dies umzusetzen:

  1. Über die Theme-Einstellungen (falls dein Theme es unterstützt)
  2. Mit einer Shopify App (Am einfachsten, oft kostenpflichtig)
  3. Mit manuellem Liquid-Code (Kostenlos und am schnellsten für die Performance)

Methode 1: Die "No-Code" App-Lösung (Schnell & Einfach)

Wenn du keine technischen Kenntnisse hast und Funktionen wie "Shoppable Videos" (Produkte direkt im Video verlinken) möchtest, ist eine App die beste Wahl.

Empfohlene Apps 2025:

  • Vify Video Reviews: Perfekt für Testimonials im Slider-Format.
  • Tolstoy Interactive Video: Ideal für interaktive Video-Feeds (TikTok-Style).
  • Mint Studio Video Slider: Eine einfache, dedizierte Slider-Lösung.

Schritte:

  1. Geh in den Shopify App Store und installiere die App deiner Wahl.
  2. Lade deine Videos hoch oder verknüpfe sie von TikTok/Instagram.
  3. Nutze den App-Editor, um das Design (Farben, Pfeile, Autoplay) anzupassen.
  4. Füge im Shopify Theme-Editor (Customizer) den neuen "App Block" an der gewünschten Stelle hinzu.

Methode 2: Die "Pro" Lösung mit Custom Liquid (Kostenlos & Schnell)

Diese Methode ist ideal für die Performance deines Shops, da sie keine schweren Apps laden muss. Wir nutzen die "Custom Liquid" Sektion von Shopify OS 2.0.

Schritt 1: Videos hochladen

Bevor du den Code nutzt, musst du deine Videos in Shopify speichern:

  1. Gehe zu Content > Dateien.
  2. Lade deine Video-Dateien hoch (MP4, max. 20MB empfohlen für schnelle Ladezeiten).
  3. Kopiere die URL der Videos.

Schritt 2: Custom Liquid Sektion hinzufügen

  1. Gehe zu Onlineshop > Themes > Anpassen.
  2. Klicke auf Abschnitt hinzufügen und wähle Custom Liquid (Benutzerdefiniertes Liquid).
  3. Kopiere den folgenden Code-Block und füge ihn dort ein:
<style>
  .video-carousel-container {
    padding: 40px 0;
    overflow: hidden;
    background-color: #f9f9f9; /* Hintergrundfarbe anpassen */
  }
  .video-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 0 20px;
    scrollbar-width: none; /* Versteckt Scrollbar in Firefox */
  }
  .video-slider::-webkit-scrollbar {
    display: none; /* Versteckt Scrollbar in Chrome/Safari */
  }
  .video-item {
    flex: 0 0 80%; /* Breite des Videos auf Mobile */
    scroll-snap-align: center;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 9 / 16; /* Portrait-Format wie TikTok/Reels */
  }
  @media (min-width: 768px) {
    .video-item {
      flex: 0 0 300px; /* Breite des Videos auf Desktop */
    }
  }
  .video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<div class="video-carousel-container">
  <h2 style="text-align: center;">Unsere Highlights</h2> <!-- Überschrift hier ändern -->
  <div class="video-slider">

    <!-- Video 1 -->
    <div class="video-item">
      <video playsinline autoplay muted loop poster="DEIN_VORSCHAU_BILD_URL">
        <source src="HIER_VIDEO_URL_1_EINFÜGEN" type="video/mp4">
      </video>
    </div>

    <!-- Video 2 -->
    <div class="video-item">
      <video playsinline autoplay muted loop>
        <source src="HIER_VIDEO_URL_2_EINFÜGEN" type="video/mp4">
      </video>
    </div>

    <!-- Video 3 -->
    <div class="video-item">
      <video playsinline autoplay muted loop>
        <source src="HIER_VIDEO_URL_3_EINFÜGEN" type="video/mp4">
      </video>
    </div>

    <!-- Füge hier weitere Videos nach dem gleichen Muster hinzu -->

  </div>
</div>

Schritt 3: Anpassung

  • Ersetze HIER_VIDEO_URL_X_EINFÜGEN mit den Links aus deinen Shopify-Dateien.
  • Autoplay: Der Code ist auf Autoplay und "Muted" (Stumm) eingestellt, da Browser Videos mit Ton oft blockieren, wenn sie automatisch starten.
  • Format: Der Code nutzt aspect-ratio: 9 / 16, was perfekt für Handy-Videos (Reels) ist. Für Querformat ändere es auf 16 / 9.

Profi-Tipps für 2025:

  1. Video-Größe optimieren: Nutze Tools wie Handbrake oder Clideo, um deine MP4-Dateien zu komprimieren. Ein Video sollte idealerweise unter 2-3 MB groß sein, wenn mehrere gleichzeitig geladen werden.
  2. Poster-Bilder nutzen: Füge ein poster="Bild-URL" Attribut im <video> Tag hinzu. Das Bild wird geladen, während das Video noch puffert. Das verbessert die gefühlte Ladezeit (LCP).
  3. Mobile First: Die meisten Kunden shoppen am Handy. Der oben bereitgestellte Code nutzt "Scroll Snapping", was sich auf dem Smartphone sehr natürlich anfühlt (wie in der Instagram-App).
  4. Wichtige SEO-Regel: Füge im Video-Tag immer playsinline hinzu, damit das Video auf dem iPhone nicht automatisch in den Vollbildmodus springt.

Fazit

Für maximale Flexibilität und Profi-Features wie "Klickbare Produkte im Video" greif zu einer App. Wenn du nur eine schicke, schnelle Galerie deiner besten Momente willst, ist die Custom Liquid Methode die performanteste Wahl für deinen Shopify Store im Jahr 2025.

0