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

Das Wichtigste auf einen Blick

• Das “Sale”-Badge erscheint automatisch, wenn für ein Produkt ein Streichpreis (Vergleichspreis) festgelegt wurde – kein Code erforderlich.
• Das “Ausverkauft”-Badge erscheint automatisch, wenn alle Varianten nicht mehr vorrätig sind.
• Texte, Farben und zusätzliche Badge-Typen werden in den Theme-Einstellungen gesteuert oder erfordern CSS/Code.
• Fudge kann vollautomatische Badge-Logik hinzufügen – wie „Neu“, „Bestseller“ oder produktspezifische Tags – ohne manuelles Coding.

Produkt-Badges – diese kleinen Labels auf Produktkarten wie „Sale“, „Neu“ oder „Ausverkauft“ – sind starke Conversion-Signale. So steuerst du sie in Shopify.

Warum du uns vertrauen kannst

Jacques verfügt über mehr als 15 Jahre Erfahrung in der Shopify-Entwicklung. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von hunderten Shopify-Stores genutzt wird und eine 5.0-Bewertung im Shopify App Store hat.

Wie das Sale-Badge in Shopify funktioniert

Shopify zeigt das “Sale”-Badge automatisch bei jedem Produkt an, für das ein Vergleichspreis hinterlegt ist.

Um das Sale-Badge zu aktivieren:

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

Schritt 2. Lege im Bereich Preise einen Vergleichspreis fest, der höher als der eigentliche Preis ist (z. B. Vergleichspreis 60 €, aktueller Preis 45 €).

Schritt 3. Speichern.

Die Produktkarte zeigt nun ein Sale-Badge in deinem Storefront an. Das Label und der Stil des Badges werden von deinem Theme gesteuert.

So bearbeitest du Badges in Shopify

Das Aussehen der 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 Abschnitt “Badges”, “Produktlabels” oder “Produktkarten”. Einige Themes bieten hier Einstellungen für Farbe und Stil an.

Abschnitts-Einstellungen. Klicke auf deiner Kategorieseite oder im Abschnitt für vorgestellte Produkte im Theme-Editor auf den jeweiligen Abschnitt und suche in den Einstellungen nach Badge-Optionen.

Wenn an keinem der beiden Orte Badge-Steuerungen vorhanden sind, verwaltet dein Theme Badges ausschließlich über CSS. In diesem Fall musst du die Styles manuell überschreiben.

So fügst du Produkt-Badges in Shopify hinzu

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

Methode 1 – Produkt-Tags. Einige Themes unterstützen Tag-basierte Badges. Füge einem Produkt im Admin-Bereich einen Tag wie badge:neu oder label:neu hinzu, und das Theme rendert ein Badge aus diesem Tag. Prüfe die Dokumentation deines Themes, ob dies unterstützt wird.

Methode 2 – Eine Shopify App. Apps wie Badgify oder Product Labels & Badges aus dem Shopify App Store ermöglichen eine flexible Badge-Verwaltung ohne Code.

Methode 3 – Custom Code via Fudge. Für Themes, die Tag-basierte Badges nicht nativ unterstützen, kann Fudge diese Funktionalität hinzufügen. Sage Fudge einfach:

“Füge ein ‘Neu’-Badge zu Produkten mit dem Tag ‘neu-eingetroffen’ hinzu. Gestalte es in Grün, platziere es oben links auf der Produktkarte und pass den Stil an das bestehende Sale-Badge an.”

So änderst du den Sale-Badge-Text in Shopify

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

Schritt 1. Gehe zu Onlineshop → Themes → Aktionen → Sprachen bearbeiten.

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

Schritt 3. Suche das relevante Feld (oft unter „Produkte“ oder „Labels“) und aktualisiere den Text.

Schritt 4. Speichern.

Dies ändert das Badge-Label bei allen Produkten mit einem Vergleichspreis.

So änderst du Badge-Farben mit CSS

Wenn dein Theme keine Badge-Farben in den Einstellungen anbietet, kannst du sie mit eigenem CSS überschreiben.

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

/* Sale-Badge */
.badge--sale,
.product-badge--sale {
  background-color: #E63946;
  color: #FFFFFF;
}

/* Ausverkauft-Badge */
.badge--sold-out,
.product-badge--sold-out {
  background-color: #6B6B6B;
  color: #FFFFFF;
}

Du findest die genauen Klassennamen, indem du in deinem Live-Shop mit der rechten Maustaste auf ein Badge klickst → Untersuchen.

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

Einige Themes zeigen die Ersparnis in Prozent im Sale-Badge an (z. B. „25 % sparen“) anstatt nur „Sale“. Dies ist eine themeabhängige Funktion.

Prüfe deine Theme-Einstellungen oder Abschnitts-Einstellungen auf Optionen wie „Ersparnis in Prozent anzeigen“ oder „Badge-Typ“. Wenn die Option nicht vorhanden ist, muss das Liquid-Template der Produktkarte bearbeitet werden, um den Prozentsatz zu berechnen.

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 -%}
{{ savings_percent }}% sparen

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

Fudge für komplexe Badge-Logik nutzen

Komplexe Anforderungen – mehrere Badge-Typen, Tag-gesteuerte Badges, Badges für bestimmte Zeiträume oder spezielle Designs – sind ein perfekter Anwendungsfall für Fudge:

“Füge ein ‘Neu’-Badge für Produkte mit dem Tag ‘neu-eingetroffen’ hinzu, ein ‘Bestseller’-Badge für Produkte mit ‘best-seller’ und zeige den Rabatt in Prozent im Sale-Badge an. Gestalte alle Badges einheitlich in unseren Markenfarben.”

Fudge implementiert die Liquid-Logik und das CSS als Entwurf. Du kannst alles prüfen und freigeben, bevor es live geht.