Produkte mit Produktfilter auf der Startseite

[Dirk7]

Hallo,

ich möchte gerne auf der Startseite die Produkte einer Kollektion mit Produktfilter anzeigen. Leider wird der Produktfilter bisher nicht angezeigt, wenn ich die Kollektion hinzufüge. Ich nutze das Craft Template.

Besten Dank.

Dirk

[Dirk7 · Accepted solution]

Habe jetzt eine Anleitung zum Erstellen von Farbfiltern gefunden. Es funktioniert jetzt mit beiden Themes.

Danke.

[Gabe]

Hey @Dirk7 

Du hast also einen Vorgestellte Kollektion Abschnitt zu deine Craft Theme Startseite hinzugefügt und erwartest, dass du da einen Produktfilter einsetzen kannst, ist das richtig?

• Leider wird der Produktfilter bisher nicht angezeigt....

Was hast du gemacht um diesen da anzuzeigen? Man kann da zwar einen Hover-Effekt mit zweitem Bild anzeigen, sowie den Anbieter, und die Produktbewertung anzeigen, aber ein Produktfilter ist derzeit nicht ein Feature dieses Abschnitts da der Filter ja auf der Kollektionsseite angezeigt wie z. B. per unserer Search & Discovery App. 

Aus einer UX Design Perspektive wäre es ebenfalls nicht die beste Kundenerfahrung einen Produktfilter direkt in diesem Anschnitt zu haben da es zu einem Reload der ganzen Seite kommen würde um die Suchergebnisse des Filters anzuzeigen.

Oder meinst du Farbfilter wie visuelle Farbwerte? 

Filterwerte können visuelle Elemente wie Farben, Muster oder detailliertere Bilder enthalten. Zum Beispiel kann der Filter Farbe des Stoffes für jeden Filterwert ein kleines Farbfeld anzeigen.

Um mit deinen Filterwerten visuelle Elemente zu erstellen, richte benutzerdefinierte Daten mit Metafeldern und Metaobjekten für deinen Shop ein. Du musst außerdem die folgenden Voraussetzungen erfüllen:

• Du benötigst ein Onlineshop-Theme, das die Anzeige von filterwertbasierten Farbfeldern und Bildern unterstützt.

• Du benötigst ein Metaobjekt, das die folgenden Kriterien erfüllt:

  • Mindestens ein Feld vom Typ Farbe oder ein Feld vom Typ Datei mit Bildern. Die Felder können jeweils nur einen Wert unterstützen. Listen mit Werte werden nicht unterstützt.
  • Ein Feld zum Benennen des Filterwerts. Das Feld darf nur einen Wert zulassen. Eine Liste von Werten kann nicht als Filtername verwendet werden. Das Feld kann einer einer folgenden Typen sein:
  • einzeiliger Text
  • dezimal
  • integer
  • boolean (true oder false)

• Eine Metafelddefinition, die die folgenden Kriterien erfüllt:

  • Die Definition wurde entweder für ein Produkt oder für eine Variante erstellt.
  • Der Metafeldtyp ist ein Metaobjekt und verweist auf die im vorherigen Schritt erstellte Metaobjekt-Definition.
  • Lege fest, ob die Metafelder entweder einen Eintrag oder eine Liste von Einträgen für das Metaobjekt zulassen.

• Sowohl bei der Metaobjekt- als auch bei der Metafelddefinition muss der Storefront-Zugriff aktiviert sein.

Best Practices für visuelle Filter

Produktvariantenfilter werden in Suchergebnissen und auf Kollektionsseiten mit relevanteren Varianten verknüpft. Zum Beispiel werden nur rote Produkte angezeigt, wenn ein rotes Farbfeld ausgewählt wird. Verwende Variantenmetafelder für die Metaobjektreferenz, um die Filterung auf Variantenebene zu nutzen. Wenn die Verknüpfung mit bestimmten Varianten für deinen Filter nicht relevant ist, verwende stattdessen Produktmetafelder.

