> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/einfuehrung/shop-navigation-konfigurieren.md).

# Shop-Navigation konfigurieren

Die Shop-Navigation (Hauptnavigation) ist die Kategorie-Navigation im Header. Die Kategorien legst du in Shopware an, ThemeWare® bestimmt die Darstellung.

## Schritt 1: Kategorien anlegen

1. Öffne die Administration deines Shops
2. Wechsel über die Hauptnavigation in "**Kataloge**" => "**Kategorien**"
3. Lege deine Kategorien und Unterkategorien an
   * Kategorietyp "**Seite / Liste**": eine Kategorie mit zugehörigen Produkten und Layout
   * Kategorietyp "**Strukturelement / Einstiegspunkt**": dient nur der Gliederung und ist selbst nicht aufrufbar
   * Kategorietyp "**Link**": ein Verweis auf ein Produkt, eine andere Kategorie, eine Landingpage oder eine externe Seite
4. Achte darauf, dass alle Kategorien auf "**Aktiv**" stehen
5. Speicher deine Kategorien

## Schritt 2: Einstiegspunkt im Verkaufskanal prüfen

1. Öffne über die Hauptnavigation deinen Verkaufskanal
2. Wechsel in den Tab "**Allgemein**"
3. Prüfe in der Karte "**Navigation**" das Feld "**Einstiegspunkt für die Haupt-Navigation**"
4. Lege bei den "**Hauptnavigations-Ebenen**" fest, wie viele Kategorieebenen geladen werden
5. Speicher den Verkaufskanal

{% hint style="warning" %}
**Achtung**: Die "Hauptnavigations-Ebenen" des Verkaufskanals sind die Obergrenze. Kategorien unterhalb dieser Ebene werden gar nicht erst in die Storefront geladen und können deshalb auch von ThemeWare® nicht dargestellt werden.
{% endhint %}

## Schritt 3: Top-Navigation konfigurieren

1. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" ("Inhalte" => "Themes")
   * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
2. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
3. Wechsel in den Tab "**Header**"
4. Öffne den Bereich "**Top-Navigation**"
5. Wähle bei "**Top-Navigation**" aus, wie die Navigation dargestellt wird:
   * "**nicht anzeigen**"
   * "**Liste anzeigen**"
   * "**Hamburger-Menü anzeigen**"
6. Im Abschnitt "**Basiskonfiguration**" konfigurierst du unter anderem "**Home-Link anzeigen**", "**Pfeile anzeigen**", den "**Hover-Effekt**" und die "**Höhe**"
7. In den Abschnitten "**Farbkonfiguration**" und "**Typografie**" passt du Farben, Schriftart, Schriftgröße und Textformatierung an

## Schritt 4: Untermenüs (Flyout) konfigurieren

1. Öffne den Bereich "**Top-Navigation Flyout**"
2. Wähle bei "**Top-Navigation Flyout**" die Darstellung der Untermenüs:
   * "**Shopware-Standard**"
   * "**ThemeWare® Flyout**"
   * "**ThemeWare® Dropdown**"
   * "**ThemeWare® Flyout mit Karten**"
   * "**ThemeWare® Flyout mit Sidebar**"
   * "**ThemeWare® Flyout mit Teasern**"
3. Lege im Abschnitt "**Basiskonfiguration**" bei den "**Hauptnavigations-Ebenen**" fest, wie viele Kategorieebenen dargestellt werden
4. Im Abschnitt "**Design**" wählst du beim "**Flyout**" bzw. bei der "**Dropdown-Navigation**" das gewünschte Design aus

{% hint style="success" %}
**Tipp**: Die globale Einstellung "Top-Navigation Flyout" kann jede Kategorie über das Kategorie-Zusatzfeld "Top-Navigation Flyout" individuell übersteuern.
{% endhint %}

## Schritt 5: Mobile Navigation

Die mobile Navigation konfigurierst du separat:

* Tab "**Inhalt**" => Bereich "**Offcanvas-Navigation**"

## Schritt 6: Speichern und prüfen

1. Speicher die Theme-Konfiguration
2. Wechsel in die Storefront und lade die Seite einmal neu

Du hast nun die Shop-Navigation konfiguriert.

***

## Weiterführende Informationen

* Einführung: [Service-Navigation konfigurieren](/wissensdatenbank/einfuehrung/service-navigation-konfigurieren.md)
* Einführung: [Kategorieseiten bearbeiten und anlegen](/wissensdatenbank/einfuehrung/kategorieseiten-bearbeiten-und-anlegen.md)

#### ThemeWare® Video-Tutorial

{% embed url="<https://service.themeware.design/themeware-tutorial>" %}
ThemeWare® Video-Tutorial
{% endembed %}