So änderst du Produkt-Badges in Shopify (2026)

Das Wichtigste in Kürze

• Das „Sale“-Badge erscheint automatisch, wenn für ein Produkt ein Vergleichspreis festgelegt ist – kein Code erforderlich.
• Das „Ausverkauft“-Badge (Sold Out) erscheint automatisch, wenn alle Varianten nicht auf Lager sind.
• Benutzerdefinierter Badge-Text, Farben und zusätzliche Badge-Typen werden in den Theme-Einstellungen gesteuert oder erfordern CSS/Code.
• Fudge kann vollständig benutzerdefinierte Badge-Logik hinzufügen – wie z. B. „Neu“, „Bestseller“ oder produktspezifische Tags – ohne manuelles Programmieren.

Um Produkt-Badges in Shopify zu ändern, lege einen Vergleichspreis fest, um das Sale-Badge auszulösen, bearbeite den Badge-Text in den Standardinhalten deines Themes und passe das Design in den Theme-Einstellungen oder mit CSS an. Neue oder Bestseller-Badges benötigen Produkt-Tags, eine App oder benutzerdefinierten Code.

Neu bei Badges? Beginne mit Wie man Produkt-Badges in Shopify hinzufügt.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Erfahrung in der Entwicklung und hat vielen Shopify-Marken bei ihren Storefronts geholfen. Wir entwickeln Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store.

Wie das Sale-Badge in Shopify funktioniert

Shopify zeigt das “Sale”-Badge automatisch bei jedem Produkt an, für das ein Vergleichspreis (Compare-at price) festgelegt ist.

So löst du das Sale-Badge aus:

Schritt 1. Gehe zum Shopify-Adminbereich → Produkte → klicke auf ein Produkt.

Schritt 2. Lege im Bereich Preisgestaltung einen Vergleichspreis fest, der höher als der tatsächliche Preis ist (z. B. Vergleichspreis 60 €, tatsächlicher Preis 45 €).

Schritt 3. Speichern.

Auf der Produktkarte in deinem Storefront wird nun ein Sale-Badge angezeigt. Das Badge-Label und der Stil werden von deinem Theme gesteuert.

So bearbeitest du Badges in Shopify

Das Aussehen von Badges – Farben, Schriftgröße, Form – wird normalerweise an einem von zwei Orten gesteuert:

Theme-Einstellungen. Gehe zu Onlineshop → Themes → Anpassen → Theme-Einstellungen. Suche nach einem Bereich für „Badges“, „Product labels“ oder „Product cards“. Einige Themes bieten hier Einstellungen für Badge-Farbe und -Stil an.

Abschnittseinstellungen. Klicke auf deiner Kategorie-Seite (Collection page) oder im Bereich für empfohlene Produkte (Featured products) im Theme-Editor auf den Abschnitt und suche in den Abschnittseinstellungen nach Einstellungen für Badges.

Wenn keiner der beiden Orte über Badge-Steuerungen verfügt, verarbeitet dein Theme Badges vollständig über CSS. Du musst die Styles manuell überschreiben.

Informationen zu Labels auf Produktseiten findest du unter Wie man benutzerdefinierte Labels auf Shopify-Produktseiten hinzufügt.

So fügst du Produkt-Badges in Shopify hinzu

Über „Sale“ und „Ausverkauft“ hinaus ist das Hinzufügen neuer Badge-Typen – „Neu“, „Bestseller“, „Limited Edition“ – in den meisten Themes keine native Shopify-Funktion.

Methode 1 - Produkt-Tags. Einige Themes unterstützen Tag-basierte Badges. Füge im Adminbereich unter Produkte ein Tag wie badge:new oder label:new zu einem Produkt hinzu, und das Theme rendert ein Badge aus diesem Tag. Überprüfe die Dokumentation deines Themes, um zu sehen, ob dies unterstützt wird.

Methode 2 - Eine Shopify-App. Apps wie Badgify oder Product Labels & Badges aus dem Shopify App Store fügen eine flexible Badge-Verwaltung hinzu, für die kein Code erforderlich ist.

Methode 3 - Benutzerdefinierter Code via Fudge. Für Themes, die Tag-basierte Badges nicht nativ unterstützen, kann Fudge, der KI-Operator für Shopify-Stores, sie als nativen Theme-Code anstelle einer weiteren App hinzufügen. Sage Fudge einfach:

„Füge Produkten, die mit ‘new-arrival’ getaggt sind, ein ‘Neu’-Badge hinzu. Gestalte es in Grün, platziere es in der oberen linken Ecke der Produktkarte und passe es an den Stil des bestehenden Sale-Badges an.“

Informationen zu einem Bestseller-Badge findest du unter Wie man Bestseller-Badges in Shopify hinzufügt.

So änderst du den Text des Sale-Badges in Shopify

Das „Sale“-Label wird normalerweise in der Sprachdatei deines Themes definiert, nicht im Theme-Editor.

Schritt 1. Gehe zu Onlineshop → Themes → Drei-Punkte-Menü (…) neben deinem Theme → Standard-Theme-Inhalt bearbeiten.

Schritt 2. Suche in der Suchleiste nach „Sale“ oder „sale“.

Schritt 3. Finde das entsprechende Feld (oft unter „Products“ oder „Labels“) und aktualisiere den Text.

Schritt 4. Speichern.

Dadurch wird das Badge-Label für alle Produkte mit einem Vergleichspreis geändert.

So änderst du Badge-Farben mit CSS

Wenn dein Theme keine Einstellung für Badge-Farben bietet, überschreibe sie mit benutzerdefiniertem CSS.

Gehe zu Theme-Einstellungen → Custom CSS und füge hinzu:

/* Sale badge */
.badge--sale,
.product-badge--sale {
    background-color: #e63946;
    color: #ffffff;
}

/* Sold out badge */
.badge--sold-out,
.product-badge--sold-out {
    background-color: #6b6b6b;
    color: #ffffff;
}

Finde die genauen Klassennamen, indem du in deinem Live-Store mit der rechten Maustaste auf ein Badge klickst → Untersuchen (Inspect).

So zeigst du den Rabatt in Prozent im Sale-Badge an

Einige Themes zeigen die prozentuale Ersparnis im Sale-Badge an (z. B. “25% sparen”) statt nur “Sale”. Das ist eine Funktion auf Theme-Ebene.

Überprüfe deine Theme- oder Abschnitts-Einstellungen auf eine Option wie “Show percentage savings” (Prozentsatz der Ersparnis anzeigen) oder “Badge type” (Badge-Typ). Wenn sie nicht vorhanden ist, musst du das Liquid-Template deiner Produktkarte bearbeiten, um den Prozentsatz zu berechnen und anzuzeigen.

Die Berechnung in Liquid:

{%- assign savings = product.compare_at_price | minus: product.price -%}
{%- assign savings_percent = savings | times: 100.0 | divided_by: product.compare_at_price | round -%}
Spare {{ savings_percent }}%

Beschreibe dies Fudge, wenn du es implementieren möchtest, ohne den Code selbst zu schreiben.

Fudge für individuelle Badge-Logik nutzen

Komplexe Badge-Anforderungen – mehrere Badge-Typen, Tag-gesteuerte Badges, Badges, die nur in bestimmten Datumsbereichen angezeigt werden, oder benutzerdefinierte Badge-Stile – sind ein guter Anwendungsfall für Fudges Store-Editor:

„Füge ein ‘Neu’-Badge zu Produkten hinzu, die mit ‘new-arrival’ getaggt sind, ein ‘Bestseller’-Badge zu Produkten, die mit ‘best-seller’ getaggt sind, und zeige einen prozentualen Rabatt im Sale-Badge an. Gestalte alle Badges einheitlich mit unseren Markenfarben.“

Fudge implementiert die Liquid-Logik und das CSS als Entwurf, sodass du die Badges auf echten Produktkarten überprüfen kannst, bevor du sie genehmigst. Sobald sie live sind, kann Fudge die Conversion Rate auf den geänderten Seiten vor und nach der Änderung anzeigen.

FAQ