Flyout Navigation
War das hilfreich?
English
War das hilfreich?
Eine guter Shop zeichnet sich durch eine intuitive und gut strukturierte 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.
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.
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":
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.
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.
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.
Solltest du bisher noch keine Berührungspunkte mit den 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 hinterlegen. Diese werden automatisch vor dem Kategorienamen platziert.
Für passende Icons können wir dir die Icon-Bibliothek empfehlen. Dort lassen sich unzählige Icons im PNG-Format kostenlos herunterladen.
Wie gehen wir also am besten vor? Im Prinzip legst du die einzelnen Elemente exakt wie die Kategorien aus an. Es gibt nur einen entscheidenden Unterschied. Nehmen wir hierzu den Screenshot von oben genauer unter die Lupe:
Strukturkategorien erscheinen auch in der Kategorie-Navigation.
Du kannst auch nur Strukturkategorien verwenden, um bspw. USPs im Flyout aufzählen. Mit passenden kann dies auch sehr schick aussehen.
Wenn du die Beschreibung im Flyout nicht anzeigen möchtest, das Feld "Beschreibung" jedoch nutzen willst, kannst du sie auch global über die ausblenden.
