Hallo, wie kann ich es hinbiegen, dass ich neben den den Namen in der Navigation noch individuelle Icons einbinden kann? Beispielhaft bei zooroyal (die nutzen ja auch Shopware). Hab schon hin und her überlegt, finde aber keinen 100%igen Ansatz. Hat wer von euch eine Idee?
Hallo Uwe, danke für den Hinweis. Mit dem anderen Beitrag sollte das klappen…war da nur etwas abgeschreckt weil für sw4 und die tpl eine andere/nicht identisch ist. Falls mal wer vor der Frage steht: Bei SW5 muss man hier die main-navigation.tpl nehmen
@bingoo Hast Du das bei SW5 hinbekommen? Hätte das auch gern so, aber das von SW4 schaut doch so ganz anders aus auf die main-navigation.tpl bei SW5?! 
LG,
Nicole
Das geht per CSS / Less
-
Variante (so habe ich es)
In der main-navigation.tpl dem li element noch eine klasse mit der Kategorie-ID übergeben und per Less / CSS bei Bedarf eine entsprechende class für die Kategorie erstellen -
Variante per selector nth-child() per Less / CSS der festen Tabposition etwas zuweisen.
Vorteil Variante 1: Man kann die Position im Menu ändern
Vorteil Variante 2: Man muss die main-navigation.tpl nicht anpassen.
- Variante per selector nth-child() per Less / CSS der festen Tabposition etwas zuweisen.
Da werde ich nicht schlau draus. Wie und wo hast du das eingefügt?
Mich würde die erste Variante interessieren. Wie mache ich das?
Hi, ich selbst habe das so gelöst. In diesem Fall habe ich der Startseite ein „Haus Icon“ gegeben (Font Awesome vorher einbinden). Wichtig, das beispiel gilt nur für das Erste Listenelement weil hier eine Klasse „is–first“ übergeben wird. Da bei den anderen Menupunkten keine weiteren speziellen Klassen übergeben werden an die man sich andocken könnte, muss das wie bereits geantwortet wurde per nth-child() gelöst werden.
.navigation--link.is--first span:before {
font-family: FontAwesome;
content: "\f015";
float: left;
top: 2px;
position: relative;
margin-right: 5px;
}
{extends file='parent:frontend/index/main-navigation.tpl'}
{block name='frontend_index_navigation_categories_top_entry'}
{strip}
{if !$sCategory.hidetop}
{$sCategory.description}
{/if}
{/strip}
{/block}
Block vom Bare in die eigene index/main-navigation.tpl kopieren und das li-element um eine Klasse für die Kategorie erweitern. In meinem Beispiel wäre die Klasse “navigation–itemid–IDNR”. Die IDNR steht dann für die jeweiligen System-ID der Kategorie aus dem backend. Nur nach einem Update auch ins original-Bare gucken, ob sich dieser Block verändert hat und ggf. im eigenem Template anpassen.
Nun aber bitte Eigeninitiative wie man es per CSS mit Less umsetzt.
font awesome braucht man meist gar nicht.
siehe Shopware-font hier: https://developers.shopware.com/styletile/_components-icon-set.html icon–house
Nun aber bitte Eigeninitiative wie man es per CSS mit Less umsetzt.
Oh je… Da werde ich dieses Vorhaben erstmal zurück stellen müssen. 
Ich habe noch nie mit Less gearbeitet. Wenn ich mich da jetzt erst reinarbeiten muss, krieg ich den Shop nie fertig. Ich mach dann jetzt erstmal alles andere fertig und schau dann mal weiter. Aber danke für den Ansatz. Vielleicht hilft er mir ja.
Ich hab mir jetzt ein Plugin dafür heruntergeladen. Falls es noch jemanden interessiert, wie man das hinbekommt, wenn man selbst null Ahnung davon hat: damit klappt es super: