Wie du jedes Icon in Shopware 5 anpassen kannst

Shopware Icons anpassen - Man sitzt an einem Theme, man ist fertig, aber irgendwie fehlt etwas. Häufig liegt es daran, dass noch die Shopware Icons verwendet werden. Mit wenigen Klicks lassen sich genau diese Icons austauschen, wir zeigen wie!

(Lesedauer ~4 Minuten)

Wie stellen wir das an?

Zuerst suchen wir uns natürlich ein Icon raus. Da Shopware sein eigenes Icon-Set besitzt, können wir uns aus diesem bedienen: Übersicht der Shopware Icons

Nicht das richtige dabei? Kein Problem, schau dir einfach unser Blog-Post an wie man in Shopware eigene Icons einfügt!

Schon ein Shopware Icon rausgesucht?

Dann schnappen wir uns den kleinen Code unter dem Icon. In unserem Fall gefällt uns das eye besonders gut.

Das Icon können wir mit folgendem Code benutzen

<i class="icon--eye"></i>

Wie ändert man das nun?

1. Icon austauschen (mit <i> Tag)
   
2. Icon austauschen (mit before und after)

Shopware verwendet die Icons auf zwei verschiedene Arten. Einige (wie das Herz, der Einkaufswagen, die Lupe) werden über den i Tag gesetzt.

<i class="icon--heart"></i>

Es gibt aber noch die andere Art über die "CSS Pseudoelemente" before und after

.product-slider--arrow.arrow--next:before{
    content: "\e60f";
}

Wir schauen uns erst die i Tag Variante an.

Icon austauschen (mit <i> Tag)

In diesem Beispiel tauschen wir das Herz Icon mit dem Eye Icon.

Dazu müssen wir das Herz Icon erst einmal finden (den richtigen Smarty Block). Gar nicht so einfach, aber in der Datei

themes/Frontend/Bare/widgets/checkout/info.tpl

werden wir fündig.

Da gibt es den Smarty Block frontend_index_checkout_actions_notepad

{block name="frontend_index_checkout_actions_notepad"}
	<li class="navigation--entry entry--notepad" role="menuitem">
		<a href="{url controller='note'}" title="{"{s namespace='frontend/index/checkout_actions' name='IndexLinkNotepad'}{/s}"|escape}" class="btn">
			<i class="icon--heart"></i>
			{if $sNotesQuantity > 0}
				<span class="badge notes--quantity">
					{$sNotesQuantity}
				</span>
			{/if}
		</a>
	</li>
{/block}

Um das Icon auszutauschen müssen wir den ganzen Block ersetzen. Wir legen die Datei info.tpl bei uns an

themes/Frontend/EUERTHEME/widgets/checkout/info.tpl

und packen den neuen Code mit unserem neuen Icon rein

{extends file="parent:widgets/checkout/info.tpl"}

{block name="frontend_index_checkout_actions_notepad"}
	<li class="navigation--entry entry--notepad" role="menuitem">
		<a href="{url controller='note'}" title="{"{s namespace='frontend/index/checkout_actions' name='IndexLinkNotepad'}{/s}"|escape}" class="btn">
			<i class="icon--eye"></i>
			{if $sNotesQuantity > 0}
				<span class="badge notes--quantity">
					{$sNotesQuantity}
				</span>
			{/if}
		</a>
	</li>
{/block}

Wir passen die CSS Klasse in Zeile 6 an. Aus icon--heart wird icon--eye.

Speichern. Cache leeren und Theme kompilieren.

Wenn wir alles richtig gemacht haben, dann sollte sich das Icon geändert haben.

Icon austauschen (mit before und after)

Einige Icons werden wir in keinem Smarty Block finden. Sie wurden einfach direkt über LESS / CSS gesetzt.

Für unser Beispiel wollen wir die Plus Icons austauschen. Diese findet ihr in der mobilen Ansicht.

Mit den Chrome Dev Tools (F12 oder Rechtsklick > Untersuchen) könnt ihr euch HTML Code anschauen und so herausfinden, in welcher LESS Datei der Code steht. Wir müssen nur die passende LESS Datei finden.

Das ist gar nicht schwer: Pro-Tipp: Ganz einfach herausfinden in welcher LESS Datei der Code steht

In unserem Beispiel ist es die footer.less.

Uns interessiert eigentlich nur das

content: '\e68f';

Wir brauchen also diesen content code von unserem neuen Icon. Dazu schauen wir in der Übersicht mit den Chrome Dev Tools nach.

Tauschen wir das Plus Icon mit einem Pfeil der nach unten zeigt aus. Für das Minus Icon (Zuklappen) nehmen wir einen Pfeil der nach oben zeigt (Surprise!)

Der Code für den Pfeil der nach unten zeigt ist

content: "\e6ce";

und für den Pfeil der nach oben zeigt ist

content: "\e6cf";

Also legen wir die Datei footer.less an:

themes/Frontend/EUERTHEME/frontend/_public/src/less/_modules/footer.less

und packen den neuen Code rein

.footer-main {
    .column--headline {
        &.is--active::after {
            content: "\e6cf";
        }

        &::after {
            content: "\e6ce";
        }
    }
}

Damit unsere LESS Datei auch eingebunden wird erstellen wir noch die all.less

themes/Frontend/EUERTHEME/frontend/_public/src/less/all.less

und verknüpfen unsere footer.less dort

@import "_modules/footer";

Alles Speichern. Ab ins Backend, Cache leeren, Theme kompilieren. Fertig!

Wenn wir alles richtig gemacht haben, sollten jetzt Pfeile zu sehen sein (Trommelwirbel)

Zusammenfassung

Shopware liefert einige coole Icons mit. Es gibt zwei Möglichkeiten die Icons anzupassen. Die Variante über Smarty Blocks ist etwas einfacher als über LESS/CSS. Mit den neuen Icons wird das Frontend deines Shops um längen besser aussehen!