Tutorial

Shopify Tutorial 2025: Videos mit Autoplay hinzufügen (Schritt-für-Schritt)

Melden

Hier ist ein aktuelles Tutorial für das Jahr 2025, wie du Videos mit Autoplay-Funktion in deinen Shopify-Store einbindest.

Videos sind im E-Commerce 2025 wichtiger denn je, um Vertrauen aufzubauen und Produkte dynamisch zu präsentieren. Shopify hat die Integration in den letzten Updates stark vereinfacht.

In diesem Guide lernst du die drei besten Methoden kennen.

Wichtige Vorab-Regel für 2025:

Damit Autoplay in modernen Browsern (Chrome, Safari, Firefox) funktioniert, muss das Video stummgeschaltet sein (muted). Browser blockieren automatisch jedes Video, das ungefragt mit Ton startet.

Methode 1: Die Standard-Video-Sektion (Der einfachste Weg)

Die meisten modernen Shopify-Themes (wie Dawn, Sense oder Refresh) haben eine eingebaute Video-Sektion.

  1. Video hochladen:
    • Gehe in deinem Shopify-Adminbereich auf Content > Dateien (Files).
    • Klicke auf Dateien hochladen und wähle dein Video aus (Format: MP4, 1080p, optimierte Dateigröße).
    • Kopiere nach dem Upload den Link zur Datei (Kettensymbol).
  2. Theme anpassen:
    • Gehe zu Onlineshop > Themes > Anpassen (Customize).
    • Klicke links auf Abschnitt hinzufügen (Add section) und wähle Video.
  3. Einstellungen anpassen:
    • Wähle als Video-Quelle „Eigene Datei“ (oder füge den kopierten Link ein).
    • Setze den Haken bei „In Schleife abspielen“ (Loop).
    • Damit das Video automatisch startet: Wähle (falls vorhanden) die Option „Video automatisch abspielen“.
    • Hinweis: Wenn du ein YouTube- oder Vimeo-Link nutzt, funktioniert Autoplay oft nur eingeschränkt oder zeigt am Ende Werbevorschläge. Eigene Dateien sind 2025 die bessere Wahl.

Methode 2: Autoplay in Produkt-Medien

Wenn das Video direkt in der Produktgalerie automatisch starten soll:

  1. Gehe zu Produkte und wähle ein Produkt aus.
  2. Lade das Video unter Medien hoch.
  3. Klicke auf das hochgeladene Video.
  4. Viele aktuelle Themes bieten hier in der Seitenleiste eine Option „Autoplay aktivieren“.
  5. Sollte dein Theme das nicht nativ unterstützen, musst du die main-product.liquid Datei bearbeiten (nur für Fortgeschrittene) oder Methode 3 nutzen.

Methode 3: Custom Liquid (Für volle Kontrolle & Background-Videos)

Wenn du ein Video als Hintergrund oder an einer speziellen Stelle ohne Player-Buttons und mit sicherem Autoplay einfügen willst, ist dies der beste Weg.

  1. Gehe im Theme-Editor auf Abschnitt hinzufügen und wähle Custom Liquid.
  2. Füge den folgenden Code ein:
<style>
  .video-container {
    width: 100%;
    line-height: 0;
  }
  .video-container video {
    width: 100%;
    height: auto;
  }
</style>

<div class="video-container">
  <video autoplay muted loop playsinline preload="metadata">
    <source src="DEIN_VIDEO_LINK_HIER.mp4" type="video/mp4">
    Dein Browser unterstützt keine Videos.
  </video>
</div>
  1. Wichtig: Ersetze DEIN_VIDEO_LINK_HIER.mp4 mit dem Link, den du zuvor unter Content > Dateien hochgeladen hast.
  2. Warum dieser Code?
    • autoplay: Startet sofort.
    • muted: Zwingend erforderlich für Autoplay.
    • loop: Endlosschleife.
    • playsinline: Wichtig für iPhones (iOS), damit das Video nicht automatisch im Vollbildmodus öffnet.

Profi-Tipps für 2025:

  1. Dateigröße optimieren: Ein Video sollte idealerweise unter 10 MB groß sein. Nutze Tools wie Handbrake oder Clideo, um die Datei zu komprimieren, ohne die Qualität zu verlieren. Lange Ladezeiten schaden deinem Google-Ranking (SEO).
  2. Das richtige Format: Nutze .mp4 (H.264), da dies von allen Geräten unterstützt wird.
  3. Mobile Ansicht prüfen: Überprüfe im Theme-Editor immer die mobile Ansicht. Videos, die im Desktop-Format (16:9) super aussehen, können auf dem Handy sehr klein wirken. Erwäge für mobile Sektionen quadratische (1:1) oder vertikale (9:16) Videos.
  4. Barrierefreiheit: Füge (falls möglich) im HTML-Code ein title-Attribut oder ein alt-Tag für Screenreader hinzu.

Zusammenfassung

Für die meisten Shops ist Methode 1 mit einer nativ hochgeladenen Datei am besten. Wenn du jedoch ein nahtloses Hintergrund-Video ohne sichtbare Bedienelemente möchtest, ist Methode 3 (Custom Liquid) die professionellste Lösung für 2025.

0