„Auf Lager“ oder „Ausverkauft“ klingt simpel. Bei Shopify-Produkten mit Varianten ist es aber entscheidend, auf welche Variante sich der Text bezieht und welche Inventareinstellungen gelten.
Dieses kleine Snippet unterscheidet zwischen verfügbar, nicht bestellbar und bestellbar trotz fehlendem Lagerbestand. Die letztere Situation ist wichtig, wenn ein Händler den Weiterverkauf bei Nullbestand erlaubt.
Warum reicht product.available oft nicht?
product.available sagt, ob mindestens eine Variante verfügbar ist. Das ist nützlich für Produktkarten, aber nicht immer für die aktuell gewählte Größe oder Farbe.
Für die Produktseite ist häufig product.selected_or_first_available_variant die bessere Ausgangslage. Deren available-Eigenschaft berücksichtigt die von Shopify definierten Verkaufsbedingungen. Siehe Liquid – product und Liquid – variant.
Liquid-Snippet für den Variantenstatus
Lege snippets/variant-availability.liquid an:
{%- comment -%}
snippets/variant-availability.liquid
{% render 'variant-availability', product: product %}
Nutzt bewusst keine globale, nicht ausgewählte Variante.
{%- endcomment -%}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- if current_variant -%}
<p class="variant-availability" role="status">
{%- if current_variant.available -%}
{%- if current_variant.inventory_management != blank
and current_variant.inventory_policy == 'continue'
and current_variant.inventory_quantity <= 0
-%}
<span>●</span> Bestellbar – derzeit nicht vorrätig
{%- elsif current_variant.inventory_management != blank
and current_variant.inventory_quantity > 0
and current_variant.inventory_quantity <= 3
-%}
<span>●</span> Verfügbar – nur noch wenige Stück
{%- else -%}
<span>●</span> Verfügbar
{%- endif -%}
{%- else -%}
<span>●</span> Aktuell nicht bestellbar
{%- endif -%}
</p>
{%- endif -%}Das Beispiel nutzt eine kleine Schwelle von drei Stück nur dann, wenn eine Bestandsverwaltung aktiv ist und ein positiver numerischer Bestand vorliegt.
Achtung: „Bestellbar – derzeit nicht vorrätig“ bedeutet nicht automatisch, dass ein Händler eine verbindliche Vorbestellung mit zugesagtem Lieferdatum anbietet. Für echte Vorbestellungen sind passende Prozesse, Lieferzeitangaben und gegebenenfalls Apps oder individuelle Logik nötig.
Einbau auf der Produktseite
Suche in deiner Theme-Kopie die Produktinformationen oder Kauf-Section. Füge dort ein:
{% render 'variant-availability', product: product %}Eine dezente visuelle Hervorhebung kann sinnvoll sein:
.variant-availability { font-size: .9rem; line-height: 1.5; }
.variant-availability span { color: #288453; margin-right: .35rem; }
.variant-availability:has(+ .unavailable) span { color: #9d3939; }Die letzte CSS-Regel ist nur ein optionales Gestaltungsbeispiel und erfordert ein entsprechendes Nachbarelement. Sinnvoller ist für produktive Themes eine explizite Statusklasse in jedem Zweig, falls du unterschiedliche Farben für „verfügbar“ und „nicht bestellbar“ brauchst.
Variantenwechsel nicht vergessen
Das Liquid-Snippet rendert beim Laden den Zustand der ausgewählten oder ersten verfügbaren Variante. Ändert sich die Auswahl im Browser, ändert sich die Liquid-Ausgabe nicht von allein.
Binde sie daher in den Update-Mechanismus deines Themes ein: die Produktinformationen werden bei einem Variantenwechsel neu geladen beziehungsweise der Status wird anhand der neu gewählten Variantendaten neu gerendert. Verlasse dich nicht darauf, dass jedes Shopify-Theme denselben JavaScript-Eventnamen verwendet.
Fünf sinnvolle Testfälle
| Situation | Erwartete Anzeige |
|---|---|
| Gewählte Variante normal verfügbar | Verfügbar |
| Bestand zwischen 1 und 3, Inventarverwaltung aktiv | Verfügbar – nur noch wenige Stück |
| Bestand 0, Weiterverkauf erlaubt | Bestellbar – derzeit nicht vorrätig |
| Variante nicht verkaufbar | Aktuell nicht bestellbar |
| Wechsel zwischen zwei Varianten | Anzeige muss zur neu gewählten Variante passen |
Weitere Grenze: Eine reine Lagerbestandszahl ist keine verlässliche Lieferzeitprognose. Gerade bei mehreren Standorten, externer Erfüllung und Rückständen können zusätzliche Regeln gelten.
Fazit
Mit einer klaren Verfügbarkeitsanzeige gibst du Kunden eine bessere Orientierung. Das Snippet ist schlank, aber die Anbindung an den echten Variantenwechsel muss stimmen. Für umfangreiche Produktseiten lohnt sich eine konsistente Architektur für Varianten, Warenkorb und Statusmeldungen – ein Bestandteil unserer Shopify-Theme-Entwicklung.
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