FROM CACHE - de_header
Gelöst

Autoplay Video Frontpage

Johannes6
Tourist
9 0 5

Moin...

ich möchte gern 2 Videos auf meiner Frontpage einbinden und die auf Autoplay laufen lassen, sodass niemand erst auf irgend ein Playzeichen klicken muss. Ich benutze das "Ride" Theme.

Muss ich hierfür einen HTML Code umschreiben? Oder jemanden beauftragen der das machen kann?

Geht das überhaupt mit meinem Theme?

 

Für Hilfe wäre ich sehr Dankbar :-). 

 

 

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
17969 2847 4188

Erfolg.

Hey @Johannes6 

 

Danke für die Frage und du möchtest einen Video auf der HP loopen lassen, ist das richtig? Video Inhalte sind ein guter Weg deine Conversions zu erhöhen denn wir wissen, dass die Besucher zu Online Shops das etwas besondere erleben wollen und Video ist ein super Weg das zu erzielen. Besucher wollen oft die Produkte in Action sehen sowie etwas mehr über das Shop erfahren, wie z. B. sehen wie Produkte in der Werkstatt gebaut werden. So ein Video würde Vertrauen aufbauen was zu mehr Verkäufe führt.

 

Die folgenden Tipps gelten für das Dawn Theme (praktisch die gleiche Code-Struktur wie unser Ride Theme) und du musst das halt testen ob es bei dir funzt oder nicht. Wenn nicht dann ggf. einen Code Experten konsultieren.

 

Das erste was du machst ist deine 2 Video MP4 Dateien zum Dateienbereich hochladen, oder zu einem anderen Cloud System wie Dropbox oder Google Drive wo du Share-Links erzeugen kannst. Unser internes Dateien Bereich in deinen Shopify Einstellungen ist teil des CDN Network und somit wahrscheinlich das schnellste beim Reproduzieren des Videos.

 

Dann in einem Custom Liquid Abschnitt auf der HP wie folgt den folgenden Code eintragen pro Video (entweder jeder Video einen eigenen Abschnitt oder beide Codes doppelt und untereinander im rechten Kästchen und speichern - wie ich hier in Dawn demonstriere):

 

image.png

 

Der Code (bitte MP4 Video-Link mit deinem eigenen ersetzen):

 

<style>
video {
  display: block;
  margin: 0 auto;
  width: 50%;
}

@media screen and (max-width: 800px) {
  video {
    width: 90%;
    }
  }
</style>

<video controls autoplay loop playsinline muted>
  <source src="https://cdn.shopify.com/s/files/1/0550/0960/7817/files/video_1.mp4?v=1646563222" />
</video>

 

Das hat in meinem Dawn ganz gut gefunzt also denke ich wird das auch bei dir funzen. Wenn dir der Video zu schmal ist dann ändere einfach die "50%" im obigen Code zu 80% oder 100% (vollbreite).

 

Lass auch wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!

Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community. Du musst in der Benachrichtigungs-E-Mail auf „Antworten“ tippen oder klicken, um eine neue Nachricht zu verfassen. Schreibe in dieser Nachricht deine Antwort und klicke oder tippe dann auf „Senden“, um deine Antwort in der Community zu posten.

Unsere Community unterstützt es nicht, direkt auf eine Benachrichtigungs-E-Mail zu antworten, weshalb deine Antwort in dieser E-Mail nicht in der Community veröffentlicht werden könnte und wir sie nicht sehen, was schade wäre.

Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 5 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

13 ANTWORTEN 13

Gabe
Shopify Staff
17969 2847 4188

Erfolg.

Hey @Johannes6 

 

Danke für die Frage und du möchtest einen Video auf der HP loopen lassen, ist das richtig? Video Inhalte sind ein guter Weg deine Conversions zu erhöhen denn wir wissen, dass die Besucher zu Online Shops das etwas besondere erleben wollen und Video ist ein super Weg das zu erzielen. Besucher wollen oft die Produkte in Action sehen sowie etwas mehr über das Shop erfahren, wie z. B. sehen wie Produkte in der Werkstatt gebaut werden. So ein Video würde Vertrauen aufbauen was zu mehr Verkäufe führt.

 

Die folgenden Tipps gelten für das Dawn Theme (praktisch die gleiche Code-Struktur wie unser Ride Theme) und du musst das halt testen ob es bei dir funzt oder nicht. Wenn nicht dann ggf. einen Code Experten konsultieren.

 

Das erste was du machst ist deine 2 Video MP4 Dateien zum Dateienbereich hochladen, oder zu einem anderen Cloud System wie Dropbox oder Google Drive wo du Share-Links erzeugen kannst. Unser internes Dateien Bereich in deinen Shopify Einstellungen ist teil des CDN Network und somit wahrscheinlich das schnellste beim Reproduzieren des Videos.

 

Dann in einem Custom Liquid Abschnitt auf der HP wie folgt den folgenden Code eintragen pro Video (entweder jeder Video einen eigenen Abschnitt oder beide Codes doppelt und untereinander im rechten Kästchen und speichern - wie ich hier in Dawn demonstriere):

 

image.png

 

Der Code (bitte MP4 Video-Link mit deinem eigenen ersetzen):

 

<style>
video {
  display: block;
  margin: 0 auto;
  width: 50%;
}

@media screen and (max-width: 800px) {
  video {
    width: 90%;
    }
  }
</style>

<video controls autoplay loop playsinline muted>
  <source src="https://cdn.shopify.com/s/files/1/0550/0960/7817/files/video_1.mp4?v=1646563222" />
</video>

 

Das hat in meinem Dawn ganz gut gefunzt also denke ich wird das auch bei dir funzen. Wenn dir der Video zu schmal ist dann ändere einfach die "50%" im obigen Code zu 80% oder 100% (vollbreite).

 

Lass auch wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!

Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community. Du musst in der Benachrichtigungs-E-Mail auf „Antworten“ tippen oder klicken, um eine neue Nachricht zu verfassen. Schreibe in dieser Nachricht deine Antwort und klicke oder tippe dann auf „Senden“, um deine Antwort in der Community zu posten.

Unsere Community unterstützt es nicht, direkt auf eine Benachrichtigungs-E-Mail zu antworten, weshalb deine Antwort in dieser E-Mail nicht in der Community veröffentlicht werden könnte und wir sie nicht sehen, was schade wäre.

Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 5 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Johannes6
Tourist
9 0 5

Wuhu...

ich habe mir Tage lang den Kopf zerbrochen und mich bei YouTube und Vimeo ausprobiert, doch so wie du es erklärt hast, hat es bei meinem Theme "Ride" sehr gut funktioniert 😍. Ich kann die Größe jetzt ganz easy verändern und den Ton anlassen standard mäßig oder auslassen standard mäßig 😍. Vielen Dank für diese hilfreiche Information.

dpparfum_Jonas
Entdecker
25 1 7

Wie erhalte ich eigentlich diesen Link aus Shopify? Unter Uploads und dann steht der Link oben in der Taskleiste?

Gabe
Shopify Staff
17969 2847 4188

@dpparfum_Jonas 

 

Welchen Link? Den CDN Link?

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

dpparfum_Jonas
Entdecker
25 1 7

Genau. Habe den bereits gefunden. Ist unter "Medien"

Carschi23
Tourist
6 0 0

hallo, ich habe dawn und es nach anleitung gemacht aber irgendwo ist ein fehler, kann mir jemand helfen, bittecode eingefügt fehler1.jpgcode eingefügt fehler2.jpgcode eingefügt fehler3.jpgcode eingefügt.jpg

JustInCase-de
Entdecker
96 0 6

Hi, danke für die ausführliche Anleitung.

Bei mir ist es so, dass man beim ersten Laden der HP trotzdem noch play drücken muss, bevor sich das video dann automatisch abspielt. woran kann das liegen ? Ich hab den code 1:1 kopiert.

 

Danke schon mal im voraus!

Gabe
Shopify Staff
17969 2847 4188

Hey @JustInCase-de 

 

Es ist schwer zu sagen ohne einen Link zu einem Beispiel. Es kann mit deinem Theme zusammenhängen was ich aus deiner Frage nicht entnehmen konnte  ¯\_(ツ)_/¯

 

Kannst du hier einen Link posten? Dein Community Avatar justincase.de scheint nicht zu klappen...

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

JustInCase-de
Entdecker
96 0 6

Hallo Gabe, 

sehr gerne!

Das ist der aktuelle Link zu meinem Shop: https://justincase-de.com - ich benutze das Dawn Theme und bin 1:1 deiner Anleitung nachgegangen. Wie du jedoch siehst, muss man beim ersten Laden der Webseite dennoch auf Play drücken, bevor sich das dann automatisch abspielt. Allerdings ist auch erstmal das „Rasta“ zu sehen und bei jedem neu laden, wenn man zum Beispiel von der Produktseite wieder auf die Frontpage geht, muss halt auch wieder Play gedrückt werden.

 

Vielleicht findest du heraus woran es liegt.

 

danke 

Gabe
Shopify Staff
17969 2847 4188

Hey @JustInCase-de 

 

Danke und das habe ich jetzt angeschaut, konnte aber deine Aussage nicht replizieren. Siehe meinen kurzen Video unten, wo ich auch Tipps zu deinem Shop abgebe. So wie dein Shop jetzt ist verlangt es noch einiges an Arbeit wenn du wirklich tolle Verkäufe erzielen möchtest.

 

Wenn das Video beim ersten Laden der Homepage nicht automatisch abspielt, kann dies auch an den Browsereinstellungen liegen, die Autoplay unter bestimmten Umständen blockieren können. Du solltest auch beachten, dass einige Browser das automatische Abspielen von Videos mit Ton blockieren können. Daher ist es wichtig, das Video ohne Ton oder mit aktivierter Mute-Option einzustellen, um die Autoplay-Funktionalität zu verbessern.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

JustInCase-de
Entdecker
96 0 6

Hi Gabe,

danke für die schnelle Antwort.

Ich meine insbesondere die mobile Version meiner Webseite. Kannst du dr das vielleicht mal angucken ?

 

Noch etwas anderes: Gibt es die Möglichkeit seinen Shopify-Shop ausschließlich mobil zu führen ?

 

Beste Grüße.

Gabe
Shopify Staff
17969 2847 4188

Hey @JustInCase-de 

 

Siehe meinen Video auf Mobile dazu hier.

 

Eine reine Ausrichtung eines Shopify-Stores auf mobile Geräte, bei der der Zugriff über Desktop-Geräte ausgeschlossen wird, ist standardmäßig nicht vorgesehen. Shopify-Websites sind in der Regel responsiv gestaltet, was bedeutet, dass sie sich automatisch an die Bildschirmgröße des Geräts anpassen, auf dem sie angezeigt werden.

 

Es ist technisch möglich, das Design deines Shopify-Shops so anzupassen, dass es hauptsächlich für mobile Nutzer optimiert ist. Dies könnte beispielsweise durch ein mobiles First-Design oder die Verwendung bestimmter Themes erreicht werden, die besonders mobilfreundlich sind. Allerdings würde das keine exklusive Beschränkung auf mobile Geräte bedeuten; Desktop-Nutzer könnten den Shop weiterhin besuchen, allerdings mit einer möglicherweise weniger idealen Nutzererfahrung.

 

Du kannst deinen Shopify-Shop auch auf dem Handy führen und verwalten. Shopify bietet eine mobile App für iOS- und Android-Geräte, die eine umfassende Verwaltung deines Online-Geschäfts ermöglicht. Mit dieser App kannst du Produkte verwalten, Bestellungen abwickeln, Marketingkampagnen durchführen und mit Kunden kommunizieren. Die App ermöglicht es dir ausserdem, Produkte über Social Media zu teilen, E-Mail-Marketingkampagnen zu erstellen und Zahlungen persönlich über die Tap-to-Pay-Funktion für Shopify POS auf deinem iPhone zu akzeptieren.

 

Lass wissen falls du weitere Fragen dazu hast! 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

JustInCase-de
Entdecker
96 0 6

Vielen Dank für den Ratschlag!

Sobald ich meinen Studentenstatus los bin und richtig was investieren kann, werde ich mir die Themes mal anschauen.

 

Beste Grüße