Bilder einer Variante ausblenden, wenn eine andere Variante ausgewählt ist

[helixearplugs]

Hallo Community,

ich stehe vor einer Herausforderung und hoffe, jemand kann mir helfen. Ich habe ein Produkt mit zwei Varianten und insgesamt 8 Medien. Davon sind 4 für die schwarze Variante und die restlichen 4 für die weiße. Meine Frage ist, ob es möglich ist, die Bilder einer Variante auszublenden, wenn die andere Variante ausgewählt wird. Gibt es eine Funktion oder einen Code, den ich verwenden kann, um dies in meinem Shopify-Shop umzusetzen? Über eure Hilfe würde ich mich sehr freuen!

Vielen Dank im Voraus!

Theme: Dawn 9.0.0

[Gabe]

Hey @helixearplugs 

Danke für die Frage und es kann manchmal möglich sein, in Shopify die Bilder einer Produktvariante auszublenden, wenn eine andere Variante ausgewählt wird. Diese Funktionalität ist oft nötig, um die Nutzererfahrung zu verbessern, indem nur die relevanten Bilder für die ausgewählte Produktvariante angezeigt werden. Einige Shopify-Themes bieten diese Funktionalität standardmäßig an und wie ich sehe ist dein Dawn Theme noch auf Version 9.0. Wenn du es nicht auf 12.0 updaten kannst, hast du eine frische Version 12.0 zum Shop hinzugefügt um sie zu testen on diese Funktionalität da etwas besser ist?

Überprüfe zunächst die Einstellungen der Dawn Version 12.0:

• Gehe zu deinem Shopify-Adminbereich und dann zu „Online Store“ > „Themes“.
• Klicke auf „Customize“ für das Theme, das du verwendest.
• Überprüfe die Einstellungen für Produktseiten. Einige Themes haben eine Option, die es ermöglicht, Bilder basierend auf der ausgewählten Variante anzuzeigen oder auszublenden.

Anonsten, wenn dein Theme diese Funktion nicht unterstützt und du keine App verwenden möchtest, kannst du benutzerdefinierten Code hinzufügen. Dies erfordert Kenntnisse in HTML, CSS und Liquid:

• Füge deinem Produkt-Template JavaScript-Code hinzu, der auf Änderungen bei der Variantenauswahl reagiert.
• Verwende JavaScript, um zu erkennen, welche Variante ausgewählt ist, und blende dann die entsprechenden Bilder ein oder aus.

Wenn du mit der Bearbeitung von Code nicht vertraut bist, könnte es eine gute Idee sein, einen Shopify-Experten oder Entwickler zu konsultieren. Sie können dir helfen, die gewünschte Funktionalität zu implementieren, ohne das Risiko einzugehen, deinen Shop zu beschädigen.

---
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.

[Timbery]

Hi @Gabe,

ich habe die neueste Dawn V15 und in dieser kann man ja endlich ganz einfach Farb-Metafelder mit den Produkten verbinden:

Aber wenn eine Variant ausgewählt wird, werden trotzdem alle Bilder angezeigt und nicht nur die zu dieser Variante zugehörigen Bilder. Wie funktioniert die Logik dafür? Muss man im Alttext der Bilder etwas bezüglich der Farbe ergänzen damit es weiß welche Bilder zusammengehören?

Die von dir beschriebene Option habe ich natürlich aktiviert.

Vielen Dank und viele Grüße

[Gift-o-the-Jab]

@Timbery 

Ja, der Post war letztes Jahr und du zeigst die neue Produkt Taxonomie mit Metafelder. So weit ich weiss, arbeiten die Metafelder auf Produktebene statt Variantenebene. 

Ich hab's aber jetzt im eigenen Testshop mit einem Fake Kaffee Produkt getestet und es hat so halb gefunzt. So ganz komme ich nicht dahinter was die genaue Logik ist oder was die Limits sind. Irgendwie wird das erste der 3 Variantenbilder festgepinnt (ich meine den braunen Kaffee, nicht das Masterbild mit dem Prodomo Branding) Siehe hier:

EDIT: oben ist Dawn V. 14, deswegen funzt die Logik nicht ganz korrekt. Jetzt habe ich auf V.15 upgegraded und da funzt die Logik einwandfrei:

[Timbery]

@Gift-o-the-Jab 

Vielen Dank für deine Rückmeldung und deine Mühe!

Es funktioniert einwandfrei, wenn dein zweites Bild für alle Varianten das Selbe ist. Aber versuche es doch mal damit, dass jede Variante ihre eigenen 3 Bilder hat.

Das funktioniert dann schon nicht mehr. Es sollte eine Lösung geben, wie man Shopify sagen kann, welche Bilder zusammen gehören, also Blauer Kaffee hätte dann bei dir eben 3 Bilder die zum blauen Kaffee gehören. Brauner Kaffee hätte dann 3 Bilder die nur zum braunen Kaffee gehören, etc.

Wenn es nur so geht, dass ab dem zweiten Bild für alle Varianten die Selben Bilder zu verwenden sind, dann ist die Funktion doch sehr sehr eingeschränkt 😞

[Gift-o-the-Jab]

@Timbery 

Wie meinst du "...dass jede Variante ihre eigenen 3 Bilder hat"? Jede Variante bekommt nur 1 Bild:

Das Bild mit dem Prodomo Branding habe ich auf Produktebene (anstatt Variantenebene) zum obigen Testprodukt hinzugefügt und da kann ich ja mehrere Bilder verwenden. Diese aber an die jeweiligen Varianten binden, so dass jede Variante (wie in deinem Beispiel) 3 Bilder hat, das müsstest du dann ins Liquid reincoden. 

Beispiel einer JavaScript und Liquid-Code-Anpassung:

• Füge die Funktion filterMedia() in deinem global.js-Skript hinzu, um nur die relevanten Bilder anzuzeigen.
• Passe den Liquid-Code in der product-template.liquid oder main-product.liquid Datei an, um die Bilder entsprechend den Varianten anzuzeigen, wie mit dieser FOR/IF-Loop:

{% assign selected_variant = product.selected_or_first_available_variant %}
{% for image in product.images %}
  {% if image.alt contains selected_variant.option1 %}
    <img src="{{ image.src }}" alt="{{ image.alt }}" class="variant-image">
  {% endif %}
{% endfor %}

[Timbery]

@Gift-o-the-Jab 

Vielen Dank für deine Hilfe!

Ich habe leider so gut wie 0 code-Erfahrung.

Wo soll ich die Funktion filterMedia() in global.js hinzufügen? Da gibt es sehr viele Funktionen.

Und wo soll ich den Liquid-Code hinzufügen? Egal wo in dem .liquid oder gibt es ne bestimmte Stelle dafür?

Danke!

[Leicke]

Hallo zusammen,

Wir haben das gleiche Problem.
Wir haben hier z.B. ein Produkt in den 3 Farben Titansilber, Lagunenblau und Space Grey. Auf der Produktebene sind insgesamt 26 Bilder am Produkt verknüpft:

Wie man sieht, gibt es z.b. für die blaue Variante des Fahrrads 6 Bilder.
Nun ist es aber so, dass Shopify bei einer Variante nur 1 Hauptbild erlaubt. Shopify gestattet nicht, weitere Bilder, die mit der Variante zusammenhängen, zu definieren (so wie das z.B. in unserem ERP der Fall ist, und bei anderen Markplätzen wie z.B. Otto.de):


Ich habe, wie @Gabe eingangs vorgeschlagen hat, bei unserer Ride 15.0 Theme die Checkbox aktiviert. Das führt aber nur dazu, dass in der Ansicht die beiden Hauptbilder der anderen Farbvarianten ausgeblendet werden (es gibt damit logischerweise nur 24 statt der ingesamt 26 Bilder):

 

Man bekommt also als Kunde im Zweifel sehr viele Bilder gezeigt, die bis auf die Farbe z.b. in der Perspektive identisch sind (gerade bei "größeren" Produkten wie Fahrrädern, bei denen man viele Bilder zeigen muss), die einen nicht interessieren. Man muss sich ewig durchklicken/durchscrollen.
Korrigiert mich gerne, aber ich vermute, dass der Ansatz von @Gift-o-the-Jab nicht funktioniert, solange auf Produkt- oder Variantenebene die Bilder nicht zugeordnet werden können. Woher sollte das Script auch wissen, welches Bild zu blau und welches zu grau gehört? Es ist ja nirgends definiert mit Ausnahme des Hauptbildes.

Vielleicht gibt es eine App, die eine Zuordnung von mehr als einem Bild zu einer Variante erlaubt? Ich persönliche finde, das so eine Funktion eigentlich nicht in eine App gehört, sondern eine Kernfunktion sein sollte.

Grüße Daniel

[Timbery]

Hi @Leicke,

habe darüber auch mit dem Shopify Helpdesk gesprochen, leider ist es mit deren Swatches nicht so vorgesehen. Ich persönliche finde auch, wenn es schon Swatches gibt, dann sollte es doch möglich sein gewisse Bilder miteinander zu verknüpfen und nicht wild alle Bilder einzublenden. Der Helpdesk meinte "das ist eine tolle Idee, die wir mit unseren Entwicklern besprechen werden".

Also entweder eine App nutzen (obwohl nichtmal die alle diese Funktion bieten), ich nutze die GLO Color Swatch App, die hat diese Funktion nämlich. Oder du lässt dir dafür einen Code schreiben. Ich will das bei einem Entwickler anfragen, aber ich weiß noch nicht, ob es möglich ist, einen Code zu schreiben der dann für die nächsten Theme-Updates auch wieder verwendet werden kann, weil wenn nicht, macht dieser Code für mich auch wenig Sinn. Ich müsste den Code jedes mal anpassen lassen, dann kommt es billiger diese GLO-App zu nutzen und eventuell dafür zu bezahlen um mehr Funktionen zu erhalten.

Es gibt auf Youtube Entwickler die Codes und Anleitungen hochgeladen haben, aber diese sind nicht mehr für das aktuelle Dawn-Theme V.15 nutzbar...

[Leicke]

Hallo @Timbery 
"das ist eine tolle Idee, die wir mit unseren Entwicklern besprechen werden" finde ich super...;)
Ich habe mir die GLO Color Swatch App auch installiert, aber zumindest in der Free Version bin ich da noch nicht so richtig fündig geworden. Ich suche noch nach einer ausführlichen Dokumentation. Hast du einen Entwickler gefunden?
Gruß Daniel

[Timbery]

Hi @Leicke,

was suchst du denn in der Dokumentation? Vielleicht das hier: https://globo.io/kb/connect-different-products-and-show-them-under-the-type-of-variants/

Lies dir mal die Doku durch, vielleicht brauchst du keinen Entwickler dafür. Ansonsten kannst du Globo auch direkt kontaktieren, die sind super mit Ihrem Support 😉

[Timbery]

Hi @Leicke,

ich habe in der Zwischenzeit einige Themes gekauft und damit herumprobiert. Nach Monaten bin ich nun auf ein Theme gestoßen, dass sehr viele Features bereits enthält, was mir viele andere Apps erspart hat. Es ist sogar das billigste, von denen die ich gekauft habe. Innerhalb von ein paar Tage ist das Theme nun so wie ich es haben wollte, mit der Unterstützung des wirklich tollen Supports. Eines der tollen Features ist, es hat die von uns gesuchte Funktion: Es werden nur Bilder der ausgewählten Variante angezeigt. Das funktioniert so, dass man den Alt-Text der Bilder als Variante bennent, zB.: Du hast Farbvarianten (Blau, Schwarz, etc.) dann steht als Alt-Text von dem Bild eben nur "Blau" oder "Schwarz". Was den kleinen Nachteil hat, dass die Alt-Texte nicht so passend für SEO sind, aber damit kann ich leben, die Funktion ist mir nämlich sehr wichtig.

Ich weiß nicht, ob ich hier einfach den Link zu dem Theme posten darf oder nicht, also falls es dich interessiert, melde dich einfach.

Viele Grüße