Eine Metaobjekt-Definition für ein Farbfeld sollte sowohl eine Farbe als auch ein Bildfeld enthalten. Du musst nicht für beide Felder einen Wert angeben, aber so hast du die Möglichkeit, beide Felder in der Zukunft zu verwenden.

Wenn deine Produkte oder Varianten mehrere Farben haben, nach denen gefiltert werden kann, sollte deine Metafelddefinition eine Liste von Einträgen zulassen. So kannst du einem einzelnen Artikel mehrere Metaobjekteinträge zuweisen, die jeweils als Filterwert in deinem Shop angezeigt werden.

Schritte:

Nachdem du dein Metafeld Produkten oder Varianten in deinem Shop zugewiesen hast, kannst du den Filter für deinen Onlineshop einrichten:

1. Gehe in der Shopify Search & Discovery-App zu Filter.
2. Klicke auf Filter hinzufügen oder klicke auf einen vorhandenen Filter.
3. Klicke auf das Feld Quelle und wähle dann einen Metafeld-Filter mit einer Metaobjekt-Referenz aus.
4. Klicke auf Anzeigeoptionen.
5. Wähle das Feld Bezeichnung für Filterwerte aus, indem du ein Metafeld auswählst.
6. Aktiviere die Option Visualisierung anzeigen und wähle einen Stil für das visuelle Element aus:
   • Wähle für kleine Farbfelder oder Muster die Option Farbfeld aus. Lege den Inhalt für das Farbfeld fest, indem du die folgende Auswahl triffst:
     • Ein Farbfeld für die Farbfeldfarbe.
     • Ein Bildfeld für das Farbfeldmuster.

- Wähle für Symbole, Logos oder andere Grafiken, die nicht zugeschnitten werden sollen, die Option Bild aus. Lege den Inhalt fest, indem du für das Bild ein Bildfeld auswählst.

Tipp:

Themes priorisieren häufig die Anzeige des Bildes eines Farbfeldes, nicht die Farbe. Für die Anzeige von Farbfeldern gilt: Wenn du Felder sowohl für das Farbfeldmuster als auch für die Farbfeldfarbe ausgewählt hast, wird die Farbe normalerweise nur angezeigt, wenn kein Musterbild für den Filterwert verfügbar ist.

Verhalten filtern

Es werden nur Filter angezeigt, die auf Produkte auf einer Kollektionsseite oder in einem Suchergebnis angewendet werden können.

Wenn Filterwerte aus verschiedenen Filtern ausgewählt werden, handelt es sich um eine AND-Bedingung. Dadurch kann die Anzahl der angezeigten Produkte verringert werden. Wenn du beispielsweise in den Filtern Farbe und Größe Rot und 8 auswählst, werden Produkte zurückgegeben, die rot sind und Größe 8 haben.

Wenn Filterwerte aus dem gleichen Filter ausgewählt werden, handelt es sich standardmäßig um eine OR-Bedingung. Dadurch kann die Anzahl der Ergebnisse erhöht werden. Wenn du beispielsweise die Werte Rot und Grün in einem Filter vom Typ Farbe auswählst, werden alle roten oder grünen Produkte zurückgegeben. Manche Filtertypen können stattdessen eine AND-Bedingung für ihre Filterwerte verwenden. Erfahre, wie du das Filterverhalten anpasst, indem du die Search & Discovery-App von Shopify verwendest.

Die Anzahl der angezeigten Produkte hängt auch davon ab, ob es sich um Filter auf Produkt- oder Variantenebene handelt. Ein Kunde wählt z. B. möglicherweise mehrere Farbwerte aus einem Produktoptionsfilter aus, aber nur ein Produkt wird angezeigt. Dies liegt daran, dass Produktoptionen Filter auf Variantenebene sind und alle Farben zu den Varianten dieses einen Produkts gehören.

Filterverhalten anpassen

Bei Produkt-Tag-Filtern, Metafeldlisten-Filtern und Metaobjektreferenzlisten-Filtern kannst du die Filterbedingung zwischen Werten auswählen, um die Standardbedingung OR oder die Bedingung AND zu verwenden. Wenn du z. B. beim Filtern mit AND die Werte Neu und Angebot in einem Produkt-Tag-Filter auswählst, werden nur Produkte zurückgegeben, die beide Tags haben.

Schritte:

1. Gehe in der Shopify Search & Discovery-App zu Filter und klicke dann auf Filter bearbeiten.
2. Klicke auf das Feld Quelle und wähle eine Filterquelle aus, die du deinen Kunden zur Verfügung stellen möchtest.
3. Wähle im Abschnitt Logik das Verhalten aus, das auf die Filterwerte angewendet werden soll.
4. Klicke auf Speichern.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

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.

[Dirk7]

ok. Vielen Dank für die Ausführung. Ich werde dann auf die Kollektionsseite weiterleiten. Ich habe bereits 4 Produkt-Metafelder angelegt und konnte eines davon bereits dem Filter hinzufügen. Das von mir angelegte Feld "Länge" taucht jedoch nicht bei den Quellen für Filterfelder auf. Woran kann es liegen, dass das eine Feld zu finden ist und das andere nicht? 

[Gabe]

Hey @Dirk7 

Ja, auf der Kollektions-Page selber kannst du den Filter ganz toll einrichten vor allem mit Metafelder wie oben erklärt. 

Das Problem, dass dein angelegtes Metafeld "Länge" nicht in den Quellen für Filterfelder auf Shopify erscheint, kann verschiedene Ursachen haben. Hier ein paar mögliche Lösungen:

Stelle sicher, dass das Metafeld korrekt definiert ist und alle erforderlichen Einstellungen vorgenommen wurden:

• Gehe zu Einstellungen > Metafelder > Produkte und überprüfe die Definition des Metafelds "Länge".
• Vergewissere dich, dass das Metafeld den richtigen Typ hat (z.B. Einzeiliger Text oder Dezimal).
• Überprüfe im Theme-Editor, ob das Metafeld als dynamische Quelle verfügbar ist.
• Vergewissere dich, dass das Metafeld nicht als Liste von Werten, sondern als einzelner Wert definiert ist.

Stelle auch sicher, dass das Metafeld korrekt mit dem Produkt oder der Variante verknüpft ist und in den Filtereinstellungen sichtbar gemacht wurde:

• Gehe zu Navigation > Filter und füge das Metafeld "Länge" als Quelle hinzu.
• Überprüfe, ob das Metafeld in den Produkteinstellungen ausgefüllt wurde.

Und stelle sicher, dass der Storefront-Zugriff für das Metafeld aktiviert ist:

• Gehe zu Einstellungen > Metafelder > Produkte und aktiviere den Storefront-Zugriff für das Metafeld "Länge".

VG,

[Dirk7]

ok. Ich habe das Metafeld mit dem Typ "Maß" gelöscht und als Ganzzahl Typ wieder angelegt. Jetzt taucht es bei den Quellen auf. Warum kann ich aber ein Metafeld mit dem Type Maß oder Farbe anlegen, es aber nicht als Quelle beim Filter auswählen, obwohl die Daten bei einigen Produkt gepflegt sind?

Wie kann ich im Theme-Editor feststellen, ob das Metafeld als dynamische Quelle verfügbar ist? Gibt es Metafeldtypen, die vom Shopify Theme Craft nicht unterstützt werden?

[Gabe]

Hey @Dirk7 

