So fügen Sie Shopify-Produkt-Badges ohne App hinzu (Leitfaden 2026)

Möchten Sie Ihre Shopify-Produkte mit auffälligen, individuellen Tags hervorheben? Dann ist dieser Leitfaden genau das Richtige für Sie. Badges wie „Sale“, „Neu eingetroffen“ oder „Bestseller“ sorgen dafür, dass Produkte schnell auffallen. Sie benötigen dafür keine App. Überrascht? In diesem Beitrag erfahren Sie, wie Sie Shopify-Produkt-Badges ohne App erstellen können. Shopifys Metafelder und einfacher Themencode.

Diese Schritt-für-Schritt-Anleitung funktioniert auch ohne Programmierkenntnisse. Sie erfahren außerdem, wie Sie in Shopify ein Badge hinzufügen und Text und Farbe direkt im Admin-Bereich steuern. Am Ende haben Sie farbenfrohe, professionelle Badges, die übersichtlich aussehen und schnell geladen werden. Bereit, Ihren Shopify-Shop zu transformieren? Dann legen wir los! 

Zusammenfassung

• In Shopify können Sie Produkt-Badges ohne zusätzliche App mithilfe von Metafeldern und einem kleinen Code-Snippet hinzufügen.
• Badge-Text, Farbe und Stil können direkt im Shopify-Adminbereich gesteuert werden.
• Badges helfen dabei, Sonderangebote, Neuheiten, Bestseller und Artikel mit begrenztem Lagerbestand hervorzuheben.
• Mit einfachem CSS können Sie das Badge auf Produkt- und Kategorieseiten positionieren und gestalten.
• DiscountRay bietet fortschrittliche Smart Badges, falls Sie Automatisierung und dynamische Regeln wünschen.

Warum Abzeichen hinzufügen?

Badges helfen Kunden, sich auf wichtige Produkte zu konzentrieren. Sie heben hervor, was neu, beliebt oder im Angebot ist.
Sie leiten Käufer und steigern die Klickrate.

Beispiele: 

• „Sale“-Abzeichen zeigen Rabatte und Angebote an.
  
• „Bestseller“-Abzeichen schaffen Vertrauen und zeigen Popularität.
  
• „Neu eingetroffen“-Abzeichen zeigen an, was neu ist.
  
• „Begrenzter Vorrat“-Abzeichen erzeugen Dringlichkeit.
  

Wenn Sie Kleidung verkaufen, versehen Sie neue Artikel mit dem Hinweis „Neu eingetroffen“. Kunden erkennen sie sofort.

Das Hinzufügen von benutzerdefinierten Shopify-Badges verbessert das Erscheinungsbild Ihres Shops und spart Geld. Sie benötigen keine zusätzlichen Apps oder Skripte. Es ist eine der besten Möglichkeiten, Shopify-Produkten Badges hinzuzufügen und gleichzeitig die Dinge einfach zu halten.

Demnächst …

Sie lernen:

• Fügen Sie den Produkt- und Sammlungsseiten Abzeichen hinzu
  
• Steuern Sie Text und Farbe des Badges über die Shopify-Administration
  
• Erstellen Sie benutzerdefinierte Produktabzeichen, die Shopify-Shop-Besitzer lieben
  
• Fügen Sie Tags wie „Sale“, „Bestseller“ oder „Limitiert“ hinzu
  
• Verwenden Sie Shopify-Produktabzeichen ohne App, um Geld zu sparen und schnell zu bleiben
  

Im nächsten Abschnitt zeigen wir Ihnen Schritt für Schritt, wie Sie mit einfachem Code benutzerdefinierte Badges hinzufügen. Keine Sorge, falls Sie damit nicht vertraut sind. Die Anweisungen sind leicht zu befolgen. Kopieren und Einfügen genügt, um das gewünschte Ergebnis zu erhalten. 

Schritte zum Erstellen von Shopify-Produktabzeichen ohne App

Schritt 1 – Metafelder erstellen

Metafelder speichern zusätzliche Produktdetails.
Sie erstellen drei: eines für den Ausweistext, eines für die Hintergrundfarbe und eines für die Textfarbe.

Schritte:

1. Gehen Sie im Shopify-Adminbereich zu Einstellungen → Benutzerdefinierte Daten (Metafelder) → Produkte

2. Klicken Definition hinzufügen und erstellen
   

• Badge-Text – einzeiliger Text, Beispiel „Verkauf“
  
