Anpassung des Home Button aus der Shopware Navigation

Ausgangssituation

Ausgangsstellung - Anpassung des Home Button aus der Shopware Navigation

Die Shopware Navigation ist im responsive Template bereits übersichtlich und effektiv gestaltet. Damit Ihre Navigation jedoch nicht länger als notwendig ist, empfehlen wir Ihnen den Home Button aus Ihrer Shopware Navigation in ein beliebiges Icon auszutauschen oder komplett auszublenden. So bleibt Ihre Navigation auch bei mehreren Kategorien übersichtlich, spart wichtigen Platz ein und fokussiert Ihre entsprechenden Inhalte.

Vorwort

Für die Umsetzung dieser Anpassung empfehlen wir Ihnen im Vorfeld unser Tutorial "So starten Sie in die Theme-Entwicklung". Die folgende Umsetzung wird in einem eigenen Shopware Theme erstellt und keineswegs in das Shopware Bare oder Responsive Theme integriert. Alle Umsetzungen führen Sie immer in einer separeten Testumgebung durch, nicht in Ihrem Live-Shop und beachten die Kompatibilität der angegebenen Shopware Version. Wir übernehmen keine Haftung für unsere Tutorials, stehen Ihnen für Fragen immer zur Verfügung. Nach jeder Anpassung ist das löschen des Caches sowie das kompilieren des Shopware Themes zu empfehlen. In Ihrem Shopware Backend im Menüpunkt "Einstellungen" wählen Sie dazu "Caches / Performance", navigieren zum Tab "Cache", klicken den Button "Alle auswählen" und daraufhin den blauen Button "Leeren" - bestätigen Sie daraufhin das geöffnete Fenster mit Klick auf den blauen Button "Themes kompilieren".

Umsetzung

Nachdem Sie Ihr eigenes Theme erstellt haben, suchen Sie im Pfad themes/Frontend/Bare/frontend/index nach folgender Datei main-navigation.tpl. In der besagten Datei main-navigation.tpl finden Sie den Block {block name='frontend_index_navigation_categories_top_home'}. Dieser Block beinhaltet Ihren Shopware Home Button, welchen Sie nun in zwei unterschiedlichen Varianten anpassen können.

Erstellen Sie die Datei main-navigation.tpl in Ihrem eigenen Shopware Theme unter folgenden gesamten Pfad: themes/Frontend/IhrEigenesTheme/frontend/index

Im nächsten Schritt muss die neue Datei main-navigation.tpl die vorhandenen Blöcke, Variablen und Informationen aus dem Shopware Bare Theme vererben. Dazu integrieren Sie folgenden Code an den Anfang der neu erstellten Datei:

{extends file="parent:frontend/index/main-navigation.tpl"}

Quellcode

Wir bieten Ihnen die Auswahl von zwei unterschiedlichen Varianten für die Anpassung Ihres Shopware Home Buttons. Zu erwähnen ist, dass beide Varianten Ihre Shopware Navigation verkürzen und entsprechende Kategorien besser in den Vordergrund stellen.


1. Variante: Home Button aus Shopware Navigation komplett ausblenden

Damit der Home Button aus der Shopware Navigation komplett ausgeblendet wird, müssen Sie lediglich den Block {block name='frontend_index_navigation_categories_top_home'} wie folgt kopieren und in Ihre Datei main-navigation.tpl integrieren:

{block name='frontend_index_navigation_categories_top_home'}{/block}

Quellcode

Ihre neu erstellte Datei main-navigation.tpl sollte nun wie folgt aussehen:

{extends file="parent:frontend/index/main-navigation.tpl"}

{block name='frontend_index_navigation_categories_top_home'}{/block}

Quellcode

Ergebnis: Home Button aus Shopware Navigation komplett ausblenden

Ergebnis: Home Button aus Shopware Navigation komplett ausblenden


2. Variante: Home Button aus Shopware Navigation mit Icon austauschen

Damit der Text im Home Button aus der Shopware Navigation mit einem Home Icon ausgetauscht wird, müssen Sie lediglich den Block
{block name='frontend_index_navigation_categories_top_link_home'} wie folgt kopieren und in Ihre Datei main-navigation.tpl integrieren:

{block name='frontend_index_navigation_categories_top_link_home'}
<a class="navigation--link is--first{if $sCategoryCurrent == $sCategoryStart && $Controller == 'index'} active{/if}" href="{url controller='index'}" title="{s name='IndexLinkHome' namespace="frontend/index/categories_top"}{/s}" itemprop="url">
<span itemprop="name">
<i class="icon--house"></i>
</span>
</a>
{/block}

Quellcode

Ihre neu erstellte Datei main-navigation.tpl sollte nun wie folgt aussehen:

{extends file="parent:frontend/index/main-navigation.tpl"}

{block name='frontend_index_navigation_categories_top_link_home'}
<a class="navigation--link is--first{if $sCategoryCurrent == $sCategoryStart && $Controller == 'index'} active{/if}" href="{url controller='index'}" title="{s name='IndexLinkHome' namespace="frontend/index/categories_top"}{/s}" itemprop="url">
<span itemprop="name">
<i class="icon--house"></i>
</span>
</a>
{/block}

Quellcode

Ergebnis: Home Button aus Shopware Navigation mit Icon ausgetauscht

Ergebnis: Home Button aus Shopware Navigation mit Icon ausgetauscht

Fazit

Nach Anpassung des Shopware Home Button scheint Ihr Shopware Shop einzigartiger und Ihre Kategorien werden verstärkt in den Fokus gesetzt. Prüfen Sie, welche Variante für Sie relevant ist und prüfen gegebenenfalls beide Darstellung in Ihrem Online-Shop. Bei Fragen stehen wir Ihnen als langjähriger Shopware Partner jederzeit gerne zur Verfügung.

Jetzt Ihre Kontaktanfrage senden

oder persönlichen Kontakt aufnehmen

Telefon

Unser Team freut sich auf Ihren Anruf:
+49(0)2862 8970818 oder +49(0)173 9043793