Flyout Navigation
Zuletzt aktualisiert
Zuletzt aktualisiert
© Atloss GmbH. All rights reserved.
Eine guter Shop zeichnet sich durch eine intuitive und gut strukturierte Flyout Navigation 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.
Grundsätzlich hast du fünf Möglichkeiten um dein Flyout aufzupeppen:
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 in Shopware 6 gemacht haben empfehlen wir dir zunächst dich mit den Basics zu befassen. Folgendes Video eignet sich hierfür hervorragend:
Für jede Kategorie im Flyout lässt sich ein eigenes Icon hinterlegen. Diese werden automatisch vor dem Kategorienamen platziert.
Für passende Icons können wir dir die Icon-Bibliothek Flaticon empfehlen. Dort lassen sich unzählige Icons im PNG-Format kostenlos herunterladen.
Das Icon selbst kannst du unter "Kataloge > Kategorien > [Kategorie] > Tab Allgemein > Zusatzfelder > Flyout > Icon" hinterlegen.
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.
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 an. Es gibt nur einen entscheidenden Unterschied. Nehmen wir hierzu den Screenshot von oben genauer unter die Lupe:
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":
Strukturkategorien erscheinen auch in der Sidebar Kategorie-Navigation.
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:
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.
Du kannst auch nur Strukturkategorien verwenden, um bspw. USPs im Flyout aufzählen. Mit passenden Icons kann dies auch sehr schick aussehen.
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:
Sobald ein Bild hinterlegt ist, wird es entsprechend im Flyout angezeigt. Links und Untertitel sind dabei optional.
Je nach Kategorieanzahl empfiehlt es sich eine unterschiedliche Anzahl an Bildern zu verwenden. Manchmal ist weniger auch mehr.
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.
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 ausblenden.
