Liquid, JavaScript, Themes
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 :-).
Gelöst! Zur Lösung
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):
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
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):
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
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.
Wie erhalte ich eigentlich diesen Link aus Shopify? Unter Uploads und dann steht der Link oben in der Taskleiste?
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
Genau. Habe den bereits gefunden. Ist unter "Medien"
hallo, ich habe dawn und es nach anleitung gemacht aber irgendwo ist ein fehler, kann mir jemand helfen, bitte
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!
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
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
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
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.
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
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
Moin Gabe,
Ich habe diesbezüglich auch eine frage!
Und zwar schaut es bei uns so aus:
gleichzeitig benutzen wir das Refresh 15.2.0 Theme.
unsere Website wäre: Dampfff.de
Gleichzeitig würde ich anmerken wollen, dass unser Video extrem unscharf, im Gegenteil zur Mobilen Ansicht ist.
Hoffe das wird mit dem kleinen Video/Gif dann behoben.
Mit freundlichen Grüßen
Dampfff.de - Team
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024