Shopify Video einbinden: Produktseite, Startseite, Slideshow (Anleitung 2027)

Du willst ein Video in deinen Shopify Shop einbinden und stehst vor drei Optionen, die alle "Video" heißen, aber an unterschiedlichen Stellen landen. Die kurze Antwort: Produktvideos lädst du direkt in die Medien des Produkts, Startseiten-Videos kommen über die Video-Section im Theme-Editor, und für die Slideshow brauchst du je nach Theme einen Umweg, weil Dawn dort nur Bilder erlaubt.

Diese Anleitung geht alle drei Wege durch, mit den aktuellen Limits, den Stolperfallen bei Safari und iPhone und der Frage, wann ein shoppable Widget die bessere Lösung ist als die Bordmittel. Wenn du vorher wissen willst, welches Format und welche Größe dein Video überhaupt haben sollte, lies zuerst den Beitrag zu Produktvideos im Shopify Shop.

Die drei Wege auf einen Blick

Shopify speichert Videos an drei Orten, und der Ort bestimmt, wo das Video später erscheint. Ein Video in den Dateien taucht nie in einer Produktgalerie auf, und ein Produktvideo lässt sich nicht einfach auf die Startseite ziehen.

Die ersten drei Wege sind kostenlos und in jedem Shopify-Plan enthalten. Sie zeigen ein Video, mehr nicht. Sobald Kunden aus dem Video heraus ein Produkt in den Warenkorb legen sollen, kommst du um einen App-Block nicht herum. Dazu weiter unten mehr.

Video auf der Produktseite einbinden

Das Produktvideo gehört in das Medienraster des Produkts. Das ist die einzige Stelle, aus der die Produktgalerie deines Themes liest.

So gehst du vor:

1. Öffne im Admin unter Produkte das gewünschte Produkt.
2. Ziehe die Videodatei in das Medienraster, oder klicke auf "Medien hinzufügen" und wähle die Datei aus.
3. Warte, bis die Verarbeitung abgeschlossen ist. Shopify zeigt in dieser Zeit ein kleines Verarbeitungssymbol auf dem Thumbnail.
4. Ziehe das Video an Position zwei oder drei. Position eins bleibt besser einem sauberen Produktfoto vorbehalten, weil dieses Bild auch auf Kollektionsseiten und in Social-Previews erscheint.
5. Speichere und prüfe die Produktseite in einem privaten Browserfenster.

Alternativ kannst du über "Medien von URL hinzufügen" einen YouTube- oder Vimeo-Link einfügen. Das Video muss dort öffentlich oder nicht gelistet sein und Einbettung erlauben, sonst bleibt der Rahmen schwarz.

Wenn das Video nach dem Hochladen nicht erscheint, liegt es fast immer an einem von sieben Gründen, von der laufenden Verarbeitung bis zu älteren Themes, die nur über Bilder statt über Medien iterieren. Der Beitrag Shopify product video not showing geht sie der Reihe nach durch.

Video auf der Startseite: die Video-Section

Für die Startseite nutzt du die Video-Section, die Dawn, Horizon und alle Online Store 2.0 Themes mitbringen. Sie liegt als eigener Block auf der Seite, nicht in einer Galerie, und das ist für einen Hero-Bereich meist genau richtig.

1. Gehe zu Onlineshop, Themes und klicke bei deinem aktiven Theme auf "Anpassen".
2. Wähle in der linken Leiste die Startseite und klicke auf "Section hinzufügen".
3. Wähle "Video" aus der Liste.
4. Lade in den Section-Einstellungen eine Datei hoch oder wähle eine aus deinen Dateien. Alternativ fügst du eine YouTube- oder Vimeo-URL ein.
5. Setze ein Titelbild, das erscheint, bevor das Video geladen ist, und entscheide, ob das Video in voller Breite laufen soll.
6. Ziehe die Section an die gewünschte Position und speichere.

Die Video-Section lädt das Video erst, wenn es in den sichtbaren Bereich scrollt. Auf Mobilgeräten startet ein Shopify-gehostetes Video stumm und im Loop, wenn du die entsprechende Option aktivierst. Ein YouTube-Video startet nie automatisch, weil der eingebettete Player das nicht zulässt.

Dieselbe Section funktioniert auf Kollektionsseiten, in Blogartikeln und auf statischen Seiten. In Horizon heißt sie ebenfalls Video, hat aber ein paar zusätzliche Optionen für Rahmen und Abstände, die der Beitrag zur Horizon Video-Section im Detail zeigt.

Video in der Slideshow

Hier wird es theme-abhängig, und hier entsteht der meiste Frust. Die Slideshow-Section in Dawn akzeptiert ausschließlich Bild-Slides. Es gibt kein Feld für Video, und es gibt auch keinen versteckten Schalter dafür.

Du hast drei Möglichkeiten:

• Video-Section direkt unter die Slideshow legen. Der Hero bleibt ein Bild, das Video folgt beim ersten Scrollen. Für viele Shops ist das die sauberste Lösung, weil ein statisches Hero-Bild schneller lädt als ein Video und der Largest Contentful Paint nicht leidet.
• Ein Theme mit Video-Slides nutzen. Einige kostenpflichtige Themes im Shopify Theme Store bieten Video als Slide-Typ an. Prüfe vor dem Kauf die Blockeinstellungen in der Theme-Vorschau, denn "Video-Unterstützung" in der Beschreibung heißt nicht immer Video in der Slideshow.
• Ein Karussell-Widget einer App. Ein App-Block mit Karussell-Layout zeigt mehrere Videos nebeneinander, lässt sich an die Stelle der Slideshow setzen und trägt bei Bedarf Produkt-Tags. Das ist die Variante, wenn du Reels oder Kundenvideos statt eines einzelnen Markenfilms zeigen willst.

Was du vermeiden solltest: ein GIF als Slide. Es sieht auf den ersten Blick wie ein Video aus, wiegt aber oft mehr als die MP4-Datei, läuft ruckelig und lässt sich nicht stummschalten, weil es ohnehin keinen Ton hat, aber auch keine Kontrolle über Wiedergabe bietet.

Autoplay, Safari und iPhone

Ein Video, das im Chrome auf dem Desktop läuft und auf dem iPhone als Standbild hängt, ist das häufigste Support-Thema nach dem Einbinden. Die Ursache ist fast immer dieselbe.

Safari auf iOS erlaubt Autoplay nur, wenn drei Bedingungen zusammenkommen: Die Datei ist ein H.264-kodiertes MP4, das Video-Element hat das Attribut muted, und es hat playsinline. Fehlt playsinline, öffnet iOS den Vollbildplayer oder spielt gar nicht. Fehlt muted, blockiert Safari den Start komplett.

Shopifys eigene Video-Section setzt diese Attribute korrekt, wenn du die Autoplay-Option aktivierst. Bei eigenem Liquid-Code musst du sie selbst mitgeben:

```liquid

{{ section.settings.video | video_tag: autoplay: true, muted: true, loop: true, playsinline: true, controls: false, preload: 'none' }}

```

Zwei Dinge lassen sich nicht umgehen: Im Energiesparmodus pausiert iOS jedes Autoplay-Video, und eine HEVC- oder ProRes-Datei aus der iPhone-Kamera muss vor dem Upload nach H.264 konvertiert werden, sonst spielt sie in älteren Browsern nicht. Der Beitrag zu Autoplay-Problemen auf Mobilgeräten hat die vollständige Fehlersuche.

Ladezeit: was ein Video mit dem Speed Score macht

Ein Video ist die schwerste Ressource auf deiner Seite, und die Frage ist nicht ob, sondern wann es lädt. Ein Video, das im Head der Seite mit preload="auto" steckt, zieht auf einer Mobilverbindung mehrere Sekunden Ladezeit und drückt den Shopify Speed Score.

Drei Regeln halten den Schaden klein:

