Verkauft Ihr Shopify-Shop in mehr als einer Sprache - über Shopify Markets, Translate & Adapt oder eine Übersetzungs-App - müssen Ihre Breadcrumbs dem Locale des Kunden folgen. Breadcrumbs Uncomplicated tut das automatisch, sobald die zugrunde liegenden Menüs und Kollektionen übersetzt sind; die beweglichen Teile sind wenige, aber jeder lebt an einem anderen Ort.

Die vier Dinge, die übersetzt werden

  1. Das “Home”-Etikett (der linke Knoten).
  2. Die Menüelement-Beschriftungen (z. B. “Men’s Shoes” → “Herrenschuhe”).
  3. Die Kollektionsnamen (verschieden von Menübeschriftungen - Uomo gegenüber der Beschriftung Herren).
  4. Der Produkttitel (nur sichtbar, wenn Sie diese Option aktiviert haben).

Jedes wird in Shopify separat und an einem anderen Ort übersetzt.

“Home” übersetzen

Das linke Etikett ist standardmäßig “Home” und nutzt Shopifys Standardübersetzungen dieses Worts in jedem unterstützten Locale - “Inicio” auf Spanisch, “Accueil” auf Französisch und so weiter - ohne Einrichtung Ihrerseits. Die Einstellung Name, der für die Stammkategorie angezeigt werden soll im Theme-Editor erlaubt eine Änderung, falls Sie stattdessen einen Markennamen oder ein Emoji wollen, aber die meisten Shops belassen es bei der Vorgabe.

Menübeschriftungen gegenüber Kollektionsnamen

Wenn Ihre Kollektion Uomo heißt, das darauf zeigende Menüelement aber Herren beschriftet ist, wählt die App die richtige Beschriftung für den Breadcrumb automatisch, basierend auf den Übersetzungen des aktiven Locales. Der Breadcrumb verwendet standardmäßig den Menülinktitel (Herren oder dessen Übersetzung) und fällt auf den Kollektionstitel (Uomo oder dessen Übersetzung) zurück, wenn der Menülink nicht lesbar ist. So oder so rendert die Spur in der Sprache des Käufers, solange diese Beschriftung übersetzt ist. Für die konsistenteste Wortwahl übersetzen Sie Ihre Menüelemente in Shopify.

Wie der Breadcrumb gerendert wird (und was passiert, wenn es ein Problem gibt)

Der Breadcrumb wird standardmäßig serverseitig gerendert. Server-Side Rendering (SSR) ist die vorgesehene Funktionsweise: Die App läuft Ihren Menübaum auf dem Server entlang, liest auf jeder Ebene die übersetzte Beschriftung und liefert die fertige Spur in dem HTML aus, das Google sieht, ohne dass JavaScript nötig ist. Solange jedes Menüelement auf eine ordentliche Shopify-Kollektion in Ihrer Kategorienliste zeigt, trägt SSR die ganze Spur.

Wenn ein Teil Ihres Menüs vom Server nicht lesbar ist (weil ein Menüelement falsch verknüpft ist), fällt der Storefront auf Client-Side Rendering (CSR) zurück. CSR ist das Sicherheitsnetz: Es hält den Breadcrumb am Anzeigen von etwas Sinnvollem, ist aber langsamer und trägt nicht dieselben Übersetzungsgarantien wie SSR. CSR ist das Symptom eines Einrichtungsproblems, das der Kategorie-Berater bereits meldet - verlassen Sie sich nicht darauf; beheben Sie die Warnung.

Die Kollektion auf der Seite ist nicht in Ihrer Kategorienliste

Wenn Sie ein bestimmtes Menü als Kategorie der obersten Ebene gesetzt haben (die empfohlene Einrichtung) und der Käufer auf einer Kollektion landet, auf die dieses Menü nicht verweist, hat die App nichts zu durchlaufen und fällt auf CSR zurück.

Eine Warnung des Kategorie-Beraters wird ignoriert

Mehrere Warnungen des Beraters markieren Menülink-Formen, die den Breadcrumb auf die CSR-Notlösung schieben:

  • Seiten und Blogs durch Kollektionen ersetzen. Der Hilfetext des Beraters benennt die Folge selbst: “Wenn eine Kategorie mit einer Seite oder einem Blog verknüpft ist, kann eine teilweise Breadcrumb über (langsameres) clientseitiges JavaScript dargestellt werden, es gibt jedoch mehrere Nachteile und viele erweiterte Funktionen (wie Übersetzungen und Produktanzahl) können nicht funktionieren.”
  • Webadress-Links als ordnungsgemäße Ressourcen-Links neu erstellen. Menüelemente, die als einfache URL eingefügt wurden, verhalten sich wie Seitenlinks, mit derselben Auswirkung auf das Rendering.
  • Mit Kollektionen ohne Filter verknüpfen. Menüelemente, die auf gefilterte Kollektionen zeigen, können die Daten nicht freigeben, die der Breadcrumb zum Übersetzen braucht.

Der Berater zeigt jede davon in Ihrem App-Admin mit einem konkreten nächsten Schritt (meist eine einzeilige Änderung in Onlineshop > Navigation). Diese Warnungen abzuarbeiten hält Ihre Breadcrumbs auf dem SSR-Pfad, was sie automatisch locale-bewusst hält - die App liest Shopifys Übersetzungen direkt, also taucht ein übersetztes Menüelement in der Spur auf, sobald Translate & Adapt es aufgreift.

Für vollständig übersetzte Breadcrumbs ohne Überraschungen arbeiten Sie jede Warnung des Kategorie-Beraters ab, bevor Sie mehrsprachig gehen.

Shopify-Markets-Unterpfade

Wenn Ihr französischer Markt unter /fr/... lebt und Ihr englischer Markt unter /..., erkennt die App das Locale am URL-Präfix und rendert die richtige Sprache ohne zusätzliche Konfiguration. Dasselbe Muster funktioniert für jede Vorgabe-plus-Markt-Kombination - ein slowakisch-vorgegebener Shop mit einem englischen Markt ist eine Illustration: Ein Besuch von /collections/muzi (slowakische Vorgabe) und einer von /en/collections/men (englischer Markt) liefern beide korrekt übersetzte Breadcrumbs, weil das Locale-Präfix vor der Kategoriesuche entfernt wird. Welche Vorgabe-Sprache und zusätzlichen Märkte Ihr Shop auch hat, die App behandelt sie gleich.

Translate & Adapt gegenüber kostenpflichtigen Übersetzungs-Apps

Solange Ihre Übersetzungen in Shopifys nativer Übersetzungs-API liegen (was sowohl Translate & Adapt als auch die großen kostenpflichtigen Apps tun), übernimmt der Breadcrumb sie automatisch. Keine spezielle Integration nötig.

Dieser Screencast zeigt die Verwendung von Shopifys eigenem Werkzeug Translate & Adapt, um die Menüelemente zu übersetzen, aus denen Ihre Breadcrumbs lesen:

Was, wenn eine Übersetzung fehlt?

Wenn eine Kollektion oder ein Menüelement noch nicht übersetzt ist, zeigt Shopify den Wert in der Vorgabe-Sprache für diesen Knoten, sodass die Breadcrumb-Spur weiterhin durchgängig rendert - nur mit einem Knoten in der Vorgabe-Sprache, bis Sie ihn übersetzen.

Zusammenfassung

Für einen mehrsprachigen Shop ist die Einrichtung geradlinig: Übersetzen Sie Ihre Menüelemente (und als Rückfallnetz Ihre Kollektionsnamen) in Shopify, beheben Sie jede Warnung des Kategorie-Beraters, und der Breadcrumb rendert automatisch vollständig übersetzt. Die clientseitige Notlösung ist für Fälle da, in denen eine Beraterwarnung ignoriert wird - sie hält den Breadcrumb am Anzeigen von etwas Sinnvollem, aber die echte Lösung ist immer, die Warnung zu beheben, nicht sich auf die Notlösung zu verlassen.