# Flyout Navigation Eine guter Shop zeichnet sich durch eine intuitive und gut strukturierte [Flyout Navigation](/en/academy/technical-terms/flyout-navigation.md) aus. Da aber nicht jeder Shop seine Flyouts komplett mit Kategorien füllen kann, helfen wir an dieser Stelle mit dem Theme etwas nach. So kannst du mit nur wenigen Klicks eine schickes Flyout erstellen.

Flyout Navigation unseres Kunden https://army-shop.ch/

Grundsätzlich hast du fünf Möglichkeiten um dein Flyout aufzupeppen: 1. [Kategorien](#1.-kategorien) 2. [Icons](#2.-icons) 3. [Strukturkategorien & Links](#3.-strukturkategorien-and-links) 4. [Bilder mit Untertitel](#4.-bilder-mit-untertitel) 5. [Beschreibung](#5.-beschreibung) ### 1. Kategorien Das erste und womit auch offensichtlichste sind die ganz normalen Kategorien. Diese kannst du wie gewohnt im Admin erstellen. Solltest du bisher noch keine Berührungspunkte mit den [Kategorien](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien) in Shopware 6 gemacht haben empfehlen wir dir zunächst dich mit den Basics zu befassen. Folgendes Video eignet sich hierfür hervorragend: {% embed url="" %} Kategorie anlegen in Shopware 6 {% endembed %} ### 2. Icons Für jede Kategorie im Flyout lässt sich ein eigenes [Icon](/en/academy/technical-terms/icon.md) hinterlegen. Diese werden automatisch vor dem Kategorienamen platziert. {% hint style="info" %} Für passende Icons können wir dir die Icon-Bibliothek [Flaticon](https://www.flaticon.com/) empfehlen. Dort lassen sich unzählige Icons im PNG-Format kostenlos herunterladen. {% endhint %} Das Icon selbst kannst du unter "Kataloge > Kategorien > \[Kategorie] > Tab Allgemein > Zusatzfelder > Flyout > Icon" hinterlegen. {% hint style="success" %} Beachte jedoch das Shopware es standardmäßig nicht zulässt Zusatzfelder für Kategorien des Typs "Strukturelement / Einstiegspunkt" zu pflegen. Du kannst dies jedoch mit einem kleinen Trick umgehen! Zunächst wählst du den Kategorietyp "Seite / Liste" und lädst das Icon hoch. Anschließend wechselt du den Kategorietyp wieder auf "Strukturelement / Einstiegspunkt" und voilà! Das Icon wird angezeigt. {% endhint %} ### 3. Strukturkategorien & Links Sollte dein Flyout jedoch immer noch relativ leer sein, hast du mit dem Anlegen von Strukturkategorien & Links eine von vier weiteren Möglichkeiten dein Flyout weiter aufzufüllen. Jeder Shop hat Bestseller oder beliebte Kategorien. Wieso diese also nicht direkt dem Besucher über die Navigation präsentieren? Strukturkategorien & Links eignen sich hierfür ausgezeichnet. Du erstellst mit dieser Methode sinnvolle interne Links, ohne deinen Shop unnötig mit Dummy Kategorien aufzublasen. Wie gehen wir also am besten vor? Im Prinzip legst du die einzelnen Elemente exakt wie die Kategorien aus [Schritt 1](#1.-kategorien) an. Es gibt nur einen entscheidenden Unterschied. Nehmen wir hierzu den Screenshot von oben genauer unter die Lupe:

Kategorien im Flyout

Kategorien im Admin

So kann es sich bei "Accessoires & Zubehör" um ein Strukturelement handeln. Sie ist selbst nicht aufrufbar und dient, wie der Name schon vermuten lässt, nur zur Struktur. Daher ändern wir bei dieser Kategorie den Kategorietyp zu "Strukturelement / Einstiegspunkt":

Kategorietyp

{% hint style="warning" %} Strukturkategorien erscheinen auch in der [Sidebar](/en/academy/technical-terms/sidebar.md) Kategorie-Navigation. {% endhint %} Nun folgen noch die einzelnen Links unterhalb des Strukturelements "Accessoires & Zubehör". Diese Kategorien versehen wir nun mit dem Kategorietyp "Link". Direkt darunter öffnet sich nun eine weitere Konfigurations-Möglichkeit für den benutzerdefinierten Link:

Benutzerdefinierter Link

Hierbei verwenden wir für Produktverlinkungen den Linktyp "Intern", die Entität "Produkt" und das entsprechende Produkt. Wie du siehst kannst du sowohl interne als auch externe Verlinkungen setzen. Neben Produktverlinkungen kannst du aber auch Kategorien und Landingpages verlinken. Dir steht also eine breite Vielfalt an Möglichkeiten offen. {% hint style="info" %} Du kannst auch nur Strukturkategorien verwenden, um bspw. USPs im Flyout aufzählen. Mit passenden [Icons](#2.-icons) kann dies auch sehr schick aussehen. {% endhint %} ### 4. Bilder mit Untertitel Zusätzlich bietet dir das Theme noch die Möglichkeit bis zu drei verlinkbare Bilder inkl. Untertitel im Flyout einzubinden. Hierbei eigenen sich auch wieder besonders Produkt- oder Kategorieverlinkungen mittels Szenebilder. Die Konfiguration findest du hierfür unter "Kataloge > Kategorien > \[Kategorie] > Tab Allgemein > Zusatzfelder > Flyout". Für jedes der drei Bilder gibt es folgende drei Konfigurationsmöglichkeiten:

Bild mit Untertitel

Sobald ein Bild hinterlegt ist, wird es entsprechend im Flyout angezeigt. Links und Untertitel sind dabei optional. {% hint style="info" %} Je nach Kategorieanzahl empfiehlt es sich eine unterschiedliche Anzahl an Bildern zu verwenden. Manchmal ist weniger auch mehr. {% endhint %} ### 5. Beschreibung Eine kurze Kategoriebeschreibung inkl. Call-To-Action ist eine weitere Möglichkeit dein Flyout schicker zu gestalten. Das ganze ist auch super simpel! Verwende hierzu einfach den Editor "Beschreibung" in der jeweiligen Hauptkategorie und der Inhalt wird automatisch im Flyout ausgegeben. {% hint style="info" %} Wenn du die Beschreibung im Flyout nicht anzeigen möchtest, das Feld "Beschreibung" jedoch nutzen willst, kannst du sie auch global über die [Theme Konfiguration](/en/theme-configuration/header/flyout-navigation.md#kategorie-beschreibung-anzeigen) ausblenden. {% endhint %} --- # Agent Instructions: 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: ``` GET https://docs.atloss.de/en/included-extensions/flyout-navigation.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.