April 17, 2021

Neu hinzugefügte Produkte im Shopify-Shop automatisch kennzeichnen

Neue Produkte im Shopify Shop automatisch kennzeichnen
Photo by Negative Space from Pexels

Heute hat mich eine meiner Shopify-Kundinnen darum gebeten, dass neu eingetroffene Produkte in Ihrem Shopify-Shop automatisiert als neues Produkt gekennzeichnet werden. Dazu sollten alle Produkte zählen, welche vor maximal vier Wochen zum Shopify-Shop hinzugefügt wurden.

Manueller Weg

Zunächst kam mir eine manuelle Lösung in den Sinn. Man kann einfach all jene Produkte im Shopify-Admin-Bereich mit dem Produkt-Tag ’new‘ auszeichnen. Dazu klickt man im Admin-Bereich in der linken vertikalen Navigation auf den Menüpunkt ‚Produkte‘ und wählt dann das gewünschte Produkte aus. Im Bereich, der im folgenden Screenshot dargestellt ist, kann man Produkt-Tags hinzufügen. Neue Produkt-Tags gibt man einfach wie gewünscht ein und bestätigt die Eingabe dann mit der Enter-Taste.

Shopify Produkt-Tags hinzufügen
Shopify Produkte mit Produkt-Tags auszeichnen.

Anschließend kann man dann mittels einer Liquid If-Abfrage ein ‚Neu eingetroffen‘-Badge zum Produkt hinzufügen. Die Abfrage überprüft, ob einem Produkt das ’new‘-Produkt-Tag zugeordnet ist und fügt, wenn das der Fall ist, ein wenig HTML hinzu, welches später die ‚Neu eingetroffen‘-Badge darstellt.

Im Shopify-Theme meiner Kundin habe ich diesen Code zum Snippet ‚product-item.liquid‘ hinzugefügt.

Um diesen Bereich zu finden, navigiert man im Shopify-Admin Bereich im unteren Bereich des linken vertikalen Menüs über den Menü-Punkt ‚Onlineshop‘ und den dazugehörigen Sub-Menü-Punkt ‚Themes‘ zum Bereich ‚Themes‘.

Shopify Theme anpassen
Navigation zum Bereich, wo das Shopify- Theme angepasst werden kann.

Die Snippets findet man dann hier im linken Bereich zwischen den anderen Arten von Assets wie Templates und Sections.

Im Snippet ‚product-item.liquid‘ fügt man dann an der richtigen Stelle den folgenden Code ein. Ich habe das direkt über dem Produktbild gemacht, aber das kommt auch auf das jeweilige Theme und die eigenen Darstellungswünsche an.

				
					{% for tag in product.tags %}
{% if tag contains 'new' %}
<div class="new-product-banner-wrapper">
    <div class="new-product-banner">
        <span>Neu eingetroffen</span>
    </div>
</div>
{% endif %}
{% endfor %}
				
			

Das ganze lässt sich dann via CSS so stylen, wie oben im Titelbild dieses Beitrages. Das ‚Neu eingetroffen‘-Badge kann aber natürlich frei gestaltet werden. Das hier ist nur ein Vorschlag.

Das ganze lässt sich dann via CSS so stylen, wie im Shopify Onlineshop meiner Kundin. Das ‚Neu eingetroffen‘-Badge kann aber natürlich frei gestaltet werden. Das hier ist nur ein Vorschlag.

				
					/*===== New Product Badge =====*/
.new-product-banner-wrapper {
z-index: 1;
}

.new-product-banner {
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
right: -3px;
}

.new-product-banner span {
position: absolute;
width: 165px;
background-color: #ebb8a8;
text-align: center;
left: -22px;
top: 30px;
transform: rotate(45deg);
color: #fff;
text-transform: uppercase;
}

				
			

Automatisierter Weg

Diese Möglichkeit der Einbindung funktioniert zwar, aber es ist in sofern nicht optimal, als dass man das Produkt-Tag bei neuen Produkten immer manuell hinterlegen muss. Außerdem muss man nach der gewünschten Zeitperiode das Produkt-Tag von einem ‚veralteten‘ Produkt manuell entfernen. Von daher ist es natürlich um einiges bequemer, wenn es eine automatisierte Methode dafür gäbe – und die gibt es.

Die automatisierte Version funktioniert, was das Einbinden des Codes betrifft, genauso wie die manuelle. Das CSS bleibt das gleiche – nur die Art der Abfrage, wann das nötige HTML eingebunden wird, ändert sich und sieht in der automatisierten Version folgendermaßen aus:

				
					    {% assign date_created = product.created_at | date:'%s' %}
    {% assign     date_now = 'now' | date:'%s' %}
    {% assign   difference = date_now | minus: date_created %}

    {% if difference < 2592000  %}
    <div class="new-product-banner-wrapper">
      <div class="new-product-banner"><span>Neu eingetroffen</span></div>
    </div>
    {% endif %}
				
			

Der Wert 2592000 spiegelt die Zeitperiode in Sekunden wieder (in diesem Beispiel also 30 Tage in Sekunden).