Hallo,
ich benutze das Mavon Theme und suche nach einer Möglichkeit die Produktbilder zu sliden. Beim Klick auf die Thumbnails erscheint aktuell einfach das nächste Bild. Ich möchte allerdings z.B. das das Bild dann rein “slidet” von rechts nach links. Geht das nur über eine App? Wo finde ich die Einstellungen? Gibt es verschiedene “Slide-Arten”?
Beispielseite:
Kann mir jemand helfen
Vielen Dank
Liebe Grüße
Timo
Hey Timo! @TimoE
Danke für den Link. Ist das dein Shop?
Um in deinem Mavon Theme, eine Slide-Funktionalität für Produktbilder zu implementieren, gibt es grundsätzlich zwei Möglichkeiten: Anpassungen über vorhandene Theme-Einstellungen oder die direkte Anpassung des Codes.
Ich habe das jetzt in der Mavon Demo angeschaut und sehe da eine Möglichkeit auf der PDP die Varianten Bilder zu sliden und finde es eigentlich eine tolle Benutzererfahrung. Warum ist das dir nicht genug und hast du das mit “echten User” (im Sinne des UX User-Testing) besprochen ob die wirklich etwas anderen möchten?
Ansonsten wird es komplex wenn dir das oben-abgebildete nicht genug ist, und du unbedingt eine Custom Solution in die PDP einbauen möchtest anstatt eins der Slider Apps zu verwenden.
Beachte auch, dass beide Optionen, sprich, Änderungen zu deinem Theme Code 1) die Page Loading Speeds negativ beeinflussen könnten, und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Es wird also eine Kombi aus HTML, CSS und JavaScript bzw. jQuery verlangen. Eine Möglichkeit besteht darin, ein jQuery Slider Plugin wie Slick Slider oder Swiper in dein Theme zu integrieren. Die entsprechenden JavaScript- und CSS-Dateien des Sliders in dein Theme einbinden und danach den HTML-Code der Produktbilder anpassen, damit er mit dem Plugin korrekt interagiert. Schließlich das Plugin über einen JavaScript-Code initialisieren, den du in deine Produktseiten-Vorlage einbaust. Dabei kannst du in der Regel auch die “Slide-Art” auswählen, wie z.B. Fade, Slide, oder verschiedene Geschwindigkeiten und Effekte…usw.
Wenn du Slick Slider verwenden möchtest, könnte dein Code ungefähr so aussehen:
{% for image in product.images %}
{% endfor %}
Füge die entsprechenden CSS- und JavaScript-Dateien in dein Theme ein. Dies kann in den Dateien theme.liquid oder header.liquid im <head>-Abschnitt geschehen.
HTML-Struktur anpassen: Um den Slider mit deinem HTML-Code zu nutzen, musst du eine umfassende Struktur erstellen, die mit dem Slider kompatibel ist. Basierend auf dem bereitgestellten Code könnten die Thumbnails bereits in der richtigen Struktur sein, aber du musst sicherstellen, dass auch das Hauptbild in diese Struktur integriert wird.
JavaScript für den Slide-Effekt: Schreibe ein Stück JavaScript-Code, der das Klicken auf ein Thumbnail abfängt und den Slide-Effekt auf das Hauptbild anwendet. Dieser Schritt erfordert eine genauere Kenntnis darüber, wie dein Theme aufgebaut ist und wie die Thumbnails mit dem Hauptbild verbunden sind:
Dies ist ein generischer Ansatz und muss möglicherweise angepasst werden, um genau zu deinem Theme und der vorhandenen Struktur zu passen. Insbesondere müssen die Klassennamen .main-image-slider und .thumbnails-slider entsprechend den Elementen in deinem Theme angepasst werden, die die Hauptbilder und Thumbnails enthalten.
Bei weitere Fragen dazu kann ich gerne einen Experten für dich empfehlen!
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 
in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.