Product Slider Scrollverhalten

[tatianaSh]

Hallo liebe Shopify Community,

ich habe ein Problem mit dem Produktbilder-Slider in der mobilen Version im Thema Dawn. Er ist sehr empfindlich. Ich mache eine kleine Bewegung, und schon fliegen mehrere Bilder vorbei, ohne das man sehen kann, was da drauf ist. Ich habe ein Video angehängt. Ich habe versucht zu finden, was ich an css überschrieben kann, um das Verhalten zu korrigieren (Scrollen langsamer zu machen), bin aber bisher nicht fündig geworden. Weiß jemand vielleicht mehr?

Zum Produktbilder-Slider hätte ich auch eine weitere Frage. Wenn ich auf die Luppe zum Vergrößern klicke, sehe ich immer zunächst kein Bild, es wird erst geladen und erscheint so in 1-2 Sekunden. Dabei sind die meisten Produktbilder jpgs um die 50 kb. Ich empfinde das Laden der Bilder als zu langsam, aber an der Größe kann es ja nicht liegen.

[tatianaSh]

Noch eine Sache habe ich vergessen. Die kleinen Vorschaubilder in der Desktop Version sind blurry - mit der Ausnahme des ersten Bildes. Hier auf dem Screenshot kann man das ganz gut sehen, da das selbe Bild zweimal verkommt. Kann ich das irgendwie korrigieren bzw. beeinflussen?

[Gabe]

Hi Tatiana! @tatianaSh 

Das habe ich jetzt angeschaut und zwei Aufnahmen gemacht die meine Experience in deinem Shop auf Handy und auf Desktop demonstrieren und im grossen und ganzen war mein Erlebnis in euren Dawn Theme im Image Karussell und auf der Produktseite ganz ok.

Bitte beachte, dass unsere Free Themes zwar super sind, gewisse Foto-algorithmen wie es die kostenpflichtige Themes haben, wie Impulse oder Prestige, haben die nicht mit eingebaut.

Siehe meine Experience hier:

• Auf Handy
• Auf Desktop

Das folgende bitte mit einem Programmierer besprechen und immer zuerst in einer Testumgebung testen:

Bitte beachte auch, dass wenn man neuen Code zum Theme ergänzt 1) die Ladezeiten negativ beeinflusst werden können und 2) Dawn dann aus den Theme ausgeschlossen werden kann.

Um das Bildkarussell auf Mobile weniger empfindlich für Berührungen zu machen, kannst du den Initialisierungscode von Swiper.js ändern. Dazu kannst du die folgende Option hinzufügen:

var swiper = new Swiper('.swiper-container', {
  ...
  touchRatio: 0.2,  // Increase this value to make the carousel less sensitive to touch
  ...
});

Der touchRatio legt das Verhältnis der Berührungsbewegung fest, die erforderlich ist, um einen Diawechsel auszulösen. Der Standardwert ist 1, was bedeutet, dass eine vollständige Berührung erforderlich ist, um das Dia zu wechseln. Wenn du zum Beispiel 0,2 einstellst, ist das Karussell 20 % weniger berührungsempfindlich, sodass ein Nutzer 20 % weiter streichen muss, um das Dia zu wechseln. Du kannst den Wert anpassen, um die beste Einstellung für deine spezifischen Bedürfnisse zu finden. Das gesamte Code würde wie folgt aussehen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 20,
  touchRatio: 0.2,  // Add this line to make the carousel less sensitive to touch
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
</script>

Bzgl. den Bildminiaturen, hier ist es wichtig zu schauen, wo die herkommen wie z. B. von einem POD? Wenn ja, dann muss man mit denen reden.

Kannst du bitte mal eine frische Kopie des Dawn Theme installieren und schauen ob die Miniaturen auch da blurry sind?

• Wenn ja dann gibt es vielleicht ein Bug im Dawn Theme, insgesamt.
• Wenn nein dann gibt es ggf. ein Bug mit der spezifischen Dawn Theme Version die du hast und unsere Entwickler müssen im Section einen Fix einbauen.

• Um dir dabei behilflich zu sein, sende bitte eine E-Mail an unseren Support hier (https://bit.ly/3cwO7ym) von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

Dann gibt es folgende Best Practices für Bilder:

Hier sind die Spezifikationen, die wir empfehlen, um die bestmöglichen Bilder zu erhalten:

• Größenbeschränkungen: 20 Megabyte Dateigröße und nicht mehr als 20 Megapixel.
  Maximales Seitenverhältnis: 100:1
  Mindest-Seitenverhältnis: 1:100
• Bevorzugte Dateitypen: PNG, JPEG, GIF, HEIC und WebP
• PNG sollte für Strichzeichnungen, Text und ikonische Grafiken empfohlen werden. Es ist von höherer Qualität, hat aber eine größere Dateigröße. Es unterstützt auch Transparenz, was es ideal für ein Logo macht.
• JPEG wird für alle anderen Dateien empfohlen, z. B. für Produktbilder oder Diashows.
• Andere akzeptierte Dateitypen sind PSD, TIFF, BMP, aber sie werden beim Hochladen in JPEG/PNG umgewandelt.

Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

Lass wissen, wenn du weitere Fragen hast zum 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.

[tatianaSh]

Hallo Gabe, vielen Dank für die super ausführliche Antwort!

Das mit verschiedenen Produktbildern hätte ich vielleicht schon vorher erwähnen sollen. Du hast ganz richtig gemerkt, dass da einige Bilder zu groß sind und deshalb zu lange laden. Diese kommen aus der App des Herstellers und sind im PNG Format, eine Datei ist dabei etwa 300 bis 500 KB. Die Bilder von Menschen von hinten, sowie Stoffe habe ich selbst als etwa 50-60 KB JPEGs nachträglich hinzugefügt. Und mein Problem ist, dass gerade diese nachträglich hinzugefügten 50 KB Bilder bei mir sowohl auf dem Desktop, als auch auf dem Handy eine Sekunde brauchen (und das sehe ich auch in deinen Videos, wenn du die vergrößerte Ansicht runterscrollst, erscheinen die JPEGs auch nicht sofort). Das ist nicht so schlimm, aber es wundert mich sehr. Die großen PNG Bilder habe ich bei dem Testen der Luppe komplett ignoriert. Mein alter Wordpress Shop zeigte die vergrößerten Bilder ohne jede Verzögerung an. Hier ist ein Beispiel: https://schoenewald.art/product/printable-watercolor-art-of-an-iris/. Dieses Bild ist auch um die 500 KB, aber es ist sofort da, wenn man auf die Luppe geht. Was ist bei Shopify anders, dass es so nicht geht?

Das Problem mit PNGs wollte ich separat lösen. Ich habe die AVADA App installiert. Dort ließ ich die Bulk Optimierung laufen, die angeblich erfolgreich war. Ich habe aber keine Änderungen an den Bildgrößen festgestellt und deinstallierte die App wieder. Mich beunruhigt es sehr, dass ich nicht verstehe, welche Änderungen eine App an meinen Daten vornimmt. Ich habe fast 400 Produkte umzuziehen, und mein Shop ist schon live. Was ist, wenn eine App meine Bilder so verändert, dass sie nicht mehr gut aussehen, und ich 400 Produkte * 10-15 Bilder editieren muss? Gibt es dafür evtl. eine Lösung, einen Testshop, eine Sandbox zum ausprobieren? Ich habe jedenfalls eine weitere App gefunden, die aus PNGs JPGs macht und traue mich gerade nicht daran.

[tatianaSh]

Bezüglich Scrollverhalten ist meine Erfahrung natürlich subjektiv. Ich mache die Bewegungen so, wie ich sie aus anderen Quellen wie Instagram gelernt habe - ziemlich lang und schnell. Ich muss mich anpassen und sehr kurze und langsame Bewegungen machen, dann kann ich so scrollen wie du im Video.

Ich glaube, die Updates des Themas sind mir wichtiger. Vielleicht kann das Scrollverhalten in einem Update angegangen werden?

Ich habe nicht ganz verstanden, wo ich die Datei swiper.js finde. Wenn ich auf Code editieren gehe, ist diese Datei nicht da, und auch keine andere js Datei.

[tatianaSh]

Die Bildminiaturen kommen nicht als extra kleine Bilder von pod, nein, sie werden nur runterskaliert, das ist eine reine Thema-Sache. Dort gibt es verschiede Einstellungen, wie groß man die Produktbilder unter dem Hauptbild haben will, ich habe die kleinste Option gewählt. Dieselben Bilder werden also je nach Einstellung im Thema größer oder kleiner dargestellt. Hier sind sie größer eingestellt, als bei mir: https://themes.shopify.com/themes/dawn/styles/default/preview

[tatianaSh]

Mein Dawn Thema ist gerade 2 Wochen alt (wie mein Shop) und, soweit ich weiß, aktuell. Lohn es sich es nochmal zu installieren?