Liquid, JavaScript, Themes
Guten Tag,
die Produktseite meines Shops war jetzt ewig sehr sehr langsam durch zwei eingebundene GIFs.
Ich habe diese nun als MP4 erstellt und damit die Dateigröße erheblich reduziert. Diese MP4-Dateien
habe ich nun zu den Dateien meines Shops hinzugefügt und versucht statt der GIFs in die Seite einzufügen.
Das war der Ansatz, den ich online gefunden habe, da ich möchte dass das Video direkt startet und sich wie ein GIF laufend wiederholt:
<video autoplay loop muted playsinline src="VIDEO LINK"></video >
Ich bin leider blutiger Anfänger was html angeht und kenne mich daher überhaupt nicht aus.
Das Video funktioniert wie gewollt und befindet sich auch an der richtigen Stelle, ist aber viel größer als gewollt und ragt über die Seite hinaus.
Meine Seite, wie es mit den Gifs aussieht und auch wieder aussehen soll: https://chargerate.com/products/magneto1-0
Was kann ich hinzufügen, damit die Videos an der gleichen Stelle mit der richtigen Größe bleiben und nicht über den Rand hinausragen und sich trotzdem normal mit-skalieren, wenn man
die Seite auf dem Handy oder anderen Auflösungen aufruft?
Vielen Dank schonmal
Hey @chargerate
Danke für die Frage und die Produktseite. Hier gibt es natürlich mehrere Optionen Video zur Produktseite hinzuzufügen wie man hier sieht. Bzgl. gif, stelle sicher, dass das nicht optimierte gifs sind, wie in diesem Leitfaden beschrieben.
Ich habe deine Seite jetzt getestet und keine langsamen Ladegeschwindigkeiten bekommen wie man hier sieht. Einziges waren die Quantity Breaks die ein paar rote flaggen erzeugt haben.
Ich habe das auf Handy nicht reproduzieren können, wie du hier sehen kannst. Schicke doch ein paar Bildschirmabgriffe und ggf. können wir das näher anschauen.
Außerdem möchte ich gerne wissen lassen, dass unsere Hilfe hier nicht endet, also lass gerne wissen, ob ich deine Frage damit beantwortet habe. Auch nicht vergessen dich rechtzeitig auf den BFCM vorzubereiten wie z.B. Geschenkkarten oder vielleicht ein Upgrade Ihrer Versandeinrichtung? Siehe unseren tollen Blog-Post dazu hier.
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
Vielen Dank für deine schnelle Antwort Gabe.
Meine Kunden besuchen meine Produktseite zum Großteil mit Mobilgeräten und deswegen geht es mir hauptsächlich um die mobile Ladegeschwindigkeit.
Wenn man meine Seite auf dem Handy aufruft kann man die ersten Inhalte recht schnell sehen, bis jedoch alle Apps und Gifs vollständig geladen haben dauert es einfach ewig.
Ich habe auch eine sehr hohe bounce rate, was vermutlich daran liegt.
Anbei einige Screenshots, welche genau das zeigen und vor alldem auch, dass meine Gifs hauptsächlich für das langsame Laden verantwortlich sind.
Hallo @chargerate,
ich bin Theme und App Developer und Shopify Partner. Ich denke Dir kann geholfen werden 😉
Die Größe und Positionierung kann einfach über CSS eingestellt werden. Allerdings bräuchte ich ein bisschen mehr Info. Am besten und einfachsten wäre es, wenn Du einen Link zu einer Preview des Shops postest, oder per message sendest, in der Du, wie beschrieben von Dir,die GIFs in Videos umgesetzt hast und jedoch die Größe / Position der Videos nicht optimal ist. Dies machst Du, indem Du Dir die Preview anzeigen lässt und dann den Button benutzt, um die Preview zu teilen. Du bekommst dann einen Link, der von anderen benutzt werden kann, um die Preview für begrenzte Zeit zu sehen.
Grüße Guido
Vielen Dank @Guido_Michele.
So sieht es aktuell aus und soll es wieder aussehen:
So sieht es aus, wenn ich es bearbeite:
Preview URL: https://eki90a6kl982ryc6-39444742311.shopifypreview.com/products_preview?preview_key=0de56e65c37bef9...
Vielen Dank für die Hilfe.
Weiß da noch irgendjemand, was ich da einstellen oder hinzufügen muss?
Mit freundlichen Grüßen
Hallo!
Ganz kleine Zwischenfrage: beim Stöbern habe ich Euer Thema entdeckt und bin so auf Eure Seite gekommen. Euer Kontaktformular ist leicht zu finden und sehr funktionell. Verratet Ihr mir, welche App das ist oder gehört das zu Eurer Theme?
Danke
Petra
Beneidenswert... unsere Theme war gar nicht so günstig (Expression), doch wir müssen eine App für Kontaktformulare verwenden... und Apps machen ja die Seite bekanntlich langsamer. Dachte auch, das wäre Standard... aber tja.
Eine reine Kontaktseite ist kein Problem (Tel, Adresse,...)... doch ein richtiges Formular, wo Kunde uns direkt kontaktieren kann wie bei Euch ist leider nicht Standard. Wie heißt Eure Theme?
Gruß
Petra
Petra, ganz schnell was bzgl. entfernen von Frontend Apps. Einige Frontend Apps können auch das Theme Code ändern und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Siehe dazu bitte die App Dokumentation.
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
Vielen Dank für den Hinweis... werden das recherchieren...
Gruß aus Österreich
Hab mich jetzt doch schlau gemacht und tatsächlich diese Kontakt-Seite gefunden... ist schon aktiviert und funktioniert prächtig... somit eine App weniger!!! Super!!
Vielen Dank!!!!!!!!!!!!!!!!!!!!!!!!!!
Gruß aus Österreich
Petra
PS: die Möchtegern-Techniker in meiner Familie werden staunen... 😉
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