So fügst du in Shopify benutzerdefinierte Badges basierend auf Produkt-Tags hinzu

Produkt-Sichtbarkeit mit benutzerdefinierten Badges in deinem Shopify-Shop verbessern

Eine effektive Möglichkeit, die Aufmerksamkeit auf bestimmte Produkte in deinem Shopify-Shop zu lenken, ist das Hinzufügen benutzerdefinierter Badges wie „Sale“, „Neu“, „Bestseller“ oder „Web Exclusive“, um ihre besonderen Eigenschaften hervorzuheben.

Auch wenn diese Funktion deine Produktdarstellung deutlich verbessern und die Conversion steigern kann, erfordert die manuelle Umsetzung ein gewisses Maß an Programmierkenntnissen. Wenn du deinen Theme-Code nicht bearbeiten möchtest, gibt es jedoch auch No-Code-Alternativen über Shopify-Apps.

Der genaue Code kann sich zwar von Shop zu Shop unterscheiden, dennoch gibt es eine standardisierte Struktur, der alle Shopify-Shops folgen, wenn sie benutzerdefinierte Badges über Liquid (Shopifys Template-Sprache) integrieren.

Diese Anleitung bietet dir Schritt-für-Schritt-Anweisungen, damit du den Prozess sicher umsetzen und an die Anforderungen deines Shops anpassen kannst – egal, ob du mit klassischen Themes oder der modernen Online Store 2.0-Architektur arbeitest.

Die Standardstruktur verstehen

Der erste Schritt beim Hinzufügen benutzerdefinierter Badges zu deinen Produkten besteht darin, die Standardstruktur zu verstehen, auf der diese Funktion basiert.

Jeder Shopify-Shop folgt einem ähnlichen Grundmuster, wenn es darum geht, benutzerdefinierte Badges mithilfe von Produkt-Tags und bedingten Liquid-Anweisungen umzusetzen. Wenn du dich mit dieser Struktur vertraut machst, hast du eine solide Grundlage, auf der du aufbauen kannst.

Moderne Shopify-Themes (Online Store 2.0) unterstützen möglicherweise auch Metafelder für Badges. Diese bieten mehr Flexibilität und erfordern keine Änderungen am Theme-Code. Der in dieser Anleitung beschriebene Tag-basierte Ansatz bleibt jedoch eine zuverlässige und weit verbreitete Methode, die mit allen Theme-Versionen funktioniert.

Schritt-für-Schritt-Anleitung

Um benutzerdefinierte Badges erfolgreich in deine Produktlisten zu integrieren, musst du Anpassungen an den Liquid-Dateien deines Themes vornehmen. Die konkreten Dateinamen können je nach Theme variieren, häufig sind es jedoch Dateien wie „card-product.liquid“, „product-grid-item.liquid“ oder „product-card.liquid“.

Diese Dateien steuern, wie Produktinformationen auf Kategorieseiten, in Suchergebnissen und in Bereichen mit hervorgehobenen Produkten angezeigt werden. Wenn du diese Dateien anpasst, kannst du sicherstellen, dass deine benutzerdefinierten Badges je nach zugewiesenen Tags gut sichtbar neben den passenden Produkten erscheinen.

Bevor du Änderungen vornimmst, empfiehlt es sich dringend, dein aktuelles Theme zu duplizieren und so ein Backup zu erstellen. So kannst du deine Anpassungen sicher testen, ohne deinen Live-Shop zu beeinflussen. Falls etwas nicht wie erwartet funktioniert, kannst du jederzeit zur Originalversion zurückkehren.

Benutzerdefinierte Badges anhand von Produkt-Tags in Shopify hinzufügen

Der gängigste Ansatz ist, die Badge-Anzeigelogik in der Produktkarten-Datei deines Themes zu finden. Je nach Theme solltest du nach Dateien wie card-product.liquid, product-grid-item.liquid oder snippets/product-card.liquid suchen.

Sobald du die passende Datei gefunden hast, suche nach Code, der in etwa so aussieht:

{% if on_sale and settings.collections_show_sale_circle %}

  <span class="badge badge--sale">

    <span class="badge__text">{{ 'products.product.sale' | t }}</span>

  </span>

{% endif %}

Beachte, dass der Code in deinem Theme etwas anders aussehen kann, aber er wird ein ähnliches Muster mit Bedingungen und Badge-Styling haben.

Suche dann nach der if - bzw. Bedingungsanweisung und erweitere sie mit elsif, um deine eigenen Badge-Bedingungen hinzuzufügen:

{% if on_sale and settings.collections_show_sale_circle %}

   ...(your existing code)

{% elsif product.tags contains 'Web Exclusive'%}

  <span class="badge badge--sale">

    <span class="badge__text">Web Exclusive</span>

  </span>

{% elsif product.tags contains 'Best Seller'%}

  <span class="badge badge--bestseller">

    <span class="badge__text">Best Seller</span>

  </span>

{% endif %}

Du kannst mehrere elsif-Anweisungen für unterschiedliche Badge-Typen hinzufügen. Achte nur darauf, dass die Produkt-Tags, auf die du dich im Code beziehst, exakt mit den Tags übereinstimmen, die du deinen Produkten im Shopify-Admin zuweist (der contains-Operator unterscheidet zwischen Groß- und Kleinschreibung).

Wenn du dir bei deinen Programmierkenntnissen unsicher bist, solltest du ein Duplikat deines Themes erstellen und die Änderungen dort testen, bevor du sie in deinem Live-Theme übernimmst. Das ist eine Best Practice, die verhindert, dass mögliche Darstellungsprobleme deine Kund:innen beeinträchtigen.

Benutzerdefinierte Badges in Split hinzufügen

Wenn du das Split-Theme verwendest, kannst du benutzerdefinierte Badges über den Theme-Editor hinzufügen. Suche nach /snippets/product_badges.liquid und ersetze anschließend den Inhalt der Datei durch:

{% unless product.available %}

  <div class="product-badge sold"><span>{{ 'product.sold_out' | t }}</span></div>

{% else %}

  {% if product.compare_at_price > product.price %}

    <div class="product-badge sale"><span>{{ 'product.on_sale' | t }}</span></div>

  {% elsif product.tags contains 'preorder' %}

    <div class="product-badge preorder"><span>Pre Order</span></div>

  {% elsif product.tags contains 'new' %}

    <div class="product-badge new"><span>New</span></div>

  {% endif %}

{% endunless %}

Passe den Badge-Text und die Tag-Namen nach Bedarf an die Anforderungen deines Shops an und speichere die Änderungen. Denke daran, die entsprechenden Tags auch deinen Produkten im Shopify-Admin hinzuzufügen, damit die Badges angezeigt werden.

Zusammenfassend lässt sich sagen: Benutzerdefinierte Badges in den Produktlisten deines Shopify-Shops sind eine wirkungsvolle Möglichkeit, Sonderaktionen, exklusive Angebote oder andere besondere Merkmale hervorzuheben, die bestimmte Produkte abheben und die Conversion steigern.

Auch wenn für die Umsetzung mit Liquid und Produkt-Tags etwas Programmierwissen nötig ist, kannst du mit dem Verständnis der standardisierten Struktur und einer Schritt-für-Schritt-Vorgehensweise Badges genau auf die Anforderungen deines Shops zuschneiden. Wenn du lieber nicht programmieren möchtest, stehen dir zahlreiche Shopify-Apps zur Verfügung, die benutzerfreundliche Oberflächen bieten, um Badges zu erstellen und zu verwalten, ohne deine Theme-Dateien anzufassen.

Egal, ob du einen Sale bewirbst, web-exklusive Artikel präsentierst oder Bestseller hervorhebst: Diese Badges verbessern deine Produktdarstellung, ziehen die Aufmerksamkeit deiner Online-Kund:innen auf sich und sorgen letztlich für mehr Verkäufe sowie ein besseres Einkaufserlebnis.