• Lazy Loading. Das Video lädt erst, wenn es in den Viewport scrollt. Die Video-Section macht das von sich aus, ein Widget sollte es dokumentiert haben.
• Titelbild setzen. Ein komprimiertes JPG oder WebP als Poster wird sofort angezeigt und ist das, was Google als Largest Contentful Paint misst, nicht das Video dahinter.
• Nicht mehr als ein Autoplay-Video im ersten Viewport. Zwei parallele Streams auf einem Mittelklasse-Android-Gerät ruckeln, egal wie gut sie komprimiert sind.

Ob ein Video-Widget den Shop messbar bremst, hängt davon ab, ob es das Rendering blockiert oder asynchron nachlädt. Der Beitrag Does a video widget slow down Shopify zeigt die Messwerte für beide Fälle.

Shoppable statt nur sichtbar

Alle drei Bordmittel haben dieselbe Grenze: Das Video ist zu sehen, aber nicht zu kaufen. Ein Kunde, der im Video ein Produkt entdeckt, muss den Player verlassen, die Seite absuchen und das Produkt selbst finden. Auf der Produktseite ist das verschmerzbar, auf der Startseite oder in einem Reel mit drei Produkten nicht.

Ein shoppable Widget löst das über Produkt-Tags im Video. Ein Tipp auf das Tag öffnet das Produkt mit Preis und Variantenauswahl direkt im Player, der Add-to-Cart passiert ohne Seitenwechsel. Technisch ist das ein App-Block, den du wie jede Section unter Onlineshop, Themes, Anpassen platzierst. Er funktioniert in Dawn, Horizon und in Custom-Themes gleich, weil er nicht in den Galerie-Code eingreift.

Was du dabei beachten solltest:

• Import statt Neuupload. Wenn deine Videos schon als Instagram Reels oder auf TikTok liegen, sollte das Widget sie direkt importieren, damit du nicht jede Datei einzeln herunterlädst und wieder hochlädst.
• Layout zur Stelle passend. Ein Inline-Block sitzt fest auf der Produktseite, ein Stories-Layout passt in den Header, ein Karussell ersetzt die Slideshow, ein Overlay schwebt als kleines Fenster am Rand. Nicht jede Stelle verträgt jedes Layout.
• Analytics pro Video. Du willst wissen, welches Reel Add-to-Carts bringt und welches nur Views sammelt. Ohne diese Zahl produzierst du blind weiter.
• Mehrsprachige Widget-Texte. Wenn du über Shopify Markets nach Österreich, in die Schweiz oder darüber hinaus verkaufst, müssen Button- und Hinweistexte im Widget die Sprache des Marktes sprechen, sonst steht auf einer französischen Storefront "In den Warenkorb".

Was Shoppable Video genau ist und wie der Kaufprozess aus dem Video technisch abläuft, erklärt der Beitrag Shoppable Videos: Was ist das. Für die englische Schritt-für-Schritt-Anleitung mit Screenshots siehe How to add shoppable video to Shopify.

Welcher Weg für welchen Shop

Ein kleiner Shop mit zehn Produkten und einem Markenfilm braucht keine App. Das Produktvideo in die Medien, den Markenfilm in die Video-Section auf der Startseite, fertig. Das kostet nichts und hält den Shop schnell.

Anders sieht es aus, sobald Reels und Kundenvideos regelmäßig entstehen und du sie nicht nur zeigen, sondern verkaufen willst. Dann bedeutet der Bordmittel-Weg, jedes Reel herunterzuladen, hochzuladen, an ein Produkt zu hängen und trotzdem keinen Kauf aus dem Video zu bekommen. Ein Widget, das Reels und TikToks importiert, mit Produkten taggt und pro Video den zugeordneten Umsatz ausweist, spart diese Arbeit und macht aus dem Video einen Verkaufskanal statt einer Deko.

Ein Free-Plan reicht, um das an fünf Videos auszuprobieren, bevor du entscheidest, ob es sich für den ganzen Katalog lohnt.