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.

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 }}% 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 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.