• Hintergrundfarbe des Abzeichens – einzeiliger Text, Beispiel, #FF0000
  
• Farbe des Badge-Texts – einzeiliger Text, Beispiel, #FFFFFF
  

3. Klicken Speichern
   

Bearbeiten Sie nun ein beliebiges Produkt und scrollen Sie zu Metafelder. Sie sehen drei Felder, die Sie ausfüllen können.

Beispiel:

Wenn es sich bei dem Produkt um ein Sommerkleid handelt, füllen Sie

• Badge-Text → Verkauf
  
• Hintergrundfarbe → #FF0000
  
• Textfarbe → #FFFFFF
  

Speichern Sie es.

Shopify zeigt jetzt für dieses Produkt ein rotes Verkaufsabzeichen an.

So funktionieren Shopify-Produktabzeichen ohne App.

Schritt 2 – Snippet hinzufügen

Dieser Schritt ist einfach. Sie fügen einfach einen Codeblock ein.

1. Gehe zu Online-Shop → Themen

2. Klicken Aktionen → Code bearbeiten
   
3. Unter Ausschnitteauf Einen neuen Snippet hinzufügen
   
4. Nennen Sie es Produktabzeichen
   
5. Fügen Sie diesen Code ein
   

{% if product.metafields.custom.badge_text != leer %}

  <div class=”custom-badge” 

       Stil = „Hintergrundfarbe: {{ product.metafields.custom.badge_background_color }}; 

              Farbe: {{ product.metafields.custom.badge_text_color }};”>

    {{ product.metafields.custom.badge_text }}

  </div>

{% endif %}

Code-Screenshot: 

Speichern Sie es.

Dieser Code prüft, ob ein Produkt einen Badge-Text hat. Wenn ja, wird das Badge automatisch angezeigt.

Beispiel:

Wenn Sie „Sale“ zu Ihrem Metafeld hinzufügen, wird dieser Code angezeigt. Alles, was Sie tun mussten, war, ihn zu kopieren und einzufügen. Einfach, oder? 

Dies funktioniert für ein Shopify-Verkaufsabzeichen, „Neu eingetroffen“ oder jeden beliebigen Text. Es ist eine der saubersten Möglichkeiten, Shopify-Produktabzeichen ohne App zu verwenden.

Schritt 3 – Zeigen Sie das Abzeichen

Sagen Sie Shopify nun, wo das Abzeichen angezeigt werden soll.

1. Offen Produktkarte.liquid (oder ähnlich)
   

• Suche nach „Karte“ oder „Produkt“
  

2. Suchen Sie den Produktbildbereich, gekennzeichnet durch <img> oder Produktkarte__Bild
   
3. Fügen Sie diese Zeile dort ein, wo Sie das Abzeichen haben möchten
   

{% render 'Produktabzeichen' %}

Code-Screenshot: 

Speichern.

Dann öffnen Produktvorlage.liquid und fügen Sie dieselbe Zeile dort ein, wo das Abzeichen auf den Produktseiten erscheinen soll.

Beispiel:

Fügen Sie es über dem Bild ein, um „Neu eingetroffen“ direkt auf dem Bild anzuzeigen. Speichern und aktualisieren.

Tipp:

Duplizieren Sie Ihr Design vor der Bearbeitung. So können Sie es bei Bedarf problemlos wiederherstellen.

Mit diesem Setup können Sie Shopify-Produkten schnell Abzeichen hinzufügen und es funktioniert mit jedem Design.

Schritt 4 – Gestalten Sie das Abzeichen

Jetzt legen Sie fest, wie Ihr Abzeichen aussehen soll.

Öffnen Sie Ihre CSS-Datei (base.css oder theme.css).
Scrollen Sie nach unten und fügen Sie diesen Code hinzu.

.benutzerdefiniertes Abzeichen {

  Position: absolut;

  oben: 10px;

  links: 10px;

  Polsterung: 5px 10px;

  Schriftstärke: fett;

  Schriftgröße: 14px;

  Rahmenradius: 5px;

  Z-Index: 10;

  Leerzeichen: Nowrap;

}

Code-Screenshot: 

Speichern.

Ihre Abzeichen werden jetzt in der oberen linken Ecke jedes Produktbildes angezeigt.

Beispiel:

Auf jedem Produkt ist jetzt ein rotes Shopify-Verkaufsabzeichen mit weißem Text deutlich zu sehen. Sie können die Position anpassen, indem Sie die oberen oder linken Zahlen ändern.

So gestalten Sie Shopify-Produktabzeichen ohne App. Und Sie mussten nicht einmal Ihr Hauptlayout ändern.

Schritt 5 – Badge-Details hinzufügen

Jetzt ist es Zeit, Ihr Abzeichen anzubringen.

1. Öffnen Sie im Shopify-Adminbereich Produkte

2. Wählen Sie ein Produkt wie „Winterjacke“
   
3. Scrollen Sie zu Metafelder
   
4. Ausfüllen
   
   • Badge Text → Bestseller
     
   • Hintergrund → #FFD700
     
   • Textfarbe → #000000
     
5. Speichern
   

Aktualisieren Sie Ihren Shop. Sie sehen ein goldenes Bestseller-Abzeichen.

Sie haben gerade ein benutzerdefiniertes Shopify-Setup für Produktabzeichen erstellt, das ohne externe Tools wunderbar funktioniert.

Optional – Tags verwenden

Sie können Abzeichen auch mit Tags anstelle von Metafeldern erstellen.

Fügen Sie Ihrem Produkt ein Tag mit dem Namen „Sale“ hinzu. Fügen Sie diesen Code dann an derselben Stelle wie zuvor ein.

{%, wenn product.tags „sale“ enthält %}

  <div class="”custom-badge”">Verkauf</div>

{% endif %}

Code-Screenshot: 

Jetzt stylen.

.benutzerdefiniertes Abzeichen {

  Hintergrundfarbe: #FF0000;

  Farbe: #FFFFFF;

}

Code-Screenshot: 

Beispiel:

Produkte mit dem Tag „Sale“ werden nun mit einem roten Sale-Symbol gekennzeichnet. Entfernen Sie das Tag, und das Symbol verschwindet.

Diese manuelle Shopify-Methode zur Badge-Einrichtung ist schneller, aber weniger flexibel. Im Gegensatz zum Shopify-Badge können Sie die Farben pro Produkt nicht ändern, ohne eine App mit Metafeldern.

Im nächsten Abschnitt listen wir einige gängige Fehlerbehebungen auf, die Ihnen helfen, Fehler zu minimieren. Schauen wir sie uns an. 

Allgemeine Fehlerbehebungen

Wenn die Abzeichen nicht richtig aussehen, überprüfen Sie diese.

Abzeichen fehlt

Stellen Sie sicher, dass die Metafeldnamen genau übereinstimmen (wie Badge-Text).

Abzeichenposition

Ändern Sie die oberen und linken Werte im CSS.

Farbe wird nicht angezeigt

Verwenden Sie ein # vor dem Farbcode.

Nach kleinen Korrekturen sollten Ihre Shopify-Produktabzeichen ohne die App korrekt angezeigt werden.

Bonus – Fügen Sie Smart Badges mit DiscountRay hinzu

Sie können dies mit Shopify-Abzeichen von weiterführen RabattRay. Sie benötigen keine Codierung. In nur 2 Klicks ist Ihr individuelles Abzeichen fertig.  

Beispiele: 

• Kaufen Sie 2 und erhalten Sie 15% Rabatt
  
• Kostenloser Versand für VIPs
  
• Exklusiver B2B-Deal

• Freitagsangebote

Es gibt eine ausführliche Anleitung, wie Sie Ihre Angebote mithilfe dieser personalisierter Rabatt App.

Abschließende Gedanken

Sie wissen jetzt, wie Sie Shopify-Produktabzeichen ohne App erstellen. Sie mussten weder programmieren noch etwas installieren.

Du

• Metafelder für Text und Farbe erstellt
  
• Ein kleiner Codeausschnitt hinzugefügt
  
• Platzierte Abzeichen auf Produkten und Kollektionen
  
• Gestalten Sie sie mit CSS
  
• Eine Tag-Methode gelernt
  
• Habe gesehen, wie DiscountRay dynamische Shopify-Abzeichen hinzufügt

Ihr Shop sieht jetzt übersichtlicher und schneller aus. Fangen Sie klein an. Fügen Sie ein Badge hinzu und testen Sie es. Ein kleines Badge kann die Wahrnehmung Ihrer Produkte durch Kunden deutlich verbessern. Wir hoffen, dieser Artikel war hilfreich für Sie. Teilen Sie ihn mit anderen Shopify-Händlern, die ihren Shopify-Shop optimieren möchten. Weitere Expertentipps finden Sie in unseren anderen E-Commerce-Blogs. 

FAQs