# Shop navigation

![](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

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F98IHiBPJhpqusLv3YH9L%2Fdocs-en-config-theme-header-shop-navigation-colors.png?alt=media&#x26;token=d98bc5aa-2e2e-412f-8818-c41ba88e2560" alt=""><figcaption></figcaption></figure>

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 field&#x73;**.**

Example:

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F1PIzwLYdAzYa8MV9EPhU%2Fdocs-en-storefront-theme-header-shop-navigation-colors-example.png?alt=media&#x26;token=95bfe257-524f-4bdc-a1df-7b7da4648a3b" alt=""><figcaption></figcaption></figure>

### 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:

<div align="left"><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MHWsLYJ_g3DfKCVT0Mv%2F-MHWsndGpHe4feRdm2Md%2Fdocs-front-shop-navigation-tooltips.png?alt=media&#x26;token=bd0800e7-d881-4499-9422-09598116dde1" alt="Tooltips example - shop navigation"></div>

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FFq6OAazWz6RNvNLjeTXW%2Fdocs-en-config-theme-header-shop-navigation-basic-configuration-wishlist-example.png?alt=media&#x26;token=e4900c07-a9d3-4273-9111-3cbab3e5e7d5" alt=""><figcaption><p>Show wishlist in account menu (mobile)</p></figcaption></figure>

### Cart

The shopping cart can be highlighted using a custom color configurations **(1-6)**.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FkhPbAJEQOcarVFJr5RZ6%2Fdocs-en-config-theme-header-shop-navigation-cart.png?alt=media\&token=52cc49ad-45a3-40ca-b4b0-a9aaba32b90a)

Depending on the background color you choose, it may make sense to adapt the **Badge color (7)** 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.

Additional you can add a **Border (8)** to the items and configure their colors with the **Border (9)** und **Boder:hover (10)** color field&#x73;**.**

Example:

![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)

## Main navigation (Categories)