Mein erster onlineshop
mit shopware 5
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!
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>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.
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.tplwerden 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.tplund 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.
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.lessund 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.lessund 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)
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!
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Ü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
.product-slider--arrow.arrow--next:before {
content: "\e60f";
}
Danke & Ildiko
.product-slider--arrow.arrow--next:before {
content: "\e60f";
}
Danke.
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
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
du hast Recht!
Ich glaube die Icons haben ein Update bekommen. Schaue ich mir genauer an und werde die fehlenden Icons nachreichen.
Gruß
Alexander
ich habe neue Icons hinzgefügt, da ist auch YouTube dabei.
Viel Spaß: https://www.8mylez.com/shopware-icon-set/
Gruß
Alexander
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
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
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
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
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
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
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
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
Soweit funktioniert alles, aber das Icon ist viel zu klein!
Wo kann man die Größe einstellen?
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
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?