FROM CACHE - de_header

Autoplay Video Frontpage

Gelöst
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
Shopify Staff
11789 1847 2859

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

15 ANTWORTEN 15
Gabe
Shopify Staff
Shopify Staff
11789 1847 2859

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 6

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

Gabe
Shopify Staff
Shopify Staff
11789 1847 2859

@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 6

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

Carschi23
Tourist
6 0 1

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

Carschi23
Tourist
6 0 1

irgendwie klappt es bei mir nicht, kannst du mir bitte helfencode eingefügt fehler1.jpgcode eingefügt fehler2.jpgcode eingefügt fehler3.jpgcode eingefügt.jpg

Gabe
Shopify Staff
Shopify Staff
11789 1847 2859

Hey @Carschi23 

 

Hast du das in der Zwischenzeit lösen können?

 

Welchen genauen Code hast du getestet?

 

VG,

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

Carschi23
Tourist
6 0 1

 ich hab den Code einmal in der Sektion YouTube da in dieses neue CSS Fenster kopiert und einmal oben beim Header oder so und jedes Mal machte es für eine Sekunde beim laden den Anschein es klappt und dann ging sofort der Fehler auf

 

 

Screenshot_2023-04-11-15-01-16-545_com.android.chrome.jpg

Gabe
Shopify Staff
Shopify Staff
11789 1847 2859

@Carschi23 

 

Probiere es stattdessen mal hier im Benutzerdefiniertes Liquid Abschnitt:

 

image.png

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

Carschi23
Tourist
6 0 1

cool, danke das hat geklappt.

ich hätte es gern über die ganze startseite wie bei diesem shop https://kleidermafia.com/

das kommt schon sehr cool so als kpl hintergrund

Carschi23
Tourist
6 0 1

Und bei mir erscheint immer erst noch kurz so ein Play bzw pause Zeichen, wie kriegt man das weg?

Gabe
Shopify Staff
Shopify Staff
11789 1847 2859

Hey @Carschi23 

 

Das ist theme-abhängig und ein Limit des gratis Dawn Themes leider. Hast du auch andere Themes getestet als nur das gratis Dawn theme? Wir empfehlen sehr auch manche der "profi-themes" zum Shop hinzufügen als Testumgebungen wie z. B. das Viola, Prestige, oder Impulse Theme.

 

Siehe z. B. wie sehr im Frame Theme Video effektiv sein kann wenn du in dieser Demo runterscrollst.

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

Carschi23
Tourist
6 0 1

Achso na dann such ich Mal durch die themes. Und dann bezahle ich das einmalig wenn ich es zum veröffentlichen benutzen möchte? Kannst du mir sagen welches Themen ich brauche um das Video komplett im Hintergrund zu haben, ohne frames.

 

Gabe
Shopify Staff
Shopify Staff
11789 1847 2859

Ja es gibt einige Themes die das können, wie z. B. das Frame oder das Motion Theme. Gehe in die Abschnitte und füge den Video Abschnitt hinzu der dann wie folgt aussieht und der Clou ist dass da MP4 hochladbar sein muss:

 

image.png

 

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