Breadcrumbs Uncomplicated übernimmt jede visuelle Entscheidung Ihres Themes - Linkfarbe, Textfarbe, Schriftart, Hover-Verhalten, Abstände. Aufgabe der App ist es, die Breadcrumb-Spur selbst hinzuzufügen, nicht Ihrem bestehenden Design ein Aussehen aufzudrücken. Sieht der dargestellte Breadcrumb nicht wie erwartet aus, liegt das fast immer daran, dass Ihr Theme diesen Stil für Links oder Text gar nicht gesetzt hat, und die App erbt die Lücke getreu. Jede Überschreibung unten ist eine Ein-Klick-Einstellung im Theme-Block; die CSS-Hintertür am Schluss deckt den Rest ab.
Theme-Farben übernehmen (die Vorgabe)
Standardmäßig übernimmt der Breadcrumb die Link-, Text- und Hover-Farben Ihres Themes - der Block gibt kein eigenes Farb-CSS aus, sofern Sie es nicht anfordern. Bei den meisten Themes ist das genau richtig: Die Spur nimmt dieselbe Akzentfarbe wie Ihre übrige Navigation, und besuchte / Hover-Zustände passen zum Rest der Seite.
Wenn die übernommenen Farben nicht passen (weil Ihr Theme abgegrenzte Farbschemata nutzt, außerhalb derer die Einbettung sitzt, oder weil das Theme transparente Textfarben nutzt, die über einem Bild falsch aussehen), aktivieren Sie Themenfarben überschreiben, und die App zeigt drei Farbwähler: Linktextfarbe, Trennfarbe und Farbe des Produkttitels. Schalten Sie die Überschreibung aus, kehrt die Vererbung zurück.
Abstände - oben, unten und dazwischen
Der vertikale Abstand um den Breadcrumb entspricht dem Rand, den die übergeordnete Sektion Ihres Themes vorgibt. Wenn Sie eine andere Rhythmik brauchen:
- Abstand oben einstellen - ein Schieberegler, -60 bis +60 px in 5-px-Schritten, angewandt als
margin-topauf die Breadcrumb-Navigation. - Legen Sie unten den Abstand fest - gleicher Bereich und Schritt, angewandt als
margin-bottom. - Stellen Sie den Abstand zwischen den Semmelbröseln ein - eine Auswahl Klein/Medium/Groß (0.3em / 0.6em / 1.0em), die den Abstand um jedes Trennzeichen steuert.
Es gibt keine Einstellung für linken Innenabstand - die horizontale Ausrichtung wird von der Sektion geerbt, die den Block umschließt. Wenn ein Theme App-Blöcke anders einrückt, sehen Sie sich die erweiterte Einstellung Wrapper-Klasse an.
Mit dem Produktbild ausrichten
Bei einigen Themes sitzt der Breadcrumb über einem vollbreiten Produktbild, der Breadcrumb selbst ist aber auf die schmalere Inhaltsspalte begrenzt, sodass er falsch ausgerichtet wirkt. Das ist eine Theme-Entscheidung: Der Breadcrumb erbt die Breite der Sektion, in der er platziert ist.
Im Block gibt es keinen “Vollbreite”-Schalter. Die Lösung besteht darin, den Breadcrumb-Block in dieselbe Sektion wie Ihre Bildergalerie zu schieben (sodass er dieselbe page-width übernimmt) oder einen Custom-Liquid-Block mit einer <style>-Überschreibung hinzuzufügen, die die Navigation auf volle Breite zieht.
Eigene Trennzeichen
Die Vorgabe ist › (einfaches schließendes Anführungszeichen, ›), gewählt, weil es auf jedem Theme visuell leise wirkt. Die Einstellung Brotkrümeltrenner bietet vier Optionen: Pfeil (›), Schrägstrich (/), Backslash (\) und vertikaler Balken (|). Ein echtes eigenes Zeichen oder SVG ist keine eingebaute Option - dafür brauchen Sie die CSS-Hintertür (zielen Sie auf .breadcrumb__sep und ersetzen Sie deren Inhalt), unten beschrieben.
Großbuchstaben und Unterstreichung
Der Breadcrumb übernimmt Groß-/Kleinschreibung und Unterstreichung standardmäßig von Ihrem Theme. Wenn Sie ein anderes Verhalten möchten:
- Kapitalisierung - Theme-Standard, Alles in Großbuchstaben, Alles klein geschrieben, Jedes Wort groß schreiben oder Das erste Wort groß schreiben.
- Link-Unterstreichung - Theme-Standard, Unterstreichung hinzufügen, Unterstreichung entfernen oder Nur bei Hover unterstreichen.
Im Block gibt es keine Fett-Einstellung - für Fettschrift brauchen Sie das CSS-Snippet unten.
Wenn Sie doch CSS brauchen
Für die selteneren Anliegen - fette Schrift, eine spezielle Theme-Überschreibung, Hover-Zustände, animierte Trennzeichen - vergibt die App jedem Breadcrumb-Element einen stabilen Klassennamen. Die Navigation hat die ID #uncomplicated-breadcrumbs und die Klasse .category-breadcrumbs; jeder Nicht-Blatt-Link ist a.breadcrumb__branch; das optionale, reine Textendelement ist span.breadcrumb__leaf; jedes Trennzeichen ist span.breadcrumb__sep.
Die am häufigsten gewünschte Anpassung ist, den Breadcrumb auf kleinen Bildschirmen auszublenden, wo vertikaler Platz knapp ist:
@media (max-width: 900px) {
#uncomplicated-breadcrumbs { display: none; }
}
Der sauberste Ort für dieses Snippet ist ein Custom-Liquid-Block im Shopify-Theme-Editor, eingewickelt in <style>-Tags. Dieser Screencast zeigt, wie Sie einen einfügen:
Was Sie nicht tun sollten
Fügen Sie CSS nicht direkt in den Code Ihres Themes ein, um den Breadcrumb zu überschreiben. Setzen Sie es in einen Custom-Liquid-Block (wie oben), ein eigenes CSS-Asset oder das Feld Eigenes CSS im Theme-Editor, damit Theme-Aktualisierungen es nicht überschreiben.
Zusammenfassung
Die Standardwerte sind bewusst gewählt: Die App übernimmt alles von Ihrem Theme, damit sich der Breadcrumb ohne Konfiguration nativ anfühlt. Jede Einstellung auf dieser Seite ist eine optionale Hintertür für die Fälle, in denen die Standardwerte Ihres Themes nicht das sind, was Sie wollen.