Breadcrumbs

Ausgewählte Links

1. Shopify-Dokumentation zum Theme-Editor
2. Company XYZ-Dokumentation zum Breadcrumbs-Block
3. Company XYZ-Dokumentation zu Symbolen
4. Company XYZ-Dokumentation zu Einstellungen für den Abschnitts-Innenabstand
5. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
6. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
7. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
8. Company XYZ-Dokumentation zu Layoutbreiten-Einstellungen

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie Breadcrumbs, um einen klaren Navigationspfad zurück zu übergeordneten Seiten anzuzeigen. Am besten funktioniert dies nahe dem oberen Seitenbereich, wo es die Navigation unterstützen kann, ohne mit dem Hauptinhalt zu konkurrieren. Für weiteren Kontext zur Einrichtung des Themes siehe Shopify-Dokumentation zum Theme-Editor

Grundeinstellungen

Die Haupteinstellungen steuern die in der Breadcrumb-Navigation verwendeten Symbole. Sie können ein Home-Symbol für das erste Element verwenden und ein Trennsymbol zwischen Breadcrumb-Links auswählen. Für Trennsymbole können Sie ein Emoji oder einen Symbolnamen eingeben oder das Feld leer lassen, um ein saubereres Erscheinungsbild ohne angezeigtes Trennsymbol zu erhalten. Hilfe zu Symbolen finden Sie im Icon-Leitfaden.

Halten Sie die Breadcrumb-Darstellung einfach, wenn die Seite bereits in der Nähe starke visuelle Elemente hat. Eine minimale Trennlinie wirkt oft sauberer und lässt sich auf kleineren Bildschirmen leichter erfassen.

Ausrichtungseinstellungen

Diese Einstellungen steuern die horizontale Ausrichtung getrennt für Desktop und mobil. Das ist nützlich, wenn Breadcrumbs auf größeren Bildschirmen mit dem umgebenden Inhalt ausgerichtet sein sollen, auf kleineren Bildschirmen aber eine andere Position benötigen.

Linksbündige Ausrichtung ist meist am leichtesten zu lesen, besonders wenn Breadcrumb-Pfade länger sind. Wenn die Navigation auf Mobilgeräten beengt wirkt, vereinfachen Sie die Symbole oder kürzen Sie die Bezeichnungen, bevor Sie eine dekorativere Ausrichtung erzwingen.

Farbeinstellungen

Diese Einstellungen überschreiben die breiteren Theme-Farben für diesen Abschnitt. Sie sind besonders nützlich, wenn die Breadcrumb-Navigation auf einem benutzerdefinierten Hintergrund liegt oder eine hellere oder dunklere Darstellung als der Rest der Seite benötigt.

Versuchen Sie, Breadcrumbs optisch sekundär zu halten und dennoch lesbar sowie klar interaktiv. Text- und Symbolfarben sollten ausreichend Kontrast haben, damit sie leicht zu erkennen sind, ohne wie primäre Handlungsaufforderungen zu wirken.

Breadcrumbs sollten dezent bleiben, aber Kundinnen und Kunden müssen sie weiterhin als Navigation erkennen.

Unterstützte Blocktypen

1. Breadcrumb

Breadcrumb

Verwenden Sie diesen Block, um der Breadcrumb-Navigation einen statischen übergeordneten Link hinzuzufügen. Das ist hilfreich, wenn Sie einen manuellen Schritt für Landingpages, benutzerdefinierte Inhaltspfade oder besondere Navigationsabläufe einfügen möchten. Details zur Blockeinrichtung finden Sie in der Company XYZ-Dokumentation zum Breadcrumb-Block.

1. Halten Sie den Blocktext kurz, damit die gesamte Navigation lesbar bleibt.
2. Verwenden Sie die Link-Einstellung nur für echte übergeordnete Ziele, nicht für dekorative oder wiederholte Links.
3. Verwenden Sie die Block-Sichtbarkeitseinstellung, wenn ein manueller übergeordneter Link nur auf Desktop oder nur auf Mobilgeräten sinnvoll ist.

Hinweis

Breadcrumb-Links funktionieren normalerweise am besten im selben Tab, da sie Teil der normalen Seitennavigation sind.

Standard-Abschnittseinstellungen

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb der Breadcrumb-Navigation auf Desktop und mobil. In diesem Abschnitt helfen sie Ihnen, einen angenehmen Abstand zum Header und zum Seiteninhalt zu schaffen.

Da Breadcrumbs kompakt sind, wirkt eine leichtere Abständeinstellung meist am besten. Fügen Sie nur dann mehr Padding hinzu, wenn sich der Abschnitt visuell abheben soll oder eine Hintergrundgestaltung enthält.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, die Breadcrumb-Navigation über einer Farbe, einem Farbverlauf, einem Bild oder einem Video zu platzieren. Das kann helfen, den Abschnitt deutlicher wirken zu lassen, insbesondere in stärker angepassten Seitenlayouts.

Setzen Sie Hintergrundgestaltungen hier vorsichtig ein, da Breadcrumbs klein sind und leicht überdeckt werden können. Overlay-Steuerungen können dabei helfen, die Lesbarkeit bei der Verwendung von Bildern oder Videos zu erhalten.

Achtung

Starke Hintergrundmedien können Breadcrumb-Links schwerer lesbar machen, besonders auf Mobilgeräten.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen optional eine Linie oberhalb oder unterhalb des Abschnitts hinzu. Sie sind nützlich, wenn Sie den Breadcrumb-Bereich vom umgebenden Inhalt absetzen möchten, ohne viel zusätzlichen Platz hinzuzufügen.

Eine Trennlinie oben kann gut unter einem Header funktionieren, während eine Trennlinie unten den Beginn des Hauptseiteninhalts definieren kann. Wenn Sie die Farbe der Trennlinie transparent lassen, wird die Standardrahmenfarbe verwendet.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der gesamte Breadcrumb-Abschnitt auf Desktop, mobil oder auf beiden angezeigt wird. Das ist hilfreich, wenn Sie auf einer Gerätegröße ein einfacheres Layout wünschen.

Verwenden Sie die Abschnittssichtbarkeit für grundlegende Layoutentscheidungen. Wenn der Abschnitt auf einer Gerätegröße ausgeblendet ist, werden dort auch alle blockbezogenen Sichtbarkeitsauswahlen darin nicht angezeigt.

Breiten-Einstellungen

Breiten-Einstellungen steuern sowohl die Inhaltsbreite der Breadcrumb-Navigation als auch die Breite des Abschnitts-Containers. Das hilft Ihnen, Breadcrumbs mit nahegelegenem Inhalt auszurichten oder eine Hintergrundgestaltung weiter über die Seite zu ziehen.

Wenn die Inhaltsbreite dem umgebenden Layout entspricht, entsteht normalerweise das sauberste Ergebnis. Wenn Sie Breiteinstellungen ändern, prüfen Sie sowohl die Live-Seite als auch die Editor-Ansicht in der Vorschau, da sich Layoutänderungen in beiden unterschiedlich anfühlen können.

Nutzungshinweise

1. Halten Sie Bezeichnungen kurz. Kurze Breadcrumb-Namen sind leichter zu lesen und laufen auf Mobilgeräten weniger wahrscheinlich unschön um.
2. Verwenden Sie manuelle Links nur bei Bedarf. Fügen Sie Breadcrumb-Blöcke hinzu, wenn sie den Pfad verdeutlichen, nicht wenn sie offensichtliche Navigation wiederholen.
3. Achten Sie auf blockbedingte Änderungen. Zusätzliche Breadcrumbs können den Pfad stärker verändern als Einstellungen auf Abschnittsebene, daher sollten Sie den vollständigen Pfad nach dem Hinzufügen oder Entfernen von Blöcken prüfen.
4. Passen Sie nahegelegene Layout-Entscheidungen an. Stimmen Sie Breite, Abstände und Position mit der umgebenden Seite ab, damit die Navigation beabsichtigt wirkt.
5. Prüfen Sie die Lesbarkeit auf benutzerdefinierten Hintergründen. Überprüfen Sie den Kontrast von Text, Symbolen und Trennlinien, wenn Sie Farbe, Bilder, Farbverläufe oder Video hinzufügen.
6. Testen Sie beide Gerätegrößen. Breadcrumbs können sich auf Desktop und mobil unterschiedlich verhalten, daher sollten Sie Ausrichtung, Sichtbarkeit und alle Mediengestaltungen in beiden Ansichten prüfen.