Produktkategorie auf Produktseite (SIMPLE Theme)

[FPI]

Hallo,

ich möchte auf der Produktseite in der oberen Zeile die Kategorie mit anzeigen lassen.
So sollte das aussehen:
 

Kennt jemand eine Lösung ?

Gruß
FPI

[Gabe · Accepted solution]

Hey @FPI 

Danke für die Frage und da wollte ich fragen, ist dass das Simple oder das Minimal Theme? An erster Stelle, da das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail hier damit wir einen genaueren Blick darauf werfen können.

Ich sehe dass das Problem mit dem Minimal anstatt dem Simple schon gemeldet wurde und das gehe ich hier ein:

Man legt eine Kategorie an und fügt dann Produkte in die Kategorie. Im Hauptmenü ist ein Link zur Kategorieseite und da zeigen die Breadcrumbs "Home > Kategorie-Name" usw. Klickst du auf der Kategorieseite auf das Produkt, dann wechseln die Breadcrumbs zu "Home > Produkt-Name". Was man aber erwartet wäre "Home > Kategorie-Name > Produkt-Name".

Es kann mit diesem unerwarteten Systemverhalten damit zu tun haben, dass die Breadcrumbs in irgendeiner Form auch mit den Urls, die aufgerufen werden zusammenhängen (siehe breadcrumb.liquid). Wenn du in deinem Shop ein Produkt aufrufst, dann steht bei der Url ".../products/produkt-name" oder ".../collections/kategorie-name/products/produkt-name".

In den meisten Threads geht es um das genaue Gegenteil, weil das Theme früher wohl anders war. Dort wurde geraten nach "{{ product.url | within: collection }}" zu suchen und das "| within: collection" aus SEO Gründen zu entfernen – dadurch wurden von Shopify nur die canonical Links benutzt, aber gleichzeitig gehen damit die Breadcrumbs flöten. Die nicht-canonischen Links werden übrigens von Shopify trotzdem angelegt. 

Im Minimal Theme 12.4.0 Code scheint das anders zu sein und wenn man die funktionierenden Breadcrumbs möchte, muss man das "| within: collection" hinzufügen. Zusätzlich wird man "{{ product.url}}" nicht mehr in product-grid-item.liquid finden. Stattdessen muss man dort nach "{{ featured.url}}" suchen und es zu "{{ featured.url | within: collection }}" ändern. 

Dies scheint ein erwartetes Systemverhalten des Minimal Themes zu sein und das habe ich jetzt in meinem eigenen Shop reproduzieren und mit dem Verhalten des Simple Themes vergleichen können hier. Ich bin mir trotzdem nicht sicher, was der Sinn dahinter ist und warum die Kategorie selber auf diese Weise aus dem Breadcrumb Trail ausgeschlossen wird. 

Wie gesagt, meistens wollten die Leute nur die canonical Url haben (also ohne die collection), weil sie befürchten, dass ihr SEO negativ beeinflusst wäre, wenn in ihrem Shop mehrere Links für die gleiche Seite benutzt werden (wobei die doppelten Links ja trotzdem automatisch von Shopify generiert werden). Der Breadcrumb Code nutzt aber nunmal die Url und wenn die collection da rausgeschmissen wird, dann funktionieren die Breadcrumbs nicht richtig.

Wie auch immer, anscheinend wurde der Code in der aktuellen Minimal Theme Version dahingehend geändert und das kann verwirrend sein, wenn man dann nach Lösungen sucht und nicht versteht, warum die Leute etwas default-mäßiges abschalten wollen, was man selber gerne aktiviert hätte und bei einem selber anders aussieht. 

[meret]

hallo gabe! ich habe genau dasselbe problem (theme minimal) und konnte es aber mit der obenstehenden antwort trotzdem in 6h versuch nicht lösen! es wäre supoer, wenn ich eine für heute gültige genaue anleitung bvekommen könnte, wo und wie ich das lösen kann!
konkret: ich möchte,m dass wenn eiun user auf meiner startseite auf "collection (die kategorie-liste) klickt und dann weiter auf eine kategorie mit verschiedenen designs, dass er dann im auf der seite angezeigten linkabfolge auch die kategorielistenseite sieht, um darauf zurückklicken zu können, um von dort dann eine neue kategorie anzuklicken. alles klar? hier meine shop-url:https://james-testshop.myshopify.com/admin/themes
und ein screenshot.
wäre froh über eine baldige antwort, liebe grüsse aus wien, lady james meret

[Gabe]

Hey Lady James Meret! @meret 

Danke für das Bild und schauen wir hier wie man das im Minimal Theme lösen können. Bitte beachte auch, dass das Minimal Theme bereits von uns "gesunsetted" wurde und daher nicht mehr unterstützt wird. Meine Angaben oben von 2021 sind leider auch noch aktuell, aber 👀 wir hier weiter wie wir das Problem lösen können. Ggf. werdet ihr eine Custom Solution im Theme Code in anbetracht nehmen müssen. Mehr dazu weiter unten.

Frage dazu: hast du eines unserer tollen neuen 2.0 Themes in Erwägung gezogen, um es zu testen sowie das Breadcrumb-trail Verhalten da anzuschauen ob es auch das macht? Einfach mehrere Free- sowie bezahlbare Themes zum Shop hinzufügen falls ihr doch es überlegt. Ein neues 2.0 Theme kann euer Shop so richtig modernisieren/aufpeppen, und es mehr an eure Produkte und Branding anpassen.

Es ist also ein viel-gemeldetes Verhalten, dass die Breadcrumb die Collection überspringt. Leider verlinkt die Breadcrumb zu HOME und nicht zurück zu den Collections. Das kann aber auch damit zu tun haben auf welchem Weg du in deinem obigen Bild auf dieser Seite angekommen bist. Wenn über eine Collection dann zeigt sich die Collection im Breadcrumb meist doch an. Wenn aber über einen anderen Weg dann weiss ja logisch-gesehen der Breadcrumb Code nicht welche Collection in der Breadcrumb angezeigt werden soll. Somit lässt sie die Collection ganz aus.

Andere Themes (wie unser unterstütztes Motion Theme) haben das auch im Theme Editor als Einstellung, dass man ein oder ausschalten kann wie hier abgebildet:

Oder eben eine App wie diese hier. Oder diese hier.

DIY

Ggf. kannst es aber selber reinbasteln im Code (immer zuerst in einer Theme-Kopie/Testumgebung) zusammen mit einem Experten und gerne kann ich welche empfehlen. Dann haben wir einen tollen Blog zum Thema hier. Das macht man aber zuerst in einer Testumgebung und hier wäre eine weitere Anleitungen. Dann wäre ein weiterer Code den du testen kannst dieser hier.

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 negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Suche die Datei, die Ihre Breadcrumb-Navigation enthält. Dies ist normalerweise "breadcrumb.liquid" im "Snippets"-Ordner, kann aber je nach Theme variieren. Dann die Breadcrumb-Navigation anpassen, wie in meinen obigen Links bereits empfohlen wird. Hier ist ein weitere Code, den man auch verwenden könnte:

{% if template contains 'collection' and collection %}
   <a href="/collections">Collections</a> >
   <a href="/collections/{{ collection.handle }}">{{ collection.title }}</a>
{% elsif template contains 'product' and product %}
   <a href="/collections">Collections</a> >
   <a href="/collections/{{ product.collection.handle }}">{{ product.collection.title }}</a> >
   <a href="/products/{{ product.handle }}">{{ product.title }}</a>
{% endif %}

Dieser Code erstellt eine Breadcrumb-Navigation, die den Link zur Sammlungsseite und dann den Link zur aktuellen Sammlung oder zum aktuellen Produkt enthält. Wenn der Benutzer sich auf einer Sammlungsseite befindet, wird nur der Link zur Sammlungsseite und der Link zur aktuellen Sammlung angezeigt. Wenn der Benutzer sich auf einer Produktseite befindet, wird zusätzlich der Link zum aktuellen Produkt angezeigt.

Ich habe dir somit oben einige Resourcen plus Links angeboten die dir helfen sollten das Problem zu lösen. 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. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[meret]

hi gabe!

erstmal danke für die antwort,

deren ansätze ich durcharbeiten werde.

selbstverständlich habe ich vor der kontaktaufnahme im netz recherchiert,

ob ich eine funktionierende lösung finden kann, 

aber dem war leider eben nicht so…

es ist schade und ärgerlich, dass ihr ein theme wie das minimal

einfach nicht mehr weiterbedient - 

ich habe es ja erst vor ca. 3 jahren in betrieb genommen und alles darauf aufgebaut!!! 

ich habe auch diverse apps integriert, und ich befürchte, dass ich beim umstieg auf ein anderes theme

wieder irre viel anpassen muss, und dafür habe ich definitiv einfach keine zeit!!

aber welches wäre denn ein gratis-thema, oder zur not auch ein pay-thema, 

das dem minimal am nächsten kommt?

lg lady james meret

[meret]

hallo gabe,

ich habe alle vorschläge ausprobiert, aber nichts funktioniert.
das problem ist an sich sehr einfach:

ich verlinke von der startseite auf eine extra seite, auf der es 6 kategoriefester gibt,

die wiederum auf eine produktauswahl weiterverlinken.

die seite mit den kategoriefenstern hat die reguläre url
https://james-shop.com/collections/
wenn man dann eines der kategoriefenster anklickt, kommt eine produktauswahl,

da lautet die reguläre url zb.:

https://james-shop.com/collections/design-tiere

und wenn man dann auf ein produkt klickt, kommt die produktseite

https://james-shop.com/products/sombalila-james
von der man auch oben auf der seite klickbar wieder zur collection/design-tiere zurückkommt.

was fehlt, ist der sichtbare zwischenlink von der collection/design-tiere zurück zu collections.

das müsste an sich im minimalcode sehr einfach zu programmieren sein, (nur kenn ich mich im liquid-code noch nicht genau genug aus, um es selber hinzukriegen, bzw. ich brauche einfach zu viele tests, bis ich die richtige stelle finde. anscheinend konnte man das ja früher echt selber machen, aber ich werde leider aus deiner beschreibung an FPI nicht schlau, obwohl ich damit gestern schon geschlagene 6h herumprobiert habe...)

es ist wirklich eine kleinigkeit, die meinen usern die navigation sehr erleichtern würde,

aber es ist mir im moment echt zu viel aufwand/zeit, deswegen das gesamte theme zu ändern. ich kann jetzt noch die empfohlenen apps ausprobieren, aber auch da ist es etwas heftig, dann für diesen einen minilink und dessen liquidadaption pro monat nun immer € 5.- bezahlen zu müssen - verstehst du, was ich meine?

vielleicht gibt es ja doch eine schnelle, kurze lösung für dieses mein problem?
sicher wären andere noch-minimaluser auch super dankbar dafür!

ganz liebe grüsse aus wien,

lady james meret

[Gabe]

Hey James! @meret 

Danke für den erweiterten Kontext und jetzt habe ich etwas mehr Zeit mich dem Thema zu widmen. Ich habe sogar ein altes Legacy Supply Theme code gefunden das ich unten als Beispiel verwenden werde.

Ja, dein Minimal Theme is natürlich sehr schlicht und einfach und wird sicherlich noch mehrere Jahre dein Shop auf dem Buckel tragen. Und Ich kann verstehen, dass es einfach nicht die Zeit gibt auf ein neues Theme umzusteigen. Du kannst auf jeden fall andere Themes zum Shop hinzufügen (hier die Sammlung unserer neuen Free Themes) die ich im vorherigen Beitrag hätte verlinkten sollen, und im Sandkästchen etwas rumbuddeln an einem Sonntag wenn du etwas mehr Zeit hast. Kein Stress! 😉

Aber ich merke aus den folgenden Worte in deinen Beiträgen, dass du etwas gestresst und frustriert zu sein scheinst: "schade und ärgerlich", "nichts funktioniert", usw. Also lass uns das Thema weiter anschauen. 

Deine wertvolle Zeit:

Und du hast hast vieles deiner Wertvollen Zeit jetzt in dieses Problem investiert, was dich weg von deiner Kernaktivität verleitet hat -> deine Sales zu maximieren:

• "trotzdem in 6h versuch nicht lösen"
• "ich habe alle vorschläge ausprobiert, aber nichts funktioniert."
• "selbstverständlich habe ich vor der kontaktaufnahme im netz recherchiert,"
• "obwohl ich damit gestern schon geschlagene 6h herumprobiert habe..."

Was ich damit sagen möchte ist...schauen wir, dass wir das Problem ein für allemal abhaken können, so dass du dich wieder auf dein Kerngeschäft konzentrieren kannst - dein Podukte-Marketing und deine Conversions zu maximieren! 

Du sagst folgendes und dazu hätte ich eine Frage aus UX Perspektive: "was fehlt, ist der sichtbare Zwischenlink von der collection/design-tiere zurück zu collections." und "es ist wirklich eine kleinigkeit, die meinen usern die navigation sehr erleichtern würde,".

Das UX Design Thinking - was sagen die User dazu?

Meine Frage dazu lautet - hast du User Tests ausgeführt wo der User Feedback deutlich gezeigt hat, dass dieser Zwischenlink in der Breadcrumb wirklich ein fehlender Feature ist und die User Navigation Experience um so vieles verbessern würde?

Oder ist es mehr ein eigenes Gefühl (das sog. "Owner Bias Effect")? Wenn man User testing ausführen würde, wie viele User würden folgendes in deren User-Testing Feedback erwägen, glaubst du? -> "Es fehlt der 'collection' Zwischenlink in der obigen Brotkrümel-kette!"

Der Breadcrumb ist hilfreich, das ist wahr. Wenn man dem User in einem Multilevel-Shop einen Breadcrumb-Trail für alle Seiten anbietet, können die User diesen verwenden um zurück zu übergeordneten Kategorien zu navigieren.

Aber die UX Design Thinking Frage lautet: wie viele User verwenden aktiv das Breadcrumb? Das kann man über dem User-Testing feststellen. 

Das Breadcrumb ist auch ein etwas veraltetes Webseiten Design-Feature das bis zu den 90-er Jahren zurückgeht, als Webseiten aus einfachem HTML bestanden und die tollen HTML5 Features von heute nicht hatten, wie Mega-Menüs im Header oben. Damals hat man sich in das Labyrinth der verschiedenen Webpages verloren und man hatte dann keinen Weg sich wieder zurückzufinden...wie Hansel und Gretel die sich im Wald verliefen. In deinem Fall hat der Vogel ja wirklich den "Collection" Brotkrümelchen aufgegessen 😉

Die Breadcrumbs und warum sie nicht mehr heutzutage verwendet werden:

Die Breadcrumbs wurden in der Tat aus unseren 2.0 Themes entfernt (wie z. B. Dawn) aufgrund der aktuellen Best-Design-Practices und der Prinzipien des UX Design Thinking, und zwar aus folgenden Gründen:

• Sie sind schlecht für das SEO da sie die Übermittlung von Inhalten an Suchmaschinen duplizieren (duplicated content), was sich negativ auf das Ranking der Website auswirken kann.
• Sie replizieren den Back-Button.
• Sie können User verwirren, die dann zu falschen Orten des Shops navigieren können.
• Verlaufspfade (sog. "History trails") sind nicht optimal für User, die direkt auf eine Seite gelangen, die tief in der Hierarchie der Website verankert ist, wie z. B. eine Produktseite.

Das erwartete Systemverhalten und dein breadcrumb.liquid:

Nachdem ich mir das Legacy Code meines Supply Themes angesehen habe, das aehnlich wie dein Minimal Theme sein sollte, kann ich feststellen, dass das fehlen des Collection Glied in der Kette hauptsächlich daran liegt, dass einfach kein Code vorhanden ist, um etwas anzuzeigen. Wenn man eine Produktseite anschaut, wird `home` gefolgt von `/collection_name` angezeigt, wenn das Produkt über eine Sammlungsseite aufgerufen wurde. Wenn man nicht über eine Sammlungsseite auf ein Produkt zugegriffen haben (z. B. durch Anklicken eines beliebigen Produkts auf der Homepage), wird einfach nur `home/` angezeigt: 

Damit der Produkttitel in den Breadcrumbs angezeigt wird, kannst du versuchen den folgenden Code hinzufügen (in meinem Beispiel oben auf Zeile 14):

<span>{{ product.title }}</span>

Das hat in meinem Supply Theme gefunzt:

Somit hoffe ich, dass du das Thema abhaken und wieder zum Core Business zurückkehren kannst! 😉

[dododo007]

Hallo das würde mich auch Interessieren aber irgendwie steige ich da nicht durch (Anfänger) wir nutzen das "Dawn" Theme

[Gabe]

Hey @dododo007 

Das Hinzufügen von Breadcrumb-Navigation zu Shopify-Themes, insbesondere zum Dawn-Theme, kann etwas komplex sein, aber es ist machbar. Breadcrumbs sind eine nützliche Funktion für die Navigation und das SEO deines Online-Shops, da sie den Benutzern helfen, ihre Position auf der Website zu verstehen und effizient zu navigieren. Aber Bedenken gibt es auch die ich oben aufgelistet habe (siehe bitte die vorherigen Beiträge dazu oben).

Zunächst ist es wichtig zu verstehen, dass die Standard-Implementierung von Breadcrumbs in Shopify-Themes möglicherweise nicht genau die gewünschten Anforderungen erfüllt. Beispielsweise zeigt das Dawn-Theme standardmäßig nur die aktuelle Seite und die Startseite in den Breadcrumbs an, nicht jedoch den vollständigen Pfad durch die zuvor besuchten Seiten.

Um Breadcrumbs in deinem Shopify-Shop effektiv zu implementieren, sind einige Schritte erforderlich:

1. Erstellen eines Liquid-Snippets: Der erste Schritt besteht darin, ein neues Liquid-Snippet für die Breadcrumb-Navigation zu erstellen. Dieses Snippet solltest du im Verzeichnis snippets deines Themes erstellen und es beispielsweise breadcrumbs.liquid nennen. Dieser Schritt ist erforderlich, damit der Breadcrumb-Code leicht in jedes Template des Themes eingefügt werden kann​​.

2. Anpassen der Breadcrumb-Logik: Wenn du eine benutzerdefinierte Breadcrumb-Logik benötigst, die nicht standardmäßige Funktionen verwendet, ist dies eine fortgeschrittene Anpassung, die möglicherweise die Hilfe eines Shopify-Experten erfordert​​. Einige Benutzer berichten, dass sie mit der Standard-Implementierung von Breadcrumbs Probleme hatten, insbesondere wenn es um das Einbeziehen von Kategorien (Sammlungen) in den Breadcrumb-Pfad geht.

3. Einbinden des Snippets in dein Theme: Nachdem du das Snippet erstellt hast, musst du es in dein Theme einbinden. Dazu fügst du den Code {% include 'breadcrumbs' %} an der gewünschten Stelle in deiner theme.liquid-Datei ein​​.

4. CSS-Styling und Anpassungen: Um das Aussehen der Breadcrumbs anzupassen, kannst du CSS-Regeln in der base.css-Datei deines Themes hinzufügen. Dies kann auch dazu genutzt werden, um Abstände und Trennzeichen zwischen den Breadcrumb-Links hinzuzufügen oder zu ändern​​​​.

5. Testen und Anpassen: Nachdem du diese Änderungen vorgenommen hast, ist es wichtig, sie gründlich zu testen, um sicherzustellen, dass sie wie erwartet funktionieren. Achte darauf, dass die Breadcrumbs auf verschiedenen Seiten deines Shops korrekt angezeigt werden.

Bitte beachte, dass diese Anpassungen ein gewisses Maß an Kompetenz im Umgang mit Liquid, dem Template-Sprache von Shopify, und CSS erfordern. Wenn du dir unsicher bist, kann es sinnvoll sein, einen Shopify-Experten zu konsultieren. Shopify bietet auch eine gewisse Unterstützungszeit für Anpassungen an, die du in Anspruch nehmen kannst, wenn du einen Shopify-Plan hast​​.

Zusammenfassend lässt sich sagen, dass die Anpassung der Breadcrumb-Navigation im Shopify Dawn-Theme erreichbar ist, aber einige technische Kenntnisse erfordert. Wenn du dich nicht wohl dabei fühlst, diese Anpassungen selbst vorzunehmen, könnte die Zusammenarbeit mit einem erfahrenen Entwickler oder Shopify-Experten die beste Lösung sein.

---
Habt ihr auch den Shop auf die Weihnachtssaison umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 👀!

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.