Ein Rabatt-Badge ist schnell eingebaut. Schwieriger wird es, wenn Produkte verschiedene Varianten, verschiedene Vergleichspreise oder gar keinen gültigen Streichpreis haben. Ein fest eingetragener Hinweis wie „–20 %“ kann dann falsche Informationen zeigen.
Mit diesem Shopify-Liquid-Snippet berechnest du den prozentualen Rabatt anhand einer konkreten Variante. Das Badge erscheint nur dann, wenn deren Vergleichspreis über dem aktuellen Verkaufspreis liegt.
Das Ergebnis
Angenommen, ein Artikel kostet aktuell 79 € und hat einen gültigen Vergleichspreis von 99 €. Die Berechnung lautet:
(99 – 79) / 99 × 100 = gerundet 20 %.
Das Badge zeigt –20 %. Ohne höheren Vergleichspreis wird kein Badge ausgegeben.
Das komplette Liquid-Snippet
Lege unter Onlineshop → Themes → … → Code bearbeiten → snippets die Datei discount-percentage.liquid an:
{%- comment -%}
snippets/discount-percentage.liquid
Auf einer Produktseite oder in einer Produktkarte:
{% render 'discount-percentage', product: product %}
{%- endcomment -%}
{%- assign badge_variant = product.selected_or_first_available_variant -%}
{%- if badge_variant
and badge_variant.compare_at_price > badge_variant.price
and badge_variant.price > 0
-%}
{%- assign amount_saved = badge_variant.compare_at_price
| minus: badge_variant.price
-%}
{%- assign percent_saved = amount_saved
| times: 100.0
| divided_by: badge_variant.compare_at_price
| round
-%}
{%- if percent_saved > 0 -%}
<span class="discount-badge" aria-label="{{ percent_saved }} Prozent Rabatt">
-{{ percent_saved }} %
</span>
{%- endif -%}
{%- endif -%}Das Snippet nutzt die von Shopify bereitgestellte ausgewählte beziehungsweise erste verfügbare Variante. Entscheidend sind deren price und compare_at_price – nicht etwa der niedrigste Produktpreis kombiniert mit einem Vergleichspreis einer anderen Variante.
Warum? Bei mehreren Varianten können pauschale Produktwerte Werte verschiedener Varianten abbilden. Für einen Rabattprozentsatz sollten beide Preise immer zur selben Variante gehören. Dokumentation: Shopify Liquid – product und Shopify Liquid – variant.
So baust du das Badge ein
- Theme duplizieren, bevor du den Code bearbeitest. Nutze die Kopie für deine Tests.
- Snippet discount-percentage.liquid anlegen und den Code einfügen.
- In der Produktkarte deines Themes (häufig eine Datei wie
snippets/card-product.liquid) die vorhandene Produktvariable prüfen. - Das Snippet bei der Preis- oder Badge-Ausgabe rendern. Ein beispielhafter Aufruf mit der Variable
card_product:
{% render 'discount-percentage', product: card_product %}Auf einer Produktseite, auf der die Variable product zur Verfügung steht:
{% render 'discount-percentage', product: product %}Die konkrete Position hängt vom Theme ab. In manchen Themes existieren bereits Sale-Badges. Dann solltest du die bisherige Ausgabe anpassen, statt zwei Rabatt-Badges übereinander anzuzeigen.
Minimales CSS
.discount-badge {
display: inline-flex;
align-items: center;
padding: .35rem .65rem;
border-radius: .35rem;
background: #8f2424;
color: #fff;
font-size: .875rem;
font-weight: 700;
line-height: 1.25;
}Lege es nach Möglichkeit in der vorhandenen Theme-CSS-Datei ab. Verwende die Farben und Abstände deines Designsystems, statt bei jeder Produktkarte eigene Inline-Styles zu erzeugen.
Was ist mit Variantenwechseln?
Liquid wird auf dem Server gerendert. Ein Wechsel der Variante per JavaScript aktualisiert die bereits ausgegebene Zahl nicht automatisch. Manche Themes laden Teile der Produktinformationen bei einem Variantenwechsel neu; andere nicht.
Falls dein Theme die Preisregion dynamisch ersetzt, muss das Badge Teil genau dieser aktualisierten Region sein. Andernfalls muss die JavaScript-Variantenlogik auch das Badge neu rendern. Teste deshalb nicht nur die zuerst ausgewählte Variante.
Vier wichtige Prüfungen
- Kein Vergleichspreis: Das Badge darf nicht erscheinen.
- Vergleichspreis kleiner oder gleich Verkaufspreis: Ebenfalls kein Badge.
- Variante gewechselt: Rabatt muss zur neuen Variante passen.
- Rabattaktionen und Märkte: Kundenspezifische Rabatte an der Kasse oder unterschiedliche Marktpreise sind nicht automatisch identisch mit dem durch
compare_at_pricedargestellten Nachlass.
Für die rechtlich korrekte Darstellung von Preisermäßigungen – insbesondere den maßgeblichen vorherigen Preis nach den anwendbaren Verbraucherpreisregeln – ist der Händler verantwortlich. Ein technisch berechneter Prozentsatz ersetzt diese Prüfung nicht.
Warum dieses kleine Snippet sinnvoll ist
Du pflegst den Vergleichspreis dort, wo er hingehört: in Shopify. Das Theme berechnet daraus den Hinweis. Der Code benötigt keine zusätzliche Rabatt-App und lädt kein externes Skript. Ob er die Conversion Rate tatsächlich verbessert, solltest du anhand realer Daten prüfen, statt es zu versprechen.
Wenn du eine saubere Rabattdarstellung über Produktkarten, Produktseite und Variantenwechsel hinweg möchtest, gehört das zu einer durchdachten Shopify-Theme-Entwicklung. Passend dazu: Shopify CRO optimieren.
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten