Mehrere Bilder für eine Variante

[HaYaDa]

Hallo Community,

habe ein Produkt angelegt, mit den Optionen Farbe und Größe. Jede Farbe hat jeweils 4-5 Bilder, da Kleidung machts auch Sinn, weil Kunden gerne die Kleidungen aus anderen Blickwinkeln und Ansichten sehen wollen.

Wenn ich nun das Produkt öffne habe ich da ca. 30 Bilder, was schrecklich aussieht... Ich will, dass nur die relevanten Bilder zu einer Farbe angezeigt werden, wenn etwas im Dropdown-Menü ausgewählt wird bzw. wenn eine voreinstellte Option festgelegt wird.

Ich habe folgenden Ansatz versucht:

- alle Bilder einer Farbe, bekommen denselben identischen alt text

- eine Filter-Funktion in theme.js definiert, was alle Bilder beim Laden der Seite ausblendet und nur die Bilder anzeigt welche die Farbe im Farbauswahl-Dropdown Menü ausgewählt ist.

- diese Filterfunktion wird bei Laden des Produktes und bei Änderungen im Farbauswahl-Dropdown-Menü geupdadet

 Allerdings nicht mit dem gewünschten Ergebnis.

Solche Aktionen mit Vanilla JS und/oder in React relativ simpel umzusetzen, aber in liquid nicht auf Anhieb geschafft.

Meine Anfrage beim englischsprachigen Support mit dem Ergebnis:

-beauftrage einen Developer oder installiere eine App.

Vielen Dank im Voraus für konstruktive Tipps und Ratschläge...

Freundiche Grüße

[Gabe]

Hey @HaYaDa 

Da hast du völlig recht, dass das nicht so eine tolle Kundenerfahrung anbietet wenn alle Variantenbilder angezeigt werden anstatt nur die ausgewählten Optionen.

Erstens, Wenn das ein Shopify Theme ist, dann schicke uns doch ein Ticket und ggf. können wir das machen als Teil deines Design Time Richtlinie! Schicke uns ein Ticket hier um einen tollen Support zu bekommen. Wenn du es aber selber versuchen möchtest, dann rate ich das zuerst in einer Theme-Kopie zu machen bevor man das Live Theme bearbeitet.

Dann angenommen, dass die Variante das richtige Image als featured image zugeordnet hat, würde ich dies so angehen, dass ich Image-update bei Variantenwechsel (falls diese Funktion nicht schon aktiv ist) ermögliche (Anleitung hierzu gibt es in der Community), die Thumbnails unter dem Image ausblenden. Dann würde immer nur das Bild der gerade gewählten Variante erscheinen. 

Hat die Variante mehrere Bilder, die angezeigt werde sollen, Bilder anderer Varianten jedoch nicht, müsste man dem image Alt Text des Bildes einen Marker hinzufügen, z B IMG_iPhoneXS und eine Abfrage in den code geben, welche die Variante abfragt und mit dem image Alt Eintrag vergleicht.

Aber unser Theme Support ist ggf. in der Lage, das für dich umzusetzen so dass die Variantenbilder so aussehen wie du es haben möchtest.

Die können eine neue Einstellung im Produkt -Seiten-Abschnitt des Design-Editors erstellen, wo das primäre Bild sich auf das relevante Bild aktualisiert, wenn eine Variante aus dem Dropdown ausgewählt wird.

DIY - do it yourself

Das kann man ggf. im Code machen (ich bin weiß Gott kein Experte) aber bevor man irgendeinen Code bearbeitet, würde ich wie gesagt empfehlen, zuerst ein Duplikat des Themes zu erstellen. Dann ein Beispiel ist es in der 'theme.scss.liquid' folgendes in einer neuen leeren Zeile einzufügen und zu speichern:

.product-thumb--slider {display:none}
.flickity-page-dots {display:none !important}

Copy

Oder hier -> das n+3 zeigt 2 Bilder, oder du kannst zu n+4 wechseln, wenn du z.B. 3 Bilder zeigen willst usw.

.product-thumb--cell:nth-of-type(n+3) {display:none}
.flickity-page-dots {display:none !important}

Copy

Ggf. geht das auch indem du eine alternative Produkt Vorlage erstellst:

• https://shopify.dev/tutorials/customize-theme-create-alternate-templates 
• https://shopify.dev/tutorials/customize-theme-hide-variants-that-are-sold-out
• https://shopify.dev/tutorials/customize-theme-select-variants-by-clicking-images
• https://shopify.dev/tutorials/customize-theme-show-featured-image-on-product-page

Ansonsten eine App wie diese hier oder diese hier oder eben einen FED (frontend dev) anheuern wie taskhusky.com oder HeyCarson.com. Die leisten super Arbeit!

VG,