Wie du jedes Icon in Shopware 5 anpassen kannst

Wie du jedes Icon in Shopware 5 anpassen kannst

Alexander Wolf 18. Januar 2016 24

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.

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 (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.

Mobile Ansicht Plus icon

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.

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. Ab ins Backend, 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. Mit den neuen Icons wird das Frontend deines Shops um längen besser aussehen!

24 Kommentare

  • Hallo Alexander, wie kann ich die Farbe der Icon "arrwow" auf weiß ändern?
    .product-slider--arrow.arrow--next:before {
    content: "\e60f";
    }
    Danke & Ildiko
  • Hallo Alexander, wie kann ich die Farbe der Icon "arrwow" auf weiß ändern?
    .product-slider--arrow.arrow--next:before {
    content: "\e60f";
    }
    Danke.
  • 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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz