> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/styling/header/shop-navigation.md).
# Shop Navigation
### Farben
Zusätzlich zu den allgemeinen Einstellungen für die Hintergrund- und Vordergrundfarben der einzelnen Elemente kannst Du eine **Badge Farbe (1)** definieren. Das betrifft das Badge für eingeloggte Benutzer und das Badge für die Anzahl der Artikel auf dem Merkzettel.
Zusätzlich kannst Du den Elementen einen **Rahmen (1)** hinzufügen und deren Farben mit den Farbfeldern **Rahmen (3)** und **Rahmen:hover (4)** konfigurieren.
Beispiel:
### Grundeinstellungen
**Schriftgröße (1) & Schriftstärke (2)** - Insbesondere bei der Darstellung des zweizeiligen Headers werden diese Einstellungen auf die Sprachauswahl, Währungsauswahl und Service-Navigation angewandt.\
**Tooltips (3) & Tooltips Platzierung (4)** - Ergänzend zu den Icons können Tooltips positioniert und angezeigt werden, welche die Funktion der Icons bei Mouse-Over unmissverständlich erklären.\
**Badges minimieren (5)** - Merkzettel, Account und Warenkorb verfügen über sogenannte Badges. Das sind kleine Labels, welche zB. die Anzahl der Produkte im Merkzettel anzeigen. Diese Labels können zu einem kleinen Punkt minimiert werden und erst bei MouseOver die Anzahl anzeigen. Dadurch wirkt der Bereich im Sinne eines minimal Designs sauberer und ordentlicher. \
**Icon Größe (6):** Bestimmte die Größe der Icons für Suche, Merkzettel, Konto und Warenkorb.\
**Merkzettel im Account-Menü anzeigen (7, 8)** verschiebt den Merkzettel in das Account-Menü. Insbesondere auf mobilen Geräten erlaubt das mehr Platz zur Anzeige des Logos bei einzeiligem Header.
Beispiele:
Merkzettel im Account anzeigen (mobile)
### Warenkorb
Der Warenkorb kann über eine eigene Farb- und Schriften-Konfiguration **(1-6)** hervorgehoben werden.
Je nach gewählter Hintergrundfarbe kann es sinnvoll sein, die **Badge Farbe (7)** der "Anzahl der Produkte im Warenkorb" anzupassen. Die Textfarbe des Badges wird dabei automatisch mit dem optimalen Kontrast in schwarz oder weiß ermittelt.
Zusätzlich kannst Du den Elementen einen **Rahmen (8)** hinzufügen und deren Farben mit den Farbfeldern **Rahmen (9)** und **Rahmen:hover (10)** konfigurieren.
Beispiel:
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://themedocs.zenit.design/styling/header/shop-navigation.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.