Videos in Shopware 6 einbinden

Warum solltest du Videos in Shopware 6 einbinden?

Laut einer Studie aus 2023 verbringen Nutzer im Internet rund 17h mit dem Ansehen von Videos (Quelle: Wyzowl). Für deine Kunden sind Videos also schon längst Normalität und viele erwarten, dass ihnen die Möglichkeit geboten wird, Informationen über Videos zu konsumieren. Das ist auch kein Wunder, denn unser Gehirn kann Informationen in Videos rund 60.000x schneller verarbeiten, als reinen Text (Quelle: Forbes). Zusätzlich können Videos ergänzende Informationen, wie Erklärungen oder Anwendungsbeispiele bieten und weitere Blickwinkel auf Produkte ermöglichen. Beschäftigen wir uns also damit, wie du Videos in Shopware 6 einbinden kannst.

Wie lassen sich Videos standardmäßig in Shopware 6 einbinden?

Standardmäßig bietet dir Shopware 6 die Möglichkeit Videos in Erlebniswelten (CMS Seiten) einzubinden. Hier kannst du dich entscheiden, ob du Videos von den Video-Plattformen YouTube oder Vimeo einbinden möchtest. Es ist durchaus sinnvoll Plattformen wie diese zu nutzen. Einerseits kannst du mit deinen Videos auch Nutzer außerhalb deines Shopware 6 Shops erreichen und diese als zusätzlichen Touchpoint nutzen. Außerdem sind die einbettbaren Video-Player dieser Plattformen bereits auf sämtliche Nutzer-Szenarien optimiert, beispielsweise für das Laden über mobile Daten mit kleineren Datenmengen.

Nur im Bereich Datenschutzrichtlinien können solche Video-Player zum Problem werden, da Anfragen an Server in den USA gesendet werden können. Um dieses Problem zu lösen, bringt Shopware 6 einen s.g. Content Blocker als Option mit. Ein Content Blocker blockiert das initiale Laden des Video-Players, bis der Nutzer dem explizit mit einer Aktion zustimmt. Damit werden automatischen Anfragen beim initialen Laden der Seite im Hintergrund verhindert.

Welche Videos lassen sich standardmäßig nicht in Shopware 6 einbinden?

Standardmäßig lassen sich keine Videodateien (z.B. Dateien im MP4-Format) in Shopware 6 einbinden. YouTube und Vimeo Videos lassen sich außerdem nur in den Erlebniswelten und nicht in der Produktgalerie einbinden.

Videos in die Produktgalerie von Shopware 6 einbinden

Am sinnvollsten für deine Kunden sind natürlich Videos, die einzelne Produkte im Detail darstellen oder erklären, um ihnen die Kaufentscheidung zu erleichtern. Nutzer sind es von etablierten E-Commerce-Plattformen bereits gewohnt, dass Videos dieser Art direkt neben anderen Bildern in der Produktgalerie angezeigt werden. Shopware bietet diese Funktion standardmäßig leider nicht. Daher musst du dafür entweder eine eigene Implementierung entwickeln oder ein fertiges Plugin nutzen.

Videos ohne Plugin in die Produktgalerie von Shopware 6 einbinden

Eine genaue Beschreibung für die Entwicklung einer eigenen Implementierung würden den Rahmen dieses Beitrags leider springen. Falls du dich dafür entscheidest, kannst du dich aber grob an folgende Schritte halten:

1. Erstelle ein neues Custom Field Set mit einem Custom Field des Typs Text, falls du URLs zu externen Videos oder Media, falls du Videodateien nutzen möchtest.
2. Falls du noch kein Child Theme nutzt, solltest du jetzt ein solches anlegen, damit du Änderungen an den Twig Templates der Produktdetailseite vornehmen kannst (siehe: Shopware 6 Dokumentation für Entwickler).
3. Passe zunächst das Twig Template des Bildergalerie-Sliders unter views/storefront/element/cms-element-image-gallery.twig.html nach deinen Wünschen an und nutze das neue Custom Field, um die Videoinformationen abzurufen.
4. Passe zuletzt das JavaScript-Plugin für den Bildergalerie-Slider unter app/storefront/src/plugin/slider/gallery-slider.plugin.js an, damit Videos beispielsweise gestoppt werden, wenn ein Nutzer zu einem anderen Bild navigiert.

Hinweis: Falls du YouTube oder Vimeo Videos einbinden möchtest, solltest du ebenfalls einen Content Blocker entwickeln, um die Vorschriften der DSGVO einzuhalten. Ansonsten können dir Abmahnungen drohen.

Videos mit unserem Plugin "Produkt Videos" in die Produktgalerie von Shopware 6 einbinden

Mit unserem Shopware 6 Plugin Produkt Videos kannst du YouTube und Vimeo Videos, als auch Videodateien einfach und DSGVO konform in die Produktgalerie einbinden. Nähere Informationen, wie du Plugins in Shopware 6 installieren kannst, findest du in der Shopware Dokumentation für Shopbetreiber. Du kannst unser Plugin 30 Tage lang kostenlos testen und eine Lizenz im Shopware Store erwerben, falls du dich entscheidest es dauerhaft zu nutzen. Nachdem du das Plugin installiert und aktiviert hast, kannst du Videos folgendermaßen in die Produktgalerie einbinden:

1. Navigiere zu einem beliebigen Produkt

2. Scrolle nach unten bis zur Karte "Medien". Falls du eine Videodatei hinzufügen möchtest, kannst du diese nun genau wie Bilder direkt in das Medienfeld laden. Falls du ein Video von YouTube oder Vimeo einbetten möchtest, findest du jetzt einen neuen Reiter "Video einbetten".

3. Füge die URL des YouTube oder Vimeo Videos (ohne Parameter) ein, wähle die Quelle und ein Vorschaubild aus der Mediathek aus und klicke dann auf "Zur Liste hinzufügen".

4. Das Video lässt sich nun genau wie Bilder sortieren und löschen. Videos können nicht als Cover genutzt werden.

5. Nun sollten die Videos und ggf. der Content Blocker in der Produktgalerie ausgegeben werden.

6. Um den eingebauten Content Blocker zu aktivieren, navigiere zur Plugin-Konfiguration.

7. Aktiviere hier die folgende Option, um den Content Blocker zu nutzen.

Hinweis: Falls du ein eigenes Theme, ein Drittanbieter Theme oder ein Plugin nutzt, welches Anpassungen an der Produktgalerie vornimmt, kann es zu Kompatibilitätsproblemen mit unserem Plugin kommen. In solchen Fällen kannst du uns jederzeit kontaktieren, damit wir gemeinsam eine Lösung für das Problem finden.

YouTube und Vimeo Videos in Shopware 6 Erlebniswelten einbinden

Videos von YouTube und Vimeo lassen sich folgendermaßen in die Shopware 6 Erlebniswelten einbinden:

1. Navigiere zu den Shopware 6 Erlebniswelten und wähle ein beliebiges Layout aus.

2. Öffne die CMS-Block-Bibliothek und wähle die Kategorie "Video".

3. Ziehe den Block für ein YouTube oder Vimeo Video in die gewünschte Sektion.

4. Klicke auf das Zahnrad-Symbol, um das Video Element zu konfigurieren.

5. Füge eine YouTube oder Vimeo Video-URL ein.

6. Konfiguriere weitere Optionen (z.B. Content Blocker) und schließe die Konfiguration mit einem Klick auf "Fertig" ab.

7. Klicke auf "Speichern", um das Layout zu speichern.

8. Das Video sollte jetzt in der Storefront bei allen Kategorien angezeigt werden, auf die das Layout angewendet wurde.

YouTube und Vimeo Videos für einzelne Produkte in Shopware 6 einbinden

Da sich YouTube und Vimeo Videos wie oben beschrieben in die Erlebniswelten einbinden lassen, kannst du diese Methode auch nutzen, um Videos für einzelne Produkte außerhalb der Produktgalerie zu pflegen. Dafür musst du ein Layout des Typs "Produktseite" erstellen und einen Video-Block an der gewünschten Stelle einfügen. Die Konfiguration des Video-Blocks lässt sich dann von jedem Produkt aus überschreiben.

1. Erstelle ein neues Layout.

2. Wähle den Typ "Produktseite", eine Sektion und gib dem Layout einen Namen z.B. "Produkt mit Video".

3. Füge wie oben beschrieben einen Block für ein YouTube oder Vimeo Video hinzu.

4. In der Konfiguration musst du eine Standard-URL hinterlegen, sonst kannst du das Layout nicht speichern.

5. Speichere das Layout.

6. Navigiere zu einem beliebigen Produkt.

7. Navigiere zum Reiter "Layout" und weise ein das neue Layout über "Layout zuweisen" zu.

8. Wähle das Layout, das du in Schritt 1 erstellt hast.

9. Nun kannst du die Konfiguration für das Video-Element vom Produkt aus überschreiben.

10. Das Video sollte nun an der gewünschten Stelle auf der Produktseite ausgegeben werden.

Tipp: Das solltest du bei der Erstellung von Produktvideos beachten

Grundsätzlich hängt die optimale Länge eines Videos immer vom Konzept des Videos ab. Während ein Video, in dem das Produkt lediglich genauer gezeigt wird, eher kürzer sein sollte, können Erklärvideos auch mal ein paar Minuten länger ausfallen. Bei längeren Videos bietet sich außerdem immer ein Upload auf Plattformen, wie YouTube oder Vimeo an, um einen weiteren Touchpoint für deine Kunden zu eröffnen. Eigene Videodateien sollten im besten Fall immer im MP4 Container und im H264 Codec bereitgestellt werden, da dieses Format aktuell immer noch die höchste Kompatibilität mit allen Browsern aufweist. Zudem solltest du darauf achten, dass die Größe deiner Videodateien ein paar Megabyte nicht überschreitet, da der HTML5-Video-Player keine Optimierungen für Situationen, wie beispielsweise dem Zugriff über mobile Daten bereitstellt.

Fazit

Möchtest du Videos in die Erlebniswelten einbinden, reichen die Standardfunktionen von Shopware 6 vollkommen aus. Möchtest du Videos jedoch direkt in die Produktgalerie einbinden, geht dies wohl am einfachsten mit unserem Shopware 6 Plugin Produkt Videos.