Liquid, JavaScript, Themes
Liebe Community,
ich hätte gerne eine Breadcrumb für mein Theme Craft 11.0.0. Ich habe bereits Apps probiert, aber die Breadcrumb wird leider nicht korrekt umgesetzt. Entweder werden Ebenen übersprungen oder sind nicht verlinkt.
Die Breadcrumb sollte wenn möglich auf den Collection-Seiten und den Produktdetailseiten zu sehen sein.
Shop:
Ich habe im Prinzip maximal 3 Kategorie/Collection-Ebenen + Produkttitel als letzte Ebene:
1. Ebene Shop-Ebene
2. Ebene (Beispiel) "Holz-Schreibgeräte & Holz-Brieföffner"
3. Ebene "Holzfüllfedern & Rollerpens"
4. Ebene Produkttitel
Bin ich nun in der 2. Ebene hätte ich gerne als Breadcrumb:
- "Home" (die der Shop-Ebene entspricht und auf https://www.huizbirn.at/shop verlinken soll)
- "Holz-Schreibgeräte & Holz-Brieföffner"
-> Soll dann aussehen: Home > Holz-Schreibgeräte & Holz-Brieföffner
Bin ich nun in der 3. Ebene hätte ich gerne als Breadcrumb:
- "Home" (die der Shop-Ebene entspricht und auf https://www.huizbirn.at/shop verlinken soll)
- "Holz-Schreibgeräte & Holz-Brieföffner"
-> Soll dann aussehen: Home > Holz-Schreibgeräte & Holz-Brieföffner > Holzfüllfedern & Rollerpens
Bin ich auf der Detailseite eines Produktes hätte ich gerne als Breadcrumb:
- "Home" (die der Shop-Ebene entspricht und auf https://www.huizbirn.at/shop verlinken soll)
- "Holz-Schreibgeräte & Holz-Brieföffner" (mit Hyperlink auf die Collection)
- "Holzfüllfedern & Rollerpens" (mit Hyperlink auf die Collection)
- + Produkttitel (ohne Hyperlink)
-> Soll dann aussehen: Home > Holz-Schreibgeräte & Holz-Brieföffner > Holzfüllfedern & Rollerpens > Holz Füllfeder Goldregen Unikat handmade
Ich hoffe, ich habe mich verständlich ausgedrückt - programmiertechnisch bin ich leider ein Nakedei.
Gelöst! Zur Lösung
Erfolg.
@Huizbirn kannst du mir kurz den Unterschied zwischen Startseite und Shop-Startseite erklären? Ist das, gerade in Bezug auf Shopify, nicht das gleiche?
Erfolg.
Hey @Huizbirn
Die Features die du suchst sind in deinem Craft Free Theme etwas limitiert. Hast du andere der mehr profi-Themes zum Shop hinzugefügt, wie das Impact Theme, und getestet um zu sehen was die alles können?
Da du tolle hand-gemachte Produkte selber baust und verkaufst, siehe wie du sie so richtig für deine Shopbesucher zum Strahlen bringen kannst mit den besten UX Praktiken wie in diesem Beispiel hier. Ich empfehle z. B. deine Produkte auf Video zu zeigen denn damit kannst du sie richtig hervorbringen. Du kannst z. B. auf Video zeigen wie sie in Action zu handhaben sind und auch wie sie in der Werkstatt hergestellt werden. So etwas wollen die online Shopper der heutigen Zeit sehen.
Es ist auch ein viel-gemeldetes Verhalten vieler Themes, dass die Breadcrumb beispielsweise 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 man auf der Produktseite angekommen ist. 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 die Breadcrumb nicht welche Collection in der Breadcrumb angezeigt werden soll. Somit lässt sie die Collection ganz aus.
Beachte auch das laut dem neuesten UI und UX Design Konventionen, sowie der Barrierefreiheiten, Breadcrumbs nicht eine Best Practice sind. Ich habe aber hier zwei Blogartikel gefunden, in denen erklärt wird, wie man eine Breadcrumb Navigation in Dawn oder Craft Theme einfügen kann. Hier ist ein Blogartikel zum Thema und hier ein Leitfaden und hier ein zweiter.
Ggf. kannst es aber selber reinbasteln im Code zusammen mit einem Experten und gerne kann ich welche empfehlen. 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 möchtest also eine "klassische Startseite" oder sog. "Landingpage" mit ansprechenden Teasern oder Stimmungsbildern, die die Kunden dazu animieren, in die verschiedenen Kategorien deines Shops zu gelangen. Hast du vielleicht ein Beispiel davon wie ein Link zu einem Beispiel?
Zunächst kannst du, wie gesagt, auf der Homepage deines Craft Theme im Editor verschiedene Abschnitte (Sections) erstellen, die die Teaser oder Stimmungsbilder enthalten. Gehe dazu zu "Online Store" > "Themes" > "Customize" und wähle die Option "Add section". Du kannst Text- und Bildabschnitte verwenden, um die gewünschten Inhalte hinzuzufügen. Wenn ich in deine Links klicke sehe aber dass du das schopn im grossen und ganzen gemacht hast. Was wäre hier der Ist-Wert und der Sollwert genau?
Bezüglich deiner zweiten Frage: Shopify bietet keine nativen Funktionen für eine Baumstruktur von Kategorien (Collections) wie einige andere E-Commerce-Plattformen da dies eine eher ältere Praxis im mehr vergangenen Internetzeitalter der reinen HTML Seiten im grossen und ganzen war. Heute sind the Seiten ja mit dynamischen HTML5 und AJAX Inhalte sowie Interaktivität bestückt.. Shopify organisiert Kategorien somit eher flach in einer hierarchielosen Struktur aufgrund der Benutzerfreundlichkeit wegen. Das bedeutet, dass du out-of-the-box keine Unter- oder Überkategorien erstellst, das kannst du aber trotzdem machen wenn du unbedingt möchtest, wie du hier lesen kannst.
Es gibt, wie Finer sagt, auch Apps und Erweiterungen von Drittanbietern, mit denen du eine Art von Hierarchie für Kategorien erstellen kannst.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
@Huizbirn leider gibt es hierfür keine ad hoc Lösung, die man mal eben via Copy-and-paste integrieren kann. Insofern bleiben die nur die beiden Optionen das ganze über eine App einzubinden oder jemanden dafür zu engagieren. Welche Apps hattest du denn schon probiert?
@Finer Danke für deine Rückmeldung. Ich habe unter anderem "TT ‑ Breadcrumbs & SEO Schema" ausprobiert. Ich könnte unter Umständen noch auf die "Zwischenkategorien" verzichten, aber das "Home" immer auf die Startseite, statt auf die Shop-Startseite verlinkt, stört mich dennoch.
Oder hast du andere Empfehlungen?
LG
Erfolg.
@Huizbirn kannst du mir kurz den Unterschied zwischen Startseite und Shop-Startseite erklären? Ist das, gerade in Bezug auf Shopify, nicht das gleiche?
@Finer: Also ich hätte gerne eine "klassische Startseite" mit verschiedenen Teasern / Stimmungsbildern, die dann den Kunden dazu animieren, draufzuklicken und in die Kategorie des Shops zu gelangen.
Die Shop-Startseite hätte ich eher dafür genutzt, die Produktkategorien nochmal detailliert zu zeigen und zu beschreiben.
Weißt du, wie ich meine?
Weitere Frage: Täusche ich mich oder ist es über Shopify nicht ohne weiteres möglich, Collections / Kategorien nach einer Art Baumstruktur anzulegen, wie es andere Shopsysteme tun?
LG
Erfolg.
Hey @Huizbirn
Die Features die du suchst sind in deinem Craft Free Theme etwas limitiert. Hast du andere der mehr profi-Themes zum Shop hinzugefügt, wie das Impact Theme, und getestet um zu sehen was die alles können?
Da du tolle hand-gemachte Produkte selber baust und verkaufst, siehe wie du sie so richtig für deine Shopbesucher zum Strahlen bringen kannst mit den besten UX Praktiken wie in diesem Beispiel hier. Ich empfehle z. B. deine Produkte auf Video zu zeigen denn damit kannst du sie richtig hervorbringen. Du kannst z. B. auf Video zeigen wie sie in Action zu handhaben sind und auch wie sie in der Werkstatt hergestellt werden. So etwas wollen die online Shopper der heutigen Zeit sehen.
Es ist auch ein viel-gemeldetes Verhalten vieler Themes, dass die Breadcrumb beispielsweise 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 man auf der Produktseite angekommen ist. 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 die Breadcrumb nicht welche Collection in der Breadcrumb angezeigt werden soll. Somit lässt sie die Collection ganz aus.
Beachte auch das laut dem neuesten UI und UX Design Konventionen, sowie der Barrierefreiheiten, Breadcrumbs nicht eine Best Practice sind. Ich habe aber hier zwei Blogartikel gefunden, in denen erklärt wird, wie man eine Breadcrumb Navigation in Dawn oder Craft Theme einfügen kann. Hier ist ein Blogartikel zum Thema und hier ein Leitfaden und hier ein zweiter.
Ggf. kannst es aber selber reinbasteln im Code zusammen mit einem Experten und gerne kann ich welche empfehlen. 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 möchtest also eine "klassische Startseite" oder sog. "Landingpage" mit ansprechenden Teasern oder Stimmungsbildern, die die Kunden dazu animieren, in die verschiedenen Kategorien deines Shops zu gelangen. Hast du vielleicht ein Beispiel davon wie ein Link zu einem Beispiel?
Zunächst kannst du, wie gesagt, auf der Homepage deines Craft Theme im Editor verschiedene Abschnitte (Sections) erstellen, die die Teaser oder Stimmungsbilder enthalten. Gehe dazu zu "Online Store" > "Themes" > "Customize" und wähle die Option "Add section". Du kannst Text- und Bildabschnitte verwenden, um die gewünschten Inhalte hinzuzufügen. Wenn ich in deine Links klicke sehe aber dass du das schopn im grossen und ganzen gemacht hast. Was wäre hier der Ist-Wert und der Sollwert genau?
Bezüglich deiner zweiten Frage: Shopify bietet keine nativen Funktionen für eine Baumstruktur von Kategorien (Collections) wie einige andere E-Commerce-Plattformen da dies eine eher ältere Praxis im mehr vergangenen Internetzeitalter der reinen HTML Seiten im grossen und ganzen war. Heute sind the Seiten ja mit dynamischen HTML5 und AJAX Inhalte sowie Interaktivität bestückt.. Shopify organisiert Kategorien somit eher flach in einer hierarchielosen Struktur aufgrund der Benutzerfreundlichkeit wegen. Das bedeutet, dass du out-of-the-box keine Unter- oder Überkategorien erstellst, das kannst du aber trotzdem machen wenn du unbedingt möchtest, wie du hier lesen kannst.
Es gibt, wie Finer sagt, auch Apps und Erweiterungen von Drittanbietern, mit denen du eine Art von Hierarchie für Kategorien erstellen kannst.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Lieber @Gabe,
danke für deine hilfreichen Infos! Zum Hintergrund: Ich habe im März bei einem Konkurrenten einen Shop aufgebaut und dann nach Wochen festgestellt, dass ein Syntax-Problem in der Sitemap dazuführt, dass 90 % meiner Seiten nicht indexiert werden können.
Dadurch bin ich nun zu Shopify gewechselt und habe aufgrund des bevorstehenden Weihnachtsgeschäfts "quick & dirty" versucht, so schnell wie möglich was auf die Beine zu stellen und Sichtbarkeit zu gewinnen. Das klappt soweit sehr gut und ich bin mit shopify auch zufrieden. Optimierungsbedarf hab ich natürlich noch viel und hatte deshalb leider auch keine zeit, mich mit den Profi Themes eingehender zu beschäftigen. Das muss ich sicherlich nachholen. Danke für den Hinweis!
Danke auch für die nützlichen Links.
Mit klassischer Startseite & Landingpage - vielleicht ist das doch nicht ganz so sinnvoll, denn wenn du mich nach einem Beispiel fragst, fällt mir auf die Schnelle tatsächlich keiner ein - weil es wohl kaum wer so macht...
Das mit den Text- und Bildabschnitten ist ohnehin bald am Soll-Zustand, hier arbeite ich mich gerade sukzessive durch.
Bezüglich Frage 2 - danke für die Info wegen der Baumstruktur.
PS: Ich finde eure sachlichen Antworten super und bin sehr dankbar dafür!
LG
Du hast die richtige Entscheidung getroffen indem du zu Shopify migriert bist um ein "quick & dirty" Shop, "on-the-fly" auf die Beine zu stellen!
Wenn du weitere Fragen hast, stelle sie jederzeit hier oder in einem neuen Beitrag hier in der Community!
VG,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024