Falsche Produktphoto anzeige

[coonloo]

Hallo Zusammen, 

unser Problem ist, dass bei unseren T-Shirts die falschen Farben angezeigt werden. Kennt ihr eine App oder einen Trick wie man dieses Problem lösen kann? ( Im Screenshot ist die Problematik zusehen) 

 Wir würden uns über eine Antwort oder Lösungen freuen. 

Euer coonloo Team 🙂

[Gabe]

Hey @coonloo Team! 

Danke für die Beschreibung und dass "die falschen Farben angezeigt werden" kann mehrere Ursachen habe z. B. wie ihr die Varianten und Varianten Bilder eingerichtet habt im Produktstamm. Bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren.

In deinem Screenshot sieht man das Tee mit "Hope" Als Slogan. Das Thumbnail ist auch korrekt ausgewählt. Die Optionen sind XS und Natural Raw aber das sagt uns wenig denn zwei weitere Tees daneben sind auch weiss.

Frage dazu: ihr erwartet, nehme ich an, dass wenn man eine Option auswählt wie "Schwarz" das Variantenbild im Hauptbild sich auch ändert und nicht statisch bleibt. Ist das bei euch nicht so (konnte ich deiner Beschreibung nicht entnehmen)? Wollt ihr nicht vielleicht Colour Swatches anstatt den "Ghost Buttons" in deinem Bild? Siehe was ich meine in meinem animated .gif aus meinem eigenen Testshop aufgenommen hier:

Und möchtet ihr auch, dass wenn man das Varianten Thumbnail anklickt, die Optionen sich auch ändern? Sprich, eine bidirektionale Logik anstatt der unidirektionalen Logik im animierten .gif oben?

Nur einen Hinweis dazu: die entgegengesetzte Logik ist ziemlich schwierig in das Code einzubauen, sowie sehr störanfällig. Man kann auch eine Logik in das Produkt Liquid Code einbauen wie in unserer Anleitung hier oder eine mehrere Variantenbilder der ausgewählten Variante anzeigen wie in dieser App Demo. 

Die oben-verlinkte StarApps Variant Image App erlaubt es beispielsweise der Produktseite einen sauberen und professionellen Look zu geben sowie ein verbessertes UX oder Kundenerlebnis und so die Konversionen zu erhöhen. Du musst die Variantenbilder nicht manuell jeder Variante im Produktstamm zuordnen da die App die Variantenbilder alle automatisch gruppiert und behält dabei den Stil und die Funktionalität deiner Bildergalerie bei. Die App fügt keine neue Bildergalerie zur Produktseite hinzu und minimieren so die Auswirkungen der App auf deinen Shop.

Wollt ihr nicht euren Kunden auch erlauben ihre eigene Slogans oder Bilder auf die Tees ausdrucken zu lassen?

Wie sind eure Umsätze - gut oder nicht so gut? Möchtet ihr 100 Tees/Hoodies usw. pro Tag verkaufen oder nur 30 pro Monat? Ein POD Shop muss einen Wow-Faktor übermitteln sowie die 4 Sense-of-Lifestyles (Zuhause beim relaxen, in der Arbeit mit den Arbeitskollegen, Outdoor beim sporteln oder im Park mit dem Hund spazieren/draußen in der Natur, und schließlich beim Ausgehen in der Stadt mit dem Freundeskreis).

Biete ihr sog. "Statement Pieces" an? Kann ich einen Hoodie bei euch einkaufen, der verkörpert wer ich bin, und denn ich überall tragen möchte, egal wo ich bin?

Zeigt ihr im Shop (vorzugshalber mit Looping Video), wie eure Artikel hergestellt werden in der Werkstatt, sowie wie robust sie sind (beispielsweise, wie sie immer noch wie neu aussehen, nachdem sie aus der Waschmaschine rauskommen)?

Die Variant Option Product Options App bietet unbegrenzte Optionen auf der Produktseite um deine Kunde eine tolle UX anzubieten, wie Colour Swatches, Farbvarianten, Bildmuster, benutzerdefinierte Textfelder, Datei-Uploads, Preiszusätze, Produktvariationen, Gravur, Textfelder, Textfelder für Textprodukte. 

Lass uns gerne diese Themen hier weiter besprechen! 😉

[coonloo]

Hi Gabe, 

Vielen dank für die schnelle Antwort. Unser Problem bezieht sich darauf, dass zb wenn man die Farbe weiß ausgewählt hat noch die beiden anderen Farboptionen angezeigt werden. Wir würden gerne bei Weiß nur weiße Produktbilder angezeigt bekommen. Unsere Frage wäre, gäbe es denn noch andere Apps oder Funktionen in Shopify um diese Bilderanzeige zu bearbeiten und zu Personalisieren ? 

Ich schaue mir mal deine Vorschläge an und falls ich nicht fündig werde melde ich mich erneut 🙂 . 

Nochmals Vielen Dank für die Hilfe

Euer coonloo Team ❤️

[Gabe · Accepted solution]

@coonloo 

Ja, da hast du recht und es gibt Möglichkeiten, wie man dieses Problem im Shop lösen kann. 

Die Variant Image Automator App ermöglicht es, Bilder automatisch den richtigen Varianten zuzuordnen. Die Variant Image Penguin App kann steuern, welche Bilder bei der Auswahl einer Variante angezeigt werden.

Man kann auch einen benutzerdefinierten Code schreiben, um sicherzustellen, dass nur die relevanten Bilder für jede Produktvariante angezeigt werden. Hier ist ein einfacher Ansatz, um dies zu tun:

1. Zuerst sicherstellen, dass jedes Produktbild mit einer spezifischen Variante (z.B. Farbe) verknüpft ist. 

2. Anpassung des Liquid-Templates: Öffne das Produkt-Template des Themes (product-template.liquid oder ein ähnlich benanntes File) im Shopify-Adminbereich unter Online-Shop > Themes > [Ihr Theme] > Aktionen > Code bearbeiten.

3. Finde den Bereich, der die Produktbilder anzeigt. Hier ist eine einfache FOR-Loop, die man in einer Theme Kopie zuerst testen könnte:

{% for image in product.images %}
  {% if image.alt contains variant.title %}
    <img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt }}">
  {% endif %}
{% endfor %}

In diesem Code gehen wir von der Annahme aus, dass der alt-Text des Bildes den Namen der Variante enthält (z.B. "Weiß"). Wenn der Kunde eine Variante auswählt (in diesem Fall "Weiß"), werden nur die Bilder angezeigt, deren alt-Text den ausgewählten Variantennamen enthält. Um sicherzustellen, dass die Bilder dynamisch aktualisiert werden, wenn der Benutzer eine andere Variante auswählt, benötigt man zusätzlich etwas JavaScript für dynamische Updates:

document.querySelector('[name="id"]').addEventListener('change', function(e) {
  const selectedVariant = e.target.options[e.target.selectedIndex].textContent;
  document.querySelectorAll('.product-image').forEach(function(image) {
    if (image.alt.includes(selectedVariant)) {
      image.style.display = 'block';
    } else {
      image.style.display = 'none';
    }
  });
});

Beachte, dass das als einfaches Beispiel dient und eventuell an die spezifische Shopify-Themenstruktur und Bedürfnisse angepasst werden muss.

Einige Premium-Themes bieten erweiterte Optionen für die Anzeige von Produktbildern basierend auf Varianten. Es könnte sich lohnen, weitere Themes zu überprüfen oder in Betracht zu ziehen, zu einem anderen Theme zu wechseln, das diese Funktionalität bietet.

Zusammengefasst gibt es mehrere Ansätze, um das Problem der Produktbildanzeige im Shopify-Shop zu lösen. Man sollte zunächst überprüfen, ob man die Produktbilder korrekt den Varianten zugeordnet hat.