Mehrere Variantenbilder für Refresh Theme

[freddy730]

Hallo zusammen,

ich habe eine Onlineshop mit einem Produkt mit 3 verschiedenen Varianten im Refresh Theme.
Beim Anklicken der jeweiligen Variante hätte ich gerne, dass nur die dazugehörigen Bilder angezeigt werden.
Momentan wird das Hauptbild angepasst, alle weiteren Bilder werden aber zu jeder Variante angezeigt.
Ich habe bereits alle möglichen Youtube Tutoriols hierzu angeschaut, aber nichts will funktionieren.

Ich wäre sehr dankbar für eure Hilfe!

[Gabe]

Hey @freddy730 

Danke für die Frage und ich verstehe, dass nur ein Variantenbild ausreicht wenn der Kunden auf eine Variante klickt und nicht alle Varianten müssen angezeigt werden. Es gibt allerdings verschiedene Variantenbilder Einstellungen in den Shopify Themes und Refresh, wie z. B. ein Bilderkarussell, wie ich hier zeige (klicke in den .gif um es zu vergrössern - dauert aber ein bisschen bis es lädt):

Dafür musst du einfach die aktuellste Version des Refresh Themes eingestellt haben und mit YT Videos würde ich vorsichtig sein.

So dass der oben-abgebildete Feature im Refresh Theme funzt, stelle sicher, dass du in deinem Produktstamm, im Abschnitt Varianten, jedem Attribut (z. B. Farbe) das richtige Bild zugewiesen hast. Dies ist wichtig, um sicherzustellen, dass die Bilder auf der Produktseite im Theme korrekt mit den Varianten verknüpft sind​​:

Wenn das Ändern der Einstellungen allein das Problem nicht löst, dann haben wir auch Apps wie diese und diese App.

Es kann auch notwendig sein, den Liquid-Code deines Themes anzupassen. Hierbei könnten die Dateien product-template.liquid, product.liquid oder ähnliche von Bedeutung sein. Diese Änderungen erfordern ein gewisses technisches Verständnis, insbesondere in Bezug auf JavaScript, um einen Event Listener für die Variantenauswahl zu setzen, der das Hauptbild und die Variantenbezeichnung aktualisiert, wenn eine neue Variante ausgewählt wird.

Wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

[freddy730]

Hallo Gabe,

danke für deine Antwort!

Das "Medien anderer Varianten ausblenden" habe ich bereits aktiviert. 

Es gibt allerdings je Variante 2 Bilder. 

Mit der App "Valiant Variant Images" geht es leider auch nicht. 

So sieht die Produktseite momentan aus: 

Viele Grüße

Freddy

[Gabe]

Hey @freddy730 

Ja, ihr habt irgendwie einen anderen Setup und deswegen geht es nicht nativ in eurem Theme (entweder durch eine Codeänderung oder eine Frontend App - kann ich ja von hier aus nicht nachvollziehen) :

Wenn du es selber auf der Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.

[freddy730]

Hi Gabe, 

danke für deine Antwort. 

Allerdings hast du in deinem Beispiel je Variante nur ein einziges Bild. 

Ich möchte je Variante zwei Bilder anzeigen und alle weiteren ausgeblendet haben. 

Gibt es hierzu eine Anleitung, wie ich das einstellen kann. Ich denke, dass der Code bearbeitet werden muss..

Danke dir - Freddy

[Gabe]

Hey @freddy730 

Da bin ich wieder! 😉 

Hmm, denke nicht, dass das ohne eine Programmierung mit einem Experten Programmierer oder mit einer der oben-verlinkten Apps geht, wenn dieser Feature dir nicht ausreicht. Hast du mit einem gesprochen oder eine App getestet?

Es ist möglich, eine IF-Statement im Liquid-Code zu verwenden, um zu steuern, welche Bilder angezeigt werden, wenn eine bestimmte Variante ausgewählt wird. Der Code könnte so aussehen:

{% if product.images.size > 1 and section.settings.show_thumbnails %}
...
{% endfor %}

Dabei wird das primäre Bild weiterhin auf das relevante Bild aktualisiert, wenn eine Variante ausgewählt wird​ (siehe diesen langen Thread dazu).

Hoffe das hilft dir weiter! 😉