Product Slider Scrollverhalten

Topic summary

Hauptthema: Auf Mobilgeräten scrollt der Produktbild‑Slider im Shopify‑Theme Dawn zu empfindlich; kleine Wischer springen mehrere Bilder weiter. Zusätzlich laden vergrößerte Bilder (Lupe) spürbar verzögert (1–2 s) – auch kleine JPGs (~50–60 KB). Auf Desktop sind Thumbnail‑Vorschaubilder teils unscharf (außer dem ersten).

Vorschläge/Antwort: Hinweis, dass Dawn (Free) weniger „Foto‑Algorithmen“ als Premium‑Themes hat. Empfehlung, den Slider über Swiper.js (Slider‑Bibliothek) mit touchRatio (z. B. 0,2) weniger sensibel zu machen; Warnung vor Auswirkungen auf Performance/Updates und Änderungen zuerst in Testumgebung prüfen. Prüfen, ob unscharfe Thumbnails in frischer Dawn‑Kopie auch auftreten; ggf. Bug im Theme oder in der spezifischen Version. Kontakt zum Support empfohlen. Bild‑Best‑Practices zu Formaten/Größen genannt.

Aktuelle Lage/Updates: Nutzerin sieht weiterhin Verzögerung bei kleinen JPGs (auch in den Testvideos sichtbar) und fragt, warum Zoom in Shopify langsamer ist als im früheren WordPress‑Shop. Sie findet keine swiper.js im Code‑Editor, wünscht eher ein Theme‑Update statt Eigenanpassung. Thumbnails werden im Theme skaliert (kein separates POD‑Bild; POD = Print‑on‑Demand). Dawn ist aktuell; Nachfrage, ob Neuinstallation lohnt. Sorge vor Bild‑Apps (Änderungen, fehlende Sandbox) bei 400 Produkten.

Medien: Videos und Screenshot sind zentral für das Verständnis.

Status: Keine Lösung umgesetzt. Offene Punkte: Ursache der Zoom‑Verzögerung, Ort/Anpassbarkeit von Swiper in Dawn, sichere Testumgebung, Nutzen einer Neuinstallation.

Summarized with AI on February 1. AI used: gpt-5.

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:

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:


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.

giphy