Hey @Jaywe
Da das hier der deutsche Technische-Fragen Leitfaden ist, werde ich hier auf Deutsch antworten.
Du möchtest also deine Varianten Bilder deines Spark Themes etwas effizienter mit einem Bilderkarussell auf Mobile anzeigen, um das viele Scrollen für deine Kunden zu reduzieren und somit die UX deines Shops zu verbessern. Das Spark Theme ist auch ein super Theme und damit wirst du ein tolles Shop aufbauen! Sehr zu empfehlen...
Und du sagst du brauchst ein "Thumbnail Carousel" wie in den Free Themes, sprich, Produkte nebeneinander (mit einem Pfeil?) anstatt untereinander zu platzieren. Also mit links-rechts Pfeile auf Handy anstatt das viele runterscrollen um die Bilder anzusehen. Wenn das nicht in deinen Theme Einstellungen geht -> hast du die Theme Einstellungen durchgekämmt (manchmal gibt es das aber man muss es finden...)?
Um einen Produktbilder Karussell im Theme für "Mobile Only" einzubauen wird eine größere Programmierung verlangen und wir haben Experten die dir dabei helfen können. Eine App die das viele schneller und reibungsloser für dich machen kann siehst du hier.
DIY im Code machen - ohne Gewähr und bitte nur in einer Testumgebung testen mit einen Experten, nicht im Live-Theme:
Es kann schwierig sein, ein Feature wie das Thumbnail-Carousel in ein Theme selber zu integrieren, da jedes Theme anders aufgebaut ist und unterschiedliche Technologien verwendet. Es gibt auch verschiedene Arten von Thumbnail-Carousels, die unterschiedliche Codierungsanforderungen haben können.
Wenn das benötigte Feature nicht im Theme enthalten ist, muss man es manuell hinzufügen oder von einem Entwickler hinzufügen lassen (siehe Link ganz unten). Wenn du nicht über die erforderlichen technischen Maßnahmen verfügst, ist es ratsam, einen Shopify-Expert oder einen Freelancer zu engagieren, um das Feature einzubauen.
Es ist auch wichtig zu beachten, dass jeder zusätzliche Code, potenziell die Ladezeit der Website erhöht und sich auf die Leistung auswirken kann. Daher ist es wichtig, sicherzustellen, dass der Code effizient und optimiert ist. Es kann außerdem dein Theme aus den Theme Updates ausschließen.
Hier ist ein Beispiel für HTML-Code, um ein Thumbnail-Carousel zu erstellen:
<div class="thumbnail-carousel">
<div class="main-image">
<img src="main-image.jpg" alt="Main Image">
</div>
<div class="thumbnails">
<div class="thumbnail-item">
<img src="thumbnail1.jpg" alt="Thumbnail 1">
</div>
<div class="thumbnail-item">
<img src="thumbnail2.jpg" alt="Thumbnail 2">
</div>
<div class="thumbnail-item">
<img src="thumbnail3.jpg" alt="Thumbnail 3">
</div>
</div>
</div>
Die "thumbnail-carousel" ist der Container, der sowohl das Hauptbild als auch die Miniaturansichten enthält. Die "main-image" Class zeigt das Hauptbild an, während die "thumbnails" Class den Container für die Miniaturansichten darstellt. Die "thumbnail-item" ist das Element, das jede Miniaturansicht enthält.
Hier ist ein Beispiel für CSS-Code, um das Thumbnail-Carousel zu stylen:
.thumbnail-carousel {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 100%;
margin: 0 auto;
}
.main-image img {
max-width: 100%;
height: auto;
}
.thumbnails {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.thumbnail-item {
margin: 0 10px;
cursor: pointer;
}
.thumbnail-item img {
max-width: 100%;
height: auto;
opacity: 0.6;
transition: opacity 0.3s ease-in-out;
}
.thumbnail-item.active img {
opacity: 1;
}
Man kann diese CSS-Regeln anpassen, um das Aussehen des Carousels an das Theme anzupassen.
Und hier ist ein Beispiel für JavaScript-Code, um das Thumbnail-Carousel funktionsfähig zu machen:
$('.thumbnail-item').click(function() {
var img_src=$(this).find('img').attr('src');
$('.main-image img').attr('src', img_src);
$('.thumbnail-item').removeClass('active');
$(this).addClass('active');
});
Der Javascript verwendet jQuery, um auf Klick-Ereignisse zu reagieren. Wenn ein Benutzer auf eine Miniaturansicht klickt, wird das entsprechende Bild im Hauptbildbereich angezeigt und die aktive Klasse auf das geklickte Element angewendet.
Hinweis:
Die obigen Snippets sind ohne Gewähr und nur Beispiele um euch in die richtige Richtung zu lenken und muss je nach Theme-Anforderungen angepasst werden. Es wird auch empfohlen, den Code in einer separaten JavaScript-Datei zu speichern und in das Theme von da aus einzubinden.
Wie gesagt, einen Experten kann dir dabei helfen und wenn du deine Frage in unserer privaten FB Gruppe hier postest dann wird sich einer melden.
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
