Wie du jedes Icon in Shopware 5 anpassen kannst

Wie du jedes Icon in Shopware 5 anpassen kannst

Alexander Wolf 18. Januar 2016 22

Wer kennt es nicht? Das Herz Icon. Aber manchmal passt es einfach nicht.

Stellt euch vor wir haben einen Gothic Shop. Das passt einfach nicht so gut rein.

Oder ihr habt gerade eine Trennung hinter euch und wollte solche Icons erst einmal gar nicht sehen.

Es gibt natürlich auch noch normale Beispiele, wie: Ihr findet es für die Merkliste einfach unpassend.

Wie können wir das ändern?

Da Shopware super cool ist, haben sie natürlich welche eingebaut. Welche Icons sind dabei? Übersicht der Shopware Icons

Icons verwenden

Wie können wir die Shopware Icons verwenden? Ganz einfach!

Ihr sucht euch ein Icon aus. Uns gefällt das eye besonders gut. Wichtig ist der Code unter dem Icon.

Das Icon können wir mit folgendem Code benutzen

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

Icons austauschen

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 über das Frontend (i Tag)

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

Shopware 5 Herz Icon austauschen

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.

Eye icon ausgetauscht

Icon austauschen über LESS / CSS

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.

Mobile Ansicht Plus icon

Mit den Chrome Dev Tools 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.

Chrome Dev Tools 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.

Chrome Dev Tools Icon Übersicht

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. Cache leeren, Theme kompilieren. Fertig!

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

Mobile Ansicht Icons ausgetauscht

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. So könnt ihr euren Shop mit neuen Icons ausstatten!

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

22 Kommentare

  • Hi,
    wie kann ich denn die eigenen icons einbringen?
    In welches Verzeichnis müssen die geladen werden wenn ich kein vorgefertigtes nehmen möchte? Oder wie muss dann der code zum Icon aussehen?
    Tommy
  • Hallo Tommy,

    das kommt darauf an wie du die Icons bereitstellen möchtest.

    Wenn du das ähnlich wie Shopware über CSS und ein Font machst, musst du die Dateien in dein Theme in dem _public Ordner legen und richtig verknüpfen.

    Wenn du Font Awesome benutzt, musst du nur den Link integrieren und die passenden Klassen verwenden.

    Gruß
    Alexander
  • Hallo Björn,

    du hast Recht!

    Ich glaube die Icons haben ein Update bekommen. Schaue ich mir genauer an und werde die fehlenden Icons nachreichen.

    Gruß
    Alexander
  • Hallo,
    für das Ändern des 'heart-icon' bitte folgende Dateien nicht vergessen:
    Icon-Symbol:
    /themes/Frontend/Bare/frontend/listing/product-box/product-actions.tpl
    Icon-Größe:
    /themes/Frontend/Responsive/frontend/_public/src/less/_modules/product-box.less
  • Hi hier wiedermal Ron :-)

    immer wieder super hier deine Tipps!

    Ich habe eine Grundsatzfrage. Wenn ich die originale TPL und Less nehme und davon eine Kopie in mein Template lege und nur ein paar Dinge ändern will, ist mir noch nicht ganz klar, ob ich alles, was ich NICHT ändere, in meiner Kopie rauslöschen muss oder kann. Mir erschließt es sich nicht wie sich das dann dann zusammengefügt ... Daher habe ich sicherheitshalber den Inhalt in der Kopie komplett dringelassen - z.B. beim Header usw. Was muss also mindestens in meiner Kopie drin stehen, damit sich alles zusammenfügt und vor einem Update sicher ist?

    Gruß Ron
  • Hallo Ron,

    vielen Dank für die netten Worte.

    Die LESS Datei wird sozusagen unten eingefügt und überschreibt die Werte der vorherigen Dateien, wenn die selbe Klasse angesprochen wird. d.h. alles was unverändert bleiben soll kann raus.

    Bei einem Template ist es ähnlich. Da kommt es darauf an ob du die ganze Datei überschreibst oder ob du das Eltern-Template (Parent-template) überschreibst.

    Sicher vor einem Update bedeutet in diesem Fall, dass die Anpassungen nicht überschrieben werden. Es kann aber trotzdem sein, dass durch ein Update die neuen Anpassungen kaputt gehen. Möchte man dem Vorbeugen muss der gesamte Code kopiert werden, dann bekommt man allerdings nichts von neuen Anpassungen mit bzw. Bugfixes.

    Daher empfehle ich immer nur die neuen Anpassungen drin zu haben und vor einem Update ein Backup zu machen, sodass im Fall der Fälle man wieder schnell den alten Stand hat und entsprechend reagieren kann.

    Ich hoffe das hilft dir weiter.

    Gruß
    Alexander
  • Hallo,

    super Tutorial, hilft mir sehr weiter. Kann man denn anstatt dem Herz einfach nur "Merkzettel" schreiben?
    Habe mich bereits schon für den E-Mail Kurs angemeldet. Freue mich schon :)

    Grüße

    Johannes
  • Hallo Johannes,

    vielen Dank!

    Das wäre kein Problem. Du musst nur darauf achten, dass es auf dem Smartphone auch ordentlich aussieht.

    Die Icons nur auf dem Smartphone anzuzeigen wäre auch cool, dazu musst du entsprechend über LESS den Code anpassen.

    Gruß
    Alexander
  • Hallo,

    wieder ein klasse Tip von dir.
    Danke!

    Für's Icon auf der Detailseite habe ich noch in der:
    /themes/Frontend/Bare/frontend/detail/actions.tpl
    die Zeile 16:

    geändert zu (z.B.):

    und die Komplette actions.tpl Kopiert nach:
    /themes/Frontend/MeinTheme/frontend/detail/actions.tpl

    Danach musste ich noch die grösse anpassen für das Icon im Header so wie von Alexander beschrieben

    Nach Cache leeren und Theme kompilieren pass alles.

    VG
    EZD
  • Hallo EZD,

    vielen Dank für die netten Worte!

    Super! Ja überall wo die Icons angepasst werden (Detailansicht oder Navigation) muss noch die Größe entsprechend gesetzt werden, da diese fest im LESS Code für die jeweilige Klasse ist. Sollte eigentlich einheitlich sein.

    Gruß
    Alexander
  • Perfekt, ein Traum......
    Ich danke Dir für dieses Tut....ich werde es gleich heute noch ausprobieren.

    Noch so ne Frage am Rande. Wo findet man denn die Nummer der Icons für die Lessdatei?

    Gruß Marc
  • Ich hab das mal schnell mit dem Merkzettel probiert.
    Soweit funktioniert alles, aber das Icon ist viel zu klein!
    Wo kann man die Größe einstellen?
  • Hallo Marc,

    Vielen Dank!

    Ich nehme an du meinst den Code für "content". Den findest du entweder über die Chrome Dev Tools (Rechtsklick > Element untersuchen) auf das Icon und dann rechts bei der Klasse.

    Oder in der Datei themes/Frontend/Responsive/frontend/_public/src/less/_components/icon-set.less findest du die einzelnen Klassen. Da nach der entsprechenden Suchen.

    Ich hoffe das hilft weiter :)

    Gruß
    Alexander
  • Geniale Tips, bin ich noch gar nicht drauf gekommen. Schicke Seite von euch auch. Und Dank Newsletter bin ich auch informiert.
  • Hallo Ralf,

    vielen Dank für die netten Worte :)

    In Kürze startet auch der kostenlose E-Mail Kurs. Ich freue mich schon sehr darauf!

    Gruß
    Alexander

Was denkst du?

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Shopware 5.3 - Wichtige Neuerungen auf einen Blick
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
© 2017 by 8mylez. Powered by Goltfisch GmbH.