Farben und Beschriftungen der Produkt-Badges in Shopware 5 ändern
Im Shopware 5 Standard gibt es vier verschiedene Produkt-Hinweise, oder auch Badges genannt, die jeweils im Artikel-Listing in den Produkt-Boxen erscheinen können.
Discount Badge (%)
Recommendation Badge (TIPP!)
Newcomer Badge (NEU)
ESD Product Badge (Download-Icon)
Farben ändern
Die Farbkonfiguration der Badges sind unter Einstellungen > Theme Manager > Theme konfigurieren > Farb-Konfiguration > Tabellen & Badges zu finden. Dort kann die Hintergrundfarbe, sowie die Schriftfarbe individuell eingestellt werden.
Beschriftungen ändern
Die Beschriftungen des „Recommendation“- und „Newcomer“-Badge werden über die Textbausteine gesteuert. Diese findest du unter Einstellungen > Textbausteine > frontend > listing > box_article und können dort ganz einfach bearbeitet werden.
Die Beschriftungen des „Discount“- und „Download“-Badge sind Icons und können leider nicht über die Textbausteine verändert werden. Um diese zu bearbeiten, muss das Template angepasst werden.
Erstelle dafür eine „product-badges.tpl“ in deinem Theme im Ordner themes > Frontend > DEINTHEME > frontend > listing > product-box. Leite dort zuerst die Datei vom Bare-Theme ab und passe dann den entsprechenden Block an.
{extends file='parent:frontend/listing/product-box/product-badges.tpl'}
{* Discount badge *}
{block name='frontend_listing_box_article_discount'}
{if $sArticle.has_pseudoprice}
<div class="product--badge badge--discount">
Sale
</div>
{/if}
{/block}In unserem Beispiel haben wir das %-Icon mit dem Wort „Sale“ ausgetauscht.
Zum Vergleich siehst du hier den Code aus dem Bare-Theme und aus deinem eigenen Theme:
Nachdem die Template-Dateien gespeichert und hochgeladen wurden, muss der Cache gelöscht und das Theme neu kompiliert werden, damit die Änderungen im Shopware Shop sichtbar werden.
In unserem Beispiel sieht der Discount Badge anschließend wie folgt aus:
Wie du einen eigenen Produkt-Badge zu deinem Shopware Theme hinzufügen kannst, erfährst du in unserem Quick Tipp Quick Tipp #108: Eigene Produkt-Badges hinzufügen.
