Möchten Sie ein zweites Bild anzeigen, wenn Kunden auf Ihren Shopify-Kollektionsseiten mit der Maus über ein Produkt fahren? Oder möchten Sie für jede Variante unterschiedliche Hover-Bilder anzeigen? Dann ist diese Anleitung genau das Richtige für Sie!
Hover-Effekt in Ihrem Theme aktivieren
1- Melden Sie sich in Ihrem Shopify-Adminbereich an und gehen Sie im Seitenmenü zu Onlineshop.
2- Suchen Sie Ihr aktives Theme und klicken Sie auf die Schaltfläche Anpassen.
3- Wählen Sie im Theme-Editor in der oberen Vorschauleiste eine Kollektionsseite aus.
4 -Klicken Sie oben rechts auf das Inspector-Symbol.
5- Klicken Sie anschließend auf den Produktgitter-Bereich auf der Seite.
6- Aktivieren Sie im Einstellungsbereich auf der rechten Seite die Option „Zweites Bild beim Hover anzeigen“.
7- Vergessen Sie nicht, auf Speichern zu klicken.
Drücken Sie die Eingabetaste oder klicken Sie, um das Bild in voller Größe anzuzeigen.
So aktivieren Sie Hover-Bilder für Produktvarianten
Um Variantenbilder beim Hover korrekt anzuzeigen, können Sie unsere App verwenden:
Stamp — Variants on Collection
Mit Stamp können Sie Produktvarianten als separate Elemente auf Kollektionsseiten anzeigen. Sie können Varianten nach Farbe, Größe oder Material darstellen, sie pro Kollektion individuell anpassen und sogar nicht verfügbare Varianten ausblenden. Außerdem stellt die App sicher, dass Hover-Bilder korrekt funktionieren und die richtigen Bilder den jeweiligen Varianten zugeordnet werden.
Folgen Sie diesen Schritten, um die Einrichtung vorzunehmen:
Gehen Sie anschließend zum Abschnitt Medien oben auf der Seite und laden Sie dieselben Bilder in der richtigen Reihenfolge hoch
Melden Sie sich in Ihrem Shopify-Adminbereich an.
Öffnen Sie die App Stamp — Variants on Collection.
Wählen Sie in den Allgemeinen Einstellungen die Kollektion aus, die Sie bearbeiten möchten.
Gehen Sie zum Abschnitt Produkte in Ihrem Shopify-Adminbereich.
Öffnen Sie ein Produkt in dieser Kollektion und scrollen Sie nach unten zum Abschnitt Varianten.
Laden Sie die entsprechenden Bilder für jede Variante hoch.
❗ Wichtige Hinweise:
- Die Reihenfolge der Bilder ist entscheidend!
- Erste zwei Bilder → für die erste Variante
- Nächste zwei Bilder → für die zweite Variante
- Und so weiter…
So wird sichergestellt, dass jede Variante dem richtigen Hover-Bild zugeordnet wird.
🙏 Vielen Dank fürs Lesen!
Sie können sich hier das vollständige Tutorial-Video ansehen:
🎥 Klicken Sie hier, um es auf YouTube anzusehen
