Liquid, JavaScript, Themes
Hallo,
wenn ich meine Produktvideos im Theme Debut hochlade, werden sie leider immer zu blass, so als ob obendrauf nochmal eine Art Farbtransparency ist, die jegliche Produktsättigung rausnimmt.
Wie kann ich das deaktivieren bzw. ändern?
Beispiel:
https://www.gaminggoddess.shop/products/sticker-single-glitzer-wasserfest-rock-on-gamergirl
Man sieht ja die Produktbilder und an zweiter Stelle das Video. Das Video hat eigentlich die gleiche Farbe wie die Produktfotos und wenn ich es zB. auf Etsy hochlade sieht es auch korrekt aus, aber hier leider nicht.
Kann mir jemand helfen?
Vielen Dank!
Gelöst! Zur Lösung
Erfolg.
Hey @GamingGoddessDE
Danke für den Link und hier gäbe es ein paar Dinge zu bedenken. Gestatten, hier möchte ich ein paar ehrliche Tipps zu deinem Debut Theme geben, aber ignoriere sie wenn du mit dem Theme doch zufrieden bist. An erster Stelle, wie sind die Sales deiner tollen Pokemon Gaming Produkte und Sticker? Gut oder schlecht? Hast du das Shop erst aufgemacht und möchtest es aufbauen um dann große Verkäufe zu erzielen?
Um deine Frage zu beantworten ist das "Rendering" der Videos im Debut Theme mit reduzierter Opazität eigentlich das erwartete Verhalten. Somit ist Debut nicht ein Theme, dass für sehr hohe Bilder- und Videoqualität sowie Hi-Resolution bekannt ist. Andere Themes wie Prestige, Impulse, oder Boost können das viel besser, und sind daher "to pay for".
Ich habe aber jetzt deinen Video angeschaut und auf meinem Dell UltraSharp 27" sieht dein Video eigentlich recht akzeptable aus wie man unten sieht (der Gif ist aber nicht hi-res). Vielmehr Hi-Res wird im Debut Theme nicht möglich sein:
Wenn du aber deine eigene Videos in das HTML einbauen möchtest dann geht es mit Coding und das folgende Code würde ich zuerst in einer Debut Them Kopie testen. Diesen Code in einen "Benutzerdefinierten Block" einfügen und speichern (mehr dazu findest du in diesem Leitfaden )
<script>
window.addEventListener('load', videoScroll);
window.addEventListener('scroll', videoScroll);
function videoScroll() {
if ( document.querySelectorAll('video[autoplay]').length > 0) {
var windowHeight = window.innerHeight,
videoEl = document.querySelectorAll('video[autoplay]');
for (var i = 0; i < videoEl.length; i++) {
var thisVideoEl = videoEl[i],
videoHeight = thisVideoEl.clientHeight,
videoClientRect = thisVideoEl.getBoundingClientRect().top;
if ( videoClientRect <= ( (windowHeight) - (videoHeight*.5) ) && videoClientRect >= ( 0 - ( videoHeight*.5 ) ) ) {
thisVideoEl.play();
} else {
thisVideoEl.pause();
}
}
}
}
</script>
<video autoplay muted loop controls="controls" src="{your-video}" type="video/mp4" width="100%" height="600">"Fuege deinen Text hier ein."</video>
Die andere Frage wäre ggf. zu überlegen zu einem neueren 2.0 Theme zu wechseln, da das Debut Theme bald nicht mehr supported wird, und um ehrlich zu sein, deine tollen Spiele und die Farben gar nicht so richtig rüberbringt. Da fehlt es im Debut Theme einfach am "Wow-faktor" oder an Emotionen:
Scrolle doch mal hier im Boost Theme runter und erlebe eine tolle Browsing Experience mit hochauflösenden Bilder und andere tollen Features wie das "Split Scrolling", schöne Call-to-Action Buttons die danach so richtig schreien angeklickt zu werden, Abschnitte mit Vendor Branding und Logos, schöne Slideshows und eigene MP4s. Du kannst also deine eigene hochauflösende MP4s auf der Homepage gross anzeigen ohne YouTube oder Vimeo verwenden zu müssen (mehr dazu hier )
Um ein richtig tolles Shop aufzubauen bedarf es also an etwas Investition:
Siehe auch unsere gratis "Colorblock" Theme hier wenn du dir das Geld sparen möchtest. Lass 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!
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 @GamingGoddessDE
Danke für den Link und hier gäbe es ein paar Dinge zu bedenken. Gestatten, hier möchte ich ein paar ehrliche Tipps zu deinem Debut Theme geben, aber ignoriere sie wenn du mit dem Theme doch zufrieden bist. An erster Stelle, wie sind die Sales deiner tollen Pokemon Gaming Produkte und Sticker? Gut oder schlecht? Hast du das Shop erst aufgemacht und möchtest es aufbauen um dann große Verkäufe zu erzielen?
Um deine Frage zu beantworten ist das "Rendering" der Videos im Debut Theme mit reduzierter Opazität eigentlich das erwartete Verhalten. Somit ist Debut nicht ein Theme, dass für sehr hohe Bilder- und Videoqualität sowie Hi-Resolution bekannt ist. Andere Themes wie Prestige, Impulse, oder Boost können das viel besser, und sind daher "to pay for".
Ich habe aber jetzt deinen Video angeschaut und auf meinem Dell UltraSharp 27" sieht dein Video eigentlich recht akzeptable aus wie man unten sieht (der Gif ist aber nicht hi-res). Vielmehr Hi-Res wird im Debut Theme nicht möglich sein:
Wenn du aber deine eigene Videos in das HTML einbauen möchtest dann geht es mit Coding und das folgende Code würde ich zuerst in einer Debut Them Kopie testen. Diesen Code in einen "Benutzerdefinierten Block" einfügen und speichern (mehr dazu findest du in diesem Leitfaden )
<script>
window.addEventListener('load', videoScroll);
window.addEventListener('scroll', videoScroll);
function videoScroll() {
if ( document.querySelectorAll('video[autoplay]').length > 0) {
var windowHeight = window.innerHeight,
videoEl = document.querySelectorAll('video[autoplay]');
for (var i = 0; i < videoEl.length; i++) {
var thisVideoEl = videoEl[i],
videoHeight = thisVideoEl.clientHeight,
videoClientRect = thisVideoEl.getBoundingClientRect().top;
if ( videoClientRect <= ( (windowHeight) - (videoHeight*.5) ) && videoClientRect >= ( 0 - ( videoHeight*.5 ) ) ) {
thisVideoEl.play();
} else {
thisVideoEl.pause();
}
}
}
}
</script>
<video autoplay muted loop controls="controls" src="{your-video}" type="video/mp4" width="100%" height="600">"Fuege deinen Text hier ein."</video>
Die andere Frage wäre ggf. zu überlegen zu einem neueren 2.0 Theme zu wechseln, da das Debut Theme bald nicht mehr supported wird, und um ehrlich zu sein, deine tollen Spiele und die Farben gar nicht so richtig rüberbringt. Da fehlt es im Debut Theme einfach am "Wow-faktor" oder an Emotionen:
Scrolle doch mal hier im Boost Theme runter und erlebe eine tolle Browsing Experience mit hochauflösenden Bilder und andere tollen Features wie das "Split Scrolling", schöne Call-to-Action Buttons die danach so richtig schreien angeklickt zu werden, Abschnitte mit Vendor Branding und Logos, schöne Slideshows und eigene MP4s. Du kannst also deine eigene hochauflösende MP4s auf der Homepage gross anzeigen ohne YouTube oder Vimeo verwenden zu müssen (mehr dazu hier )
Um ein richtig tolles Shop aufzubauen bedarf es also an etwas Investition:
Siehe auch unsere gratis "Colorblock" Theme hier wenn du dir das Geld sparen möchtest. Lass 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!
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
Hallo Gabe, vielen Dank für deine Hilfe und ausführliche Antwort. 🙂 Ja, hmm da muss ich wohl auf lange Sicht gesehen das Theme wechseln. Ich hatte nur soviel custom code benutzt und auch rechtlich gesehen viele Sachen optimiert und war froh, dass es alles mit meinen Plugins funktioniert, dass ich davor ehrlich gesagt n bissl Bammel habe. Das Boost sieht natürlich klasse aus.
Ich schau mir das alles mal an!
Dankeschön 🙂
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
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024