Tutorials

How to autoplay video on product page Shopify [2025 Easy Guide]

Melden

Hier ist ein aktueller Schritt-für-Schritt-Guide für das Jahr 2025, wie du Videos auf deinen Shopify-Produktseiten automatisch abspielen lässt.

Videos sind das mächtigste Werkzeug, um die Conversion-Rate zu steigern. Im Jahr 2025 unterstützen fast alle modernen Shopify-Themes (wie Dawn, Sense oder Prestige) Video-Autoplay nativ.

In diesem Tutorial zeige ich dir die zwei effektivsten Wege: Über die Standard-Produkteinstellungen und per individuellem Code.

Wichtige Vorab-Info: Die goldene Regel für Autoplay

Damit Browser (Chrome, Safari, Firefox) ein Video automatisch abspielen, muss das Video stummgeschaltet (muted) sein. Ein Video mit Ton wird niemals automatisch starten – das ist eine Sicherheitsfunktion der Browser.

Methode 1: Über die nativen Shopify Theme-Einstellungen (Der einfachste Weg)

Die meisten aktuellen "Online Store 2.0" Themes haben diese Funktion eingebaut.

  1. Video hochladen:
    • Gehe in deinem Shopify-Admin zu Produkte.
    • Wähle ein Produkt aus.
    • Lade unter Medien deine Video-Datei hoch (MP4 wird empfohlen).
  2. Theme-Editor öffnen:
    • Gehe zu Onlineshop > Themes.
    • Klicke bei deinem aktuellen Theme auf Anpassen (Customize).
  3. Produktseite auswählen:
    • Wähle oben im Dropdown-Menü Produkte > Standardprodukt.
  4. Medien-Einstellungen anpassen:
    • Klicke in der linken Seitenleiste auf den Abschnitt Produktinformationen oder direkt auf das Produktmedien/Galerie Element.
    • Suche in den Einstellungen rechts nach Optionen wie:
      • Video-Looping aktivieren (Video wiederholen).
      • Autoplay aktivieren.
    • Speichern nicht vergessen!

Methode 2: Custom Liquid (Für volle Kontrolle und Hintergrund-Videos)

Falls dein Theme kein natives Autoplay unterstützt oder du das Video an einer speziellen Stelle platzieren möchtest, nutzt du ein Custom Liquid Block.

  1. Video hochladen:
    • Gehe zu Inhalt > Dateien.
    • Lade dein Video hoch und kopiere den Link (URL) der Datei.
  2. Custom Liquid Block hinzufügen:
    • Gehe im Theme-Editor auf die Produktseite.
    • Klicke in der linken Leiste auf Abschnitt hinzufügen oder Block hinzufügen.
    • Wähle Custom Liquid.
  3. Code einfügen: Kopiere diesen Code in das Feld (ersetze den Link in den Anführungszeichen durch deinen Video-Link):
<video style="width: 100%; height: auto; display: block;" 
       autoplay 
       muted 
       loop 
       playsinline 
       poster="DEIN_VORSCHAU_BILD_URL">
  <source src="DEIN_VIDEO_LINK_HIER.mp4" type="video/mp4">
  Ihr Browser unterstützt kein Video-Tag.
</video>

Warum dieser Code funktioniert:

  • autoplay: Startet sofort.
  • muted: Zwingend erforderlich für Autoplay.
  • loop: Endlosschleife.
  • playsinline: Verhindert, dass das Video auf dem iPhone automatisch in den Vollbildmodus springt.

Methode 3: YouTube oder Vimeo Videos

Wenn du YouTube-Videos einbindest, musst du spezielle Parameter an die URL anhängen:

  1. Kopiere den Embed-Link von YouTube.
  2. Füge am Ende der Video-ID folgendes hinzu: ?autoplay=1&mute=1&playlist=VIDEO_ID&loop=1
    • Beispiel: https://www.youtube.com/embed/XXXXXX?autoplay=1&mute=1&playlist=XXXXXX&loop=1

Profi-Tipps für 2025:

  • Dateigröße: Halte deine Videos unter 10MB. Zu große Dateien verlangsamen den Pagespeed massiv, was dein Google-Ranking verschlechtert.
  • Format: Nutze das MP4-Format mit H.264 Kompression. Das ist der Standard für alle Browser.
  • Mobile First: Prüfe immer die mobile Ansicht. Ein riesiges Autoplay-Video kann auf dem Handy das gesamte Datenvolumen der Kunden fressen oder die Seite instabil machen.
  • Alternative (Poster Image): Hinterlege immer ein Startbild (Poster-Attribut), damit kein schwarzer Kasten zu sehen ist, während das Video lädt.

Fehlerbehebung: Warum spielt mein Video nicht ab?

  1. Energiesparmodus: Auf vielen Smartphones wird Autoplay im Energiesparmodus blockiert.
  2. Fehlendes "muted" Attribut: Prüfe, ob das Video wirklich auf stumm gestellt ist.
  3. Browser-Cache: Leere deinen Cache oder teste die Seite im Inkognito-Modus.

Mit diesen Schritten hast du in wenigen Minuten ein professionelles Autoplay-Video auf deiner Shopify-Produktseite!

0