> 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/en/styling/header/shop-navigation.md). # Shop navigation Shop navigation (Search, Wishlist, Account, Cart) ![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MHWsLYJ_g3DfKCVT0Mv%2F-MHWsOx3KYTC8L9NmuKj%2Fdocs-front-header-main-navigation.jpg?alt=media\&token=7f69c689-1228-43b5-a703-051fd5a7157d) ### Colors

In addition to the general settings for the background and foreground colors of the individual elements, you can define a **Badge color (1)**. This affects the badge for logged in users and the badge for the number of items in the wishlist. Additional you can add a **Border (1)** to the items and configure their colors with the **Border (3)** und **Boder:hover (4)** color fields**.** Example:

### Basic configuration **Font size (1) & Font weight (2)** - Especially when displaying the two-line header, these settings are applied to the language selection, currency selection and service navigation.\ **Tooltips (3) & Tooltips placement (4)** - In addition to the icons, tooltips can be positioned and displayed, which clearly explain the function of the icons when mouse-over.\ **Minimize badges (5)** - Wishlist, account and shopping cart have so-called badges. These are small labels, which e.g. show the number of products in the wish list. These labels can be minimized to a small point and only show the number when mouseover. This makes the area appear cleaner and tidier in the spirit of a minimal design. \ **Icon size (6):** Define the size of the icons for Search, Wishlist, Account and Cart.\ The **Show wishlist in account menu (7, 8)** options move the wishlist into the account menu. Especially on mobile devices, this frees up more space to display the logo when using a single-line header. ![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F5uqRmJSaCeKGa8qu2QXu%2Fdocs-en-config-theme-header-shop-navigation-basic-configuration.png?alt=media\&token=5d98928b-011d-473d-902e-4095a28900ef) Examples:

### Cart The shopping cart can be highlighted using a custom color configurations. Depending on the background color you choose, it may make sense to adapt the **Badge color** to the “number of products in the shopping cart”. The text color of the badge is automatically determined with the optimal contrast in black or white. Additionally, you can add a **Border** to the items and configure their colors with the **Border** und **Border:hover** color fields**.** With **Cart total**, you can show or hide the cart value in the header, or display it only when the cart contains at least one item. Examples: ![Rot hervorgehobener Warenkorb](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MHWsLYJ_g3DfKCVT0Mv%2F-MHWtV66AlAByyQ69Qq9%2Fdocs-front-header-shop-navigation.jpg?alt=media\&token=fc6f66d2-c94e-4b71-a713-9d7ed9c88c50)