Breadcrumbs

Ausgewählte Links

1. Company XYZ-Dokumentation zum Breadcrumbs-Block
2. Company XYZ-Dokumentation zu Symbolen
3. Company XYZ-Dokumentation zum Breadcrumb-Block
4. Company XYZ-Dokumentation zu Farbeinstellungen
5. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
6. Shopify-Dokumentation zu Abschnitten und Blöcken
7. Shopify-Dokumentation zum Theme-Editor

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Block, um oben auf einer Seite eine Breadcrumb-Navigation anzuzeigen, damit Kundinnen und Kunden schnell verstehen, wo sie sich befinden, und zu übergeordneten Seiten zurückkehren können. Er eignet sich am besten für Seiten mit tieferer Navigation, bei denen eine zusätzliche Orientierungsebene das Stöbern erleichtert.

Sie können das Home-Symbol anpassen, einen Trennlinienstil auswählen und optional einen festen übergeordneten Link hinzufügen. Als allgemeine Referenz siehe Breadcrumbs. Informationen zur Organisation von Blöcken im Editor finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Die Haupteinstellungen steuern den visuellen Stil der Breadcrumb-Navigation selbst.

Verwenden Sie das Feld Home icon, um ein anderes Symbol einzusetzen, wenn Ihr Shop ein einheitliches Symbolsset oder einen reduzierteren Look verwendet. Das Separator icon kann entweder ein Emoji oder ein unterstützter Symbolname sein, und Sie können es leer lassen, wenn die Breadcrumb-Elemente ohne sichtbare Trennzeichen angezeigt werden sollen. Hilfe zur Symbolbenennung finden Sie unter Icons.

Tipp

Einfache, vertraute Symbole sind in der Regel leichter zu erfassen als dekorative.

Übergeordneter Link

Diese Gruppe fügt der Breadcrumb-Navigation einen statischen übergeordneten Link hinzu. Das ist nützlich, wenn Sie Kundinnen und Kunden zu einer bestimmten Zielseite, einem Kollektion-Hub oder einem kuratierten Ziel zurückführen möchten, das in Ihrem Navigationsfluss wichtig ist.

Fügen Sie sowohl den Text als auch den Link hinzu, damit der übergeordnete Schritt in der Navigation natürlich wirkt. Das Öffnen des übergeordneten Links in einem neuen Tab ist verfügbar, aber Breadcrumbs wirken meist natürlicher, wenn sie Kundinnen und Kunden im selben Browsing-Pfad halten. Für weiteren Kontext siehe Übergeordneter Link.

Fügen Sie einen statischen übergeordneten Link nur hinzu, wenn er zum Seitenpfad passt, den Kundinnen und Kunden erwarten. Wenn er sich außerhalb der Reihenfolge anfühlt, kann das die Vertrauenswürdigkeit der Breadcrumb-Navigation beeinträchtigen.

Ausrichtungseinstellungen

Mit diesen Einstellungen können Sie die horizontale Ausrichtung auf Desktop und Mobilgeräten getrennt steuern. Das ist hilfreich, wenn die Breadcrumb-Navigation auf einer Gerätegröße mit einem zentrierten Seiten-Header und auf einer anderen mit einer links ausgerichteten Inhaltsspalte ausgerichtet werden soll.

Wenn Ihre Breadcrumb-Navigation länger wird, testen Sie das mobile Layout sorgfältig. Eine linksbündige Ausrichtung ist oft leichter lesbar, wenn die Navigation über mehrere Zeilen umbricht.

Hinweis

Desktop- und Mobilsteuerungen können sich in engen Layouts unterschiedlich verhalten. Überprüfen Sie daher nach dem Anpassen von Ausrichtung oder Sichtbarkeit beide Viewport-Größen.

Standard-Block-Einstellungen

Farbeinstellungen

Diese Einstellungen überschreiben die übergeordneten Theme-Farbwahlmöglichkeiten für diesen Block. Verwenden Sie sie, wenn die Breadcrumb-Navigation auf einem getönten, bildbasierten oder sonst nicht standardmäßigen Hintergrund steht und besseren Kontrast benötigt. Das gemeinsame Farbverhalten finden Sie unter Farbeinstellungen.

Achtung

Stellen Sie sicher, dass sowohl Text als auch Symbole vor dem Hintergrund gut lesbar bleiben, insbesondere wenn Sie hellere benutzerdefinierte Farben verwenden.

Sichtbarkeitseinstellungen

Verwenden Sie diese Einstellungen, um den Block auf Desktop oder Mobilgeräten auszublenden. Das ist hilfreich, wenn Sie einen klareren mobilen Header wünschen oder Breadcrumbs nur in einem Layoutkontext nützlich sind. Das gemeinsame Sichtbarkeitsverhalten finden Sie unter Sichtbarkeitseinstellungen.

Editor-Einstellungen

Diese Einstellungen beeinflussen, wie der Block in der Editor-Seitenleiste beschriftet wird. Ein klarer Editor-Titel kann diesen Block leichter auffindbar machen, wenn Sie mehrere Navigations- oder Header-bezogene Blöcke verwalten. Die Editor-Oberfläche finden Sie in der Shopify-Dokumentation zum Theme-Editor

Nutzungshinweise

1. Platzieren Sie ihn weit oben auf der Seite. Breadcrumbs sind am nützlichsten, wenn sie vor dem Hauptinhalt erscheinen, wo Kundinnen und Kunden Orientierungshilfen erwarten.
2. Halten Sie den Pfad intuitiv. Verwenden Sie den übergeordneten Link nur dann, wenn er die Seitenhierarchie unterstützt, die Kundinnen und Kunden wahrscheinlich annehmen.
3. Wählen Sie zurückhaltende Symbole. Dezente Home- und Trennsymbolik helfen dabei, dass die Breadcrumb-Navigation lesbar bleibt, ohne mit dem Seitentitel zu konkurrieren.
4. Prüfen Sie kleinere Bildschirme. Überprüfen Sie lange Breadcrumb-Navigationen auf Mobilgeräten, um sicherzustellen, dass Umbruch und Ausrichtung weiterhin sauber wirken.
5. Setzen Sie Farbüberschreibungen mit Bedacht ein. Benutzerdefinierte Symbol- und Textfarben sollten den Kontrast verbessern und nicht nur zu benachbarten Designelementen passen.