Custom Labels auf Produktbildern sind ein einfaches, aber wirkungsvolles Mittel, um Aufmerksamkeit, Engagement und Conversion Rates in deinem Shopify Store zu steigern.
In diesem Beitrag zeigen wir dir,
wie du dynamische Labels auf Kollektions- und Produktseiten integrierst –
vollständig steuerbar über den Theme Editor mittels JSON Schema.
So kannst du Countdown-Badges, Aktionshinweise oder „New Arrival“-Labels ganz einfach aktivieren oder anpassen – ohne Codeänderungen, direkt über das Admin-Interface.
Shopify-Themes nutzen JSON Schemas, um Einstellungen zu definieren, die im Theme Editor anpassbar sind.
So lassen sich über einfache Checkboxen oder Textfelder dynamische Optionen aktivieren – etwa „Countdown anzeigen“ oder „Deal Label Text“.
Hier ein Beispiel für ein JSON Schema, das du in deine Section integrieren kannst:
json:
{
"name": "Custom Labels",
"settings": [
{
"type": "checkbox",
"id": "show_countdown",
"label": "Show Countdown Label",
"default": true
},
{
"type": "text",
"id": "countdown_end",
"label": "Countdown End Date (YYYY-MM-DD HH:MM:SS)",
"default": "2025-12-31 23:59:59"
},
{
"type": "checkbox",
"id": "show_deal_label",
"label": "Show Deal Label",
"default": false
},
{
"type": "text",
"id": "deal_text",
"label": "Deal Label Text",
"default": "2-for-1 Deal!"
},
{
"type": "text",
"id": "collection_handle",
"label": "Collection Handle for Label",
"default": "summer-collection"
},
{
"type": "text",
"id": "tag_label",
"label": "Label for 'new' Tag",
"default": "New Arrival!"
},
{
"type": "checkbox",
"id": "show_limited_stock",
"label": "Show Limited Stock Label",
"default": true
},
{
"type": "number",
"id": "limited_stock_threshold",
"label": "Stock Threshold",
"default": 10
}
]
}
Mit diesen Einstellungen kannst du Labels flexibel ein- oder ausblenden und Texte direkt im Theme Editor anpassen.
Ein Countdown erzeugt Dringlichkeit – ideal für Rabattaktionen oder limitierte Sales.
liquid:
{% if settings.show_countdown %}
{% assign countdown_end = settings.countdown_end | date: "%s" %}
{% assign now = 'now' | date: "%s" %}
{% assign remaining = countdown_end | minus: now %}
{% if remaining > 0 %}
<div class="custom-label countdown">
Sale ends in:
{{ remaining | divided_by: 3600 | floor }}h
{{ remaining | modulo: 3600 | divided_by: 60 | floor }}m
{{ remaining | modulo: 60 }}s
</div>
{% endif %}
{% endif %}
💡 Tipp:
Da Liquid nur eingeschränkte Zeitberechnungen unterstützt, kannst du mit JavaScript eine präzisere Countdown-Logik umsetzen – das Enddatum wird über ein data-attribute aus Liquid übergeben.
Ein einfaches, aufmerksamkeitsstarkes Label für Promotions oder Rabattaktionen:
liquid:
{% if settings.show_deal_label %}
<div class="custom-label deal">
{{ settings.deal_text }}
</div>
{% endif %}
Das Label ist über die Theme-Option „Deal Label Text“ jederzeit anpassbar – so kannst du schnell zwischen „2-for-1“, „Summer Deal“ oder „Flash Sale“ wechseln.
Du möchtest Produkte einer speziellen Kollektion hervorheben? Dieses Snippet blendet automatisch den Namen der Kollektion ein:
liquid:
{% assign target_collection = collections[settings.collection_handle] %}
{% if target_collection and product.collections contains target_collection %}
<div class="custom-label collection">
{{ target_collection.title }}
</div>
{% endif %}
Das Collection Handle kannst du direkt im Theme Editor definieren – z. B. “summer-collection” oder “limited-edition”.
Du kannst Produkt-Tags nutzen, um dynamische Labels anzuzeigen – etwa für Neuheiten:
liquid:
{% if product.tags contains 'new' %}
<div class="custom-label tag">
{{ settings.tag_label }}
</div>
{% endif %}
💡 Über das Setting „Tag Label“ kannst du z. B. aus „New Arrival“ schnell „Jetzt neu“ oder „Brandneu“ machen – ohne Codezugriff.
liquid:
{% if settings.show_limited_stock and product.available and product.inventory_quantity < settings.limited_stock_threshold %}
<div class="custom-label limited-stock">
Limited Stock!
</div>
{% endif %}
liquid:
{% if product.tags contains 'best-seller' %}
<div class="custom-label best-seller">
Best Seller
</div>
{% endif %}
liquid:
{% if product.tags contains 'free-shipping' %}
<div class="custom-label free-shipping">
Free Shipping
</div>
{% endif %}
Diese Labels kannst du alle über zusätzliche JSON Schema Settings steuerbar machen – z. B. durch Texteingabefelder oder Checkboxen im Theme Editor.
Damit deine Labels auf allen Seiten konsistent erscheinen, erstelle eine gemeinsame Snippet-Datei (custom-labels.liquid) und binde sie in deine Templates ein:
liquid:
{% include 'custom-labels' %}
Änderst du etwas in diesem Snippet oder der Schema-Datei, wirkt es sich automatisch seitenübergreifend aus – für ein einheitliches Erscheinungsbild im gesamten Shop.
✅ Keine Codeänderung notwendig: Alles steuerbar über den Theme Editor
✅ Flexibel & erweiterbar: JSON Schema erlaubt schnelle Anpassungen
✅ Conversion-Boost: Labels schaffen Dringlichkeit, Vertrauen & Kontext
✅ Corporate Consistency: Einheitliche Designs über alle Produktseiten hinweg
Custom Product Labels sind ein wirkungsvolles Mittel, um Angebote, Dringlichkeit und Relevanz visuell zu kommunizieren.
Durch die Integration über Liquid + JSON Schema kannst du flexibel steuern,
welche Labels aktiv sind und welche Texte angezeigt werden.
Ob Countdown, Sale-Badge oder „New Arrival“ –
diese Elemente machen deinen Store dynamischer, conversionstärker und userfreundlicher.
Experimentiere mit neuen Ideen, erweitere dein Schema um weitere Optionen
und beobachte, wie kleine visuelle Details deine Verkaufszahlen steigern.
UNHYDE ist eine Web- und Shopify-Agentur aus München,
spezialisiert auf Webentwicklung, UX/UI Design und digitale Markenstrategien.
Wir schaffen leistungsstarke, conversion-optimierte Plattformen,
die Marken nachhaltig erfolgreich machen.
Als zertifizierter Shopify Partner
haben wir weltweit zahlreiche Stores und Themes entwickelt –
maßgeschneidert für Performance, Branding und Skalierbarkeit.
📩 Kontakt: hello@unhyde.me
Wir helfen dir, deinen Shopify Store mit dynamischen Labels, Custom Sections und smarten UX-Features weiterzuentwickeln.
Get in touch
contact now
