Haus-Symbol statt Home: wie deine Navigation moderner und schlanker wird

Gerade bei der Startseite ist es sinnvoll, den Navigationspunkt optisch hervorzuheben – zum Beispiel mit einem Haus-Symbol. In diesem Tutorial siehst du, wie du das ganz einfach mit dem Plugin Custom Template Manager umsetzt. Dafür brauchst du keine Programmierkenntnisse, nur ein wenig Orientierung in den Theme-Dateien.

Warum ist das nützlich und was brauchst du?

Der Menüpunkt „Home“ ist in der Hauptnavigation oft nur durch ein Wort erkennbar. Mit einem Symbol - in diesem Fall einem kleinen Haus - fällt der Einstieg für Besucher schneller ins Auge und wirkt moderner.

Du brauchst nur das Plugin Custom Template Manager. Es sollte installiert und aktiviert sein. Außerdem solltest du wissen, wie du in den vorhandenen Template-Dateien des Plugins kleinere Änderungen vornimmst.

So gehst du vor

Öffne zunächst das Plugin über Einstellungen -> Custom Theme. Öffne dort den folgenden Eintrag (du kannst auch danach suchen): /layout/navigation/navigation.html.twig

Füge dort folgenden Code ein:

{% sw_extends '@Storefront/storefront/layout/navigation/navigation.html.twig' %}

{% block layout_main_navigation_menu_home %}
    {% if context.salesChannel.translated.homeEnabled %}
        <a class="nav-link main-navigation-link{% if controllerAction is same as('home') %} active{% endif %} home-link"
           href="{{ path('frontend.home.page') }}"
           itemprop="url"
           title="{{ homeLabel|striptags }}">
            <div class="main-navigation-link-text">
                <span class="d-none" itemprop="name">{{ homeLabel|sw_sanitize }}</span>
                {% sw_icon 'home' %}
            </div>
        </a>
    {% endif %}
{% endblock %}

Was passiert hier genau?

Shopware zeigt standardmäßig nur den Text „Home“ an. Mit dieser Anpassung wird der Menüpunkt durch das Shopware-eigene Icon home ergänzt. Das Symbol stammt direkt aus dem Shopware Icon-Set, du brauchst also keine zusätzlichen Dateien oder Bibliotheken.

Das Ergebnis

Sobald du die Datei gespeichert hast, ist die Änderung im Frontend direkt sichtbar. Ein Leeren des Caches oder eine Neukompilierung des Themes ist in diesem Fall nicht notwendig.

Mit wenigen Zeilen Twig-Code und dem richtigen Plugin kannst du die Nutzerführung in deinem Shop verbessern. Die Navigation wirkt klarer und das Symbol hilft Besuchern, sich schneller zurechtzufinden.