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.
Verwandt: Add New Badges in Shopify.
So bearbeitest du Badges in Shopify
Das Erscheinungsbild von Badges – Farben, Schriftgröße, Form – wird normalerweise an einer von zwei Stellen gesteuert:
Theme-Einstellungen. Gehen Sie zu Onlineshop → Themes → Anpassen → Theme-Einstellungen. Suchen Sie nach einem Abschnitt wie “Badges”, “Produktlabels” oder “Produktkarten”. Einige Themes bieten hier Einstellungen für die Farbe und die Gestaltung von Badges.
Abschnitts-Einstellungen. Klicken Sie auf Ihrer Kollektionsseite oder im Bereich für hervorgehobene Produkte im Theme-Editor auf den entsprechenden Abschnitt und suchen Sie im Einstellungsbereich nach badge-bezogenen Optionen.
Wenn an keiner dieser Stellen Einstellungen für Badges zu finden sind, steuert Ihr Theme die Badges vollständig über CSS. In diesem Fall müssen Sie die Styles manuell überschreiben.
Für einen verwandten Ansatz siehe eigene Labels auf Shopify-Produktseiten hinzufügen.
So fügst du Produkt-Badges in Shopify hinzu
Das Hinzufügen weiterer Badge-Typen über “Sale” und “Ausverkauft” hinaus – wie “Neu”, “Bestseller”, “Limited Edition” – ist in den meisten Themes keine native Funktion von Shopify.
Methode 1 – Produkt-Tags. Einige Themes unterstützen tag-basierte Badges. Fügen Sie einem Produkt in der Produktverwaltung einen Tag wie badge:new oder label:new hinzu, und das Theme erstellt daraus ein Badge. Überprüfen Sie die Dokumentation Ihres 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 ermöglichen ein flexibles Badge-Management ohne Code-Anpassungen.
Methode 3 – Benutzerdefinierter Code über Fudge. Für Themes, die tag-basierte Badges nicht nativ unterstützen, kann Fudge diese Funktion hinzufügen. Weisen Sie Fudge einfach an:
“Füge ein ‘Neu’-Badge zu Produkten hinzu, die mit ‘new-arrival’ getaggt sind. Gestalte es in Grün, platziere es oben links auf der Produktkarte und passe es dem vorhandenen Sale-Badge-Stil an.”
Verwandt: Bestseller-Badges in Shopify hinzufügen.
Verwandt: Neue Badges in Shopify hinzufügen.
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 }}% sparenBeschreibe dies Fudge, wenn du es implementiert haben möchtest, ohne den Code selbst zu schreiben.
Fudge für komplexe Badge-Logik nutzen
Komplexe Anforderungen an Badges – mehrere Badge-Typen, tag-gesteuerte Badges, Badges, die nur in bestimmten Zeiträumen angezeigt werden, oder spezielle Badge-Designs – sind ein idealer Anwendungsfall für Fudge:
“Füge ein ‘Neu’-Badge zu Produkten mit dem Tag ‘new-arrival’ hinzu, ein ‘Bestseller’-Badge für Produkte mit dem Tag ‘best-seller’ und zeige einen prozentualen Rabatt im Sale-Badge an. Gestalte alle Badges einheitlich in unseren Markenfarben.”
Fudge implementiert die erforderliche Liquid-Logik und das CSS als Entwurf. Überprüfen und genehmigen Sie die Änderungen, bevor sie live gehen.
Falls du das noch nicht eingerichtet hast, beginne mit Produkt-Badges in Shopify hinzufügen.
FAQ
Drei häufige Ursachen: (1) der Vergleichspreis ist nicht höher als der eigentliche Preis (Shopify erfordert compare_at_price > price), (2) die Variante, die du ansiehst, hat ihre eigene Preisgestaltung ohne Vergleichspreis, oder (3) dein Theme rendert das Badge nur auf Collection-Cards, nicht auf der Produktseite selbst. Überprüfe zuerst die Preise der Variante.
Ja, mit Tag-abhängigem CSS. Tagge Produkte im Adminbereich (z. B. badge-color-green), beschreibe dann das Color-Mapping für Fudge und es schreibt das CSS pro Tag, ohne dass du nach den richtigen Selektoren suchen musst. Einige Themes bieten von Haus aus mehrfarbige Badges in den Theme-Einstellungen an – schau zuerst dort nach.
Bei reinen CSS-gestylten Text-Badges ist das vernachlässigbar. Ein paar zusätzliche DOM-Elemente pro Karte verursachen keine messbaren Leistungseinbußen. Bildbasierte Badges (hochgeladene PNGs/SVGs als Hintergrund) können den LCP auf Collection-Seiten beeinflussen – halte sie klein (unter 5KB pro Stück) oder nutze Inline-SVG.
Prozent-Badges konvertieren tendenziell besser in preissensiblen Kategorien, bei denen der Rabatt das wichtigste Signal ist. Generische "Sale"-Badges eignen sich für Premium-Marken, bei denen die direkte Anzeige des Rabatts deplatziert wirkt. Teste es mit deiner Zielgruppe – A/B-Tests von zwei Badge-Styles kosten wenig und liefern echte Daten.
Wahrscheinlich hast du einen Standard-Vergleichspreis für alle Produkte festgelegt (passiert oft bei einem CSV-Import). Nutze die Bulk-Bearbeitung für deine Produkte im Shopify-Adminbereich: Filtere nach "Vergleichspreis ist festgelegt" (Compare at price is set) und lösche den Wert bei Artikeln, die nicht wirklich im Angebot sind.
Wenn du das noch nicht eingerichtet hast, beginne mit Produkt-Badges in Shopify hinzufügen.