Overlay auf Produktseite einführen

Deutsch Diskussion Shopify Design

Topic summary

Anfrage: Ein Nutzer möchte auf der Produktseite einen Hinweis “nur noch 10 Stück verfügbar” anzeigen lassen, sobald der Lagerbestand unter 10 Einheiten fällt. Ein Screenshot zeigt die gewünschte Platzierung.

Lösung: Ein anderer Nutzer liefert eine technische Anleitung:

  • Bearbeitung der Theme-Datei sections/main-collection-product-grid.liquid (oder ähnlich)
  • Implementierung einer Liquid FOR-Loop, die den Gesamtbestand berechnet und entsprechende Meldungen ausgibt:
    • Über 10 Stück: “Auf Lager”
    • 1-10 Stück: “Nur noch X Stück verfügbar!”
    • 0 Stück: “Nicht auf Lager”
  • Zusätzliches CSS für rote, fettgedruckte Formatierung bei niedrigem Bestand

Hinweis: Die Änderungen sollten zunächst in einer Theme-Kopie/Testumgebung getestet werden. Code-Snippets für Liquid und CSS wurden bereitgestellt.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hallo,

ist es möglich ein Schriftzug zu implementieren “nur noch 10 Stück verfügbar” wenn die Anzahl der verkaufbaren Produkte unter 10 sinkt

kschulze_0-1720604062989.png
kschulze_0-1720604062989.png1032×516 273 KB

lg

Karsten

2

Irgendwie sind deine ganzen Fragen in der Community unbeantwortet untergegangen Karsten…

Um die verbleibende Menge der Produkte auf der CollectioN Page unterhalb jedem Produkt anzuzeigen kannst du ein benutzerdefiniertes Liquid-Snippet hinzufügen → Online-Shop → Themes → Aktionen → Code. Das aber bitte zuerst in einer Theme-Kopie/Testumgebung testen.

Finde die Datei wie sections/main-collection-product-grid.liquid (oder ähnliche, die für das Product Grid verantwortlich ist). Füge die folgende FOR-Loop an die Stelle hinzu, an der die verbleibende Menge angezeigt werden soll:

{% for product in collection.products %}
  - ### 
          {{ product.title }}
      
        {{ product.price | money }}

      
      
        {% assign total_inventory = product.variants | map: 'inventory_quantity' | sum %}
        {% if total_inventory > 10 %}
        

  Auf Lager

        {% elsif total_inventory > 0 %}
        

  Nur noch {{ total_inventory }} Stück verfügbar!

        {% else %}
        

  Nicht auf Lager

        {% endif %}
    

  

{% endfor %}

CSS für das Styling:

.inventory-info {
    font-size: 14px;
    color: #ff0000; /* Rot für niedrige Bestände */
    font-weight: bold;
}

Hoffe das hilft dir weiter! :wink: