Das Wichtigste in Kürze
- Das „Sale“-Badge erscheint automatisch, wenn für ein Produkt ein Vergleichspreis (Compare-at price) festgelegt wurde – kein Code erforderlich.
- Das „Sold Out“-Badge (Ausverkauft) erscheint automatisch, wenn alle Varianten nicht mehr auf Lager sind.
- Benutzerdefinierte Badge-Texte, Farben und zusätzliche Badge-Arten werden in den Theme-Einstellungen gesteuert oder erfordern CSS/Code.
- Fudge kann eine komplett benutzerdefinierte Badge-Logik hinzufügen – wie „Neu“, „Bestseller“ oder produktspezifische Tags – ganz ohne manuelles Coden.
Produkt-Badges – diese kleinen Labels auf Produktkarten, die „Sale“, „Neu“ oder „Ausverkauft“ anzeigen – sind starke Conversion-Signale. Hier erfährst du, wie du sie in Shopify steuern kannst.
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 tatsächliche Preis (Shopify erfordert compare_at_price > price), (2) die angezeigte Variante hat einen eigenen Preis ohne Vergleichspreis, oder (3) dein Theme rendert das Badge nur auf Collection-Karten und nicht auf der Produktseite selbst. Überprüfe zuerst die Preise der Varianten.
Ja, mit Tag-abhängigem CSS. Verleihe den Produkten im Adminbereich Tags (z. B. badge-color-green) und beschreibe dann das Color-Mapping in Fudge, damit es das CSS pro Tag schreibt, ohne dass du nach den richtigen Selektoren suchen musst. Einige Themes bieten nativ mehrfarbige Badges in den Theme-Einstellungen an – schau dort zuerst nach.
Bei reinen CSS-gestylten Text-Badges ist das vernachlässigbar. Ein paar zusätzliche DOM-Elemente pro Karte fallen nicht ins Gewicht. Bildbasierte Badges (hochgeladene PNGs/SVGs als Hintergrund) können den LCP auf Collection-Seiten beeinflussen – halte sie klein (unter 5 KB pro Stück) oder nutze Inline-SVGs.
Prozent-Badges konvertieren in der Regel besser in preissensiblen Kategorien, in denen der Rabatt das wichtigste Signal ist. Ein allgemeines "Sale" funktioniert gut bei Premium-Marken, wo das Anzeigen des genauen Rabatts unpassend wirken könnte. Teste es mit deiner Zielgruppe – das A/B-Testing von zwei Badge-Styles ist günstig und liefert echte Daten.
Wahrscheinlich hast du einen standardmäßigen Vergleichspreis für alle Produkte festgelegt (passiert oft bei einem CSV-Import). Nutze die Bulk-Bearbeitung im Shopify-Admin: Filtere nach "Vergleichspreis ist festgelegt" und lösche den Wert bei Artikeln, die gar nicht im Sale sind.
Wenn du das noch nicht eingerichtet hast, fang hiermit an: Produkt-Badges in Shopify hinzufügen.