Ablaufdaten zu Ihrer Website hinzufügen

Sie können Ablaufdaten direkt in Ihrem Onlineshop abrufen und/oder anzeigen. Dazu gehören Ablaufdaten, deren Mengen und Angaben zum Verbrauch nach dem Öffnen („Verbrauch innerhalb von“). Der einfachste Weg, diese Informationen anzuzeigen, ist die Verwendung unserer Integration für den Shopify-Theme-Editor, mit der Ablaufdaten als Abschnitt oder Block hinzugefügt werden können.

1. Öffnen Sie Ihr Theme im Theme-Editor

2. Wählen Sie im Theme-Editor die Vorlage aus, zu der Sie Ablaufdaten hinzufügen möchten:

   

3. Wählen Sie die gewünschte Stelle innerhalb der Vorlage aus. Bewegen Sie dazu den Mauszeiger über den gewünschten Einfügebereich:

   

4. Klicken Sie auf „Block hinzufügen“ und wählen Sie im Bereich „Apps“ den Eintrag „Expiration Data“:

   

5. Dadurch wird der ausgewählten Vorlage ein Block für Ablaufdaten hinzugefügt:

   

6. Klicken Sie auf den Block „Expiration Data“, um weitere Konfigurationsoptionen aufzurufen. Bei Produkten mit mehreren Varianten werden die Ablaufdaten der jeweils ausgewählten Variante angezeigt. Es können mehrere Blöcke hinzugefügt werden, um verschiedene Anwendungsfälle abzudecken – z. B. ein Block für Ablaufdaten und ein weiterer für die Empfehlung zum Verbrauch nach dem Öffnen.

7. Klicken Sie auf Speichern

Hinzufügen unseres Snippets zu Ihrem Theme

Das Hinzufügen von Ablaufdaten sollte in der Regel über unsere Shopify-Theme-Integration erfolgen. Das manuelle Hinzufügen des Snippets ist nur für spezielle Anwendungsfälle erforderlich.

1. Rufen Sie den Shopify-Adminbereich auf
2. Öffnen Sie den Code-Editor Ihres Themes
3. Fügen Sie eine neue Theme-Datei hinzu
   • Klicken Sie auf das Verzeichnis „snippets“
   • Klicken Sie auf „Neues Snippet hinzufügen“
   • Verwenden Sie als Dateinamen ss-product-expiration-dates
   • Klicken Sie auf „Fertig“
4. Dadurch wird im Editor ein neuer leerer Tab namens snippets/ss-product-expiration-dates.liquid geöffnet
5. Kopieren Sie den Code aus unserem Liquid-Snippet und fügen Sie ihn in den Tab ein
6. Klicken Sie auf Speichern

Anzeigen der Ablaufdaten

Nachdem Sie unser Snippet zu Ihrem Theme hinzugefügt haben, besteht der nächste Schritt darin, es an der Stelle zu rendern, an der die Ablaufdaten angezeigt werden sollen. Dies kann über den Shopify-Adminbereich auf der Theme-Anpassungsseite erfolgen.

1. Öffnen Sie Ihr Theme im Theme-Editor
2. Wählen Sie im Theme-Editor „Produkte“ und dann „Standardprodukt“ (oder die gewünschte Vorlage) aus
3. Klicken Sie im Bereich „Vorlage“ auf „Block hinzufügen“
4. Wählen Sie „Benutzerdefiniertes Liquid“ (Custom liquid) oder, falls nicht verfügbar, „HTML“ (beachten Sie, dass der HTML-Block Liquid unterstützen muss)

• Falls Ihr Theme weder die Option „Benutzerdefiniertes Liquid“ noch „HTML“ anbietet, müssen Sie das Snippet manuell in Ihrem Theme rendern
• Dies kann über den Theme-Code-Editor erfolgen
• Wenn Sie Unterstützung benötigen, wenden Sie sich bitte an den Support

1. Nach der Auswahl können Sie den Block „Benutzerdefiniertes Liquid“ an die Stelle verschieben, an der die Ablaufdaten erscheinen sollen
2. Klicken Sie auf den neu hinzugefügten Block „Benutzerdefiniertes Liquid“
3. Fügen Sie in das Feld für benutzerdefiniertes Liquid den gewünschten Render-Code ein (Beispiele finden Sie unten)
4. Klicken Sie auf Speichern

Ablaufdaten basierend auf Sprache/Region des Benutzers anzeigen

Wenn Sie Ihre Website in mehreren Sprachen bereitstellen, können Sie das Datumsformat und den Text für das Ablaufdatum abhängig von der aktuell ausgewählten Sprache und/oder Region anpassen. Anstelle des Standard-Codes:

{% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}

Können Sie den folgenden Code verwenden, um die ausgewählte Sprache und/oder Region zu prüfen und das Ablaufdatum sowie den Text in einem passenden Format anzuzeigen:

{% assign locale = request.locale.iso_code %}
{% assign lang = locale | split: "-" | first %}
{% if lang == "es" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%d/%m/%Y" %}
{% elsif lang == "de" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Mindestens haltbar bis:", format: "%d.%m.%Y" %}
{% else %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}
{% endif %}

Wenn die Sprache Deutsch ("de") ist, wird der Text "Mindestens haltbar bis:" verwendet und das Datum im Format TT.MM.JJJJ angezeigt. Wenn die Sprache Spanisch ("es") ist, wird der spanische Text angezeigt, andernfalls wird ein englischsprachiges Format verwendet.

Wenn Sie den Text sowohl anhand der Sprache als auch des Landes anzeigen möchten, können Sie eine Bedingung hinzufügen, die die Variable locale prüft. In diesem Beispiel zeigen wir das Format JJJJ/MM/TT an, wenn sich der Benutzer in Spanien befindet, und TT/MM/JJJJ, wenn er sich in einem anderen spanischsprachigen Land befindet:

{% assign locale = request.locale.iso_code %}
{% assign lang = locale | split: "-" | first %}
{% if locale == "es-ES" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%Y/%m/%d" %}
{% elsif lang == "es" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Consúmase antes de:", format: "%d/%m/%Y" %}
{% elsif lang == "de" %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Mindestens haltbar bis:", format: "%d.%m.%Y" %}
{% else %}
  {% render "ss-product-expiration-dates", product: product, prefix: "Best by:", format: "%B %d, %Y" %}
{% endif %}