Schwer zu sagen. Nicht alle Metafeldtypen sind für die Verwendung als Filterquellen in Shopify geeignet. Insbesondere spezielle Typen wie "Maß" und "Farbe" haben möglicherweise Einschränkungen in ihrer Verwendung als Filterquelle. In deinem Fall konnte das Metafeld "Länge" als Ganzzahltyp erfolgreich erstellt und als Filterquelle verwendet werden, was darauf hinweist, dass Ganzzahltypen unterstützt werden.

Um sicherzustellen, dass ein Metafeld als Filterquelle verfügbar ist, überprüfe die folgenden Punkte:

• Metafelddefinition: Stelle sicher, dass das Metafeld korrekt definiert ist und für den Storefront-Zugriff aktiviert ist.
• Verknüpfung mit Produkten: Vergewissere dich, dass das Metafeld korrekt mit den Produkten verknüpft und ausgefüllt ist.
• Filterkonfiguration: Stelle sicher, dass das Metafeld in den Filtereinstellungen des Shopify Admin-Bereichs als Quelle ausgewählt wurde.

Nicht alle Shopify-Themes unterstützen jede Art von Metafeldern als Filterquelle. Um zu überprüfen, ob das Metafeld in deinem Theme (z.B. Craft) als dynamische Quelle verfügbar ist, gehe zu Online-Shop > Themes > Anpassen und zum Abschnitt, in dem du das Metafeld verwenden möchtest. Klicke auf die Einstellung, die du bearbeiten möchtest, und wähle die dynamische Quelle (das Metafeld) aus der Liste aus.

Metafeldtypen, die oft nicht unterstützt werden, umfassen:

• Farbe: Trotz der Nützlichkeit von Farbfeldern für visuelle Filter werden sie möglicherweise nicht von allen Themes unterstützt.
• Maß: Diese können ebenfalls Einschränkungen haben, je nach Theme und Implementierung.

Desweiteren findest du in unserer Doku dass die folgenden nicht unterstützt werde u.a.: JSON, Rich Text, Weight, Volume, Mixed Reference, Money, Rating, Page, Metaobject, Files, Product, und Variant Metafelder (heißt nicht das die in der Zukunft nicht dazukommen werden).

Diese speziellen Meta-Felder sind im Theme-Editor nicht verfügbar, weil sie entweder komplexe Datentypen oder Formate enthalten, die nicht direkt für die visuelle Anpassung im Editor unterstützt werden. Bei JSON oder Rich Text handelt es sich zum Beispiel um strukturierte Daten, die eine besondere Handhabung erfordern, die über einfache Texteingaben oder Auswahlen hinausgeht. Diese Einschränkung sorgt für eine reibungslosere und übersichtlichere Benutzererfahrung bei der Anpassung von Themen.

Hoffe das erklärt es! 

[Dirk7]

Ja, vielen Dank.

Dann habe ich wahrscheinlich mit "Craft" das falsche Theme gewählt, da weder Maße noch Farben als Quelle für Filter unterstützt werden.

Gibt es ein kostenloses Theme, dass Maße und Farben als Quelle für Filter unterstützt, bzw. gibt es die Möglichkeit, das einfach herauszufinden, ohne erst die Themes zu installieren und zu testen?

[Dirk7]

Ich habe jetzt mal Testweise das Theme Trade installiert, da es auch Farbfilter im Demo anzeigt. Leider kann ich in der App "Search & Discovery" nach wie vor beim Filter hinzufügen unter Quellen nicht die angelegten Produkt Metafelder des Typs Farbe finden, obwohl ich zwei Produkt Metafelder vom Typ Farbe angelegt habe und bei zwei Produkten auch Farbe ausgewählt habe.

Was kann ich da machen, um diese Filtermöglichkeiten hinzufügen zu können?

[Dirk7 · Accepted solution]

Habe jetzt eine Anleitung zum Erstellen von Farbfiltern gefunden. Es funktioniert jetzt mit beiden Themes.

Danke.

[Gabe · Accepted solution]

Hey @Dirk7 

Das Thema wird sogar hier besprochen! 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