FROM CACHE - de_header

So fügen Sie Produkten basierend auf einem Produkt-Metafeld ein Abzeichen hinzu.

Kai
Shopify Staff
Shopify Staff

Kai_8-1661435970884.png

Dieses Tutorial zeigt, wie einfach es ist, Produkt-Metafelder zu verwenden, um zum Beispiel Produkte, die bestimmte diätgemäße, ethische oder andere Anforderungen erfüllen, mit einem speziellen grafischen Abzeichen zu kennzeichnen.

 

Dies ist praktisch, wenn Sie einen bestimmten Aspekt eines Produkts für Käufer hervorheben möchten, z. B. fair gehandelt, tierversuchsfrei, vegan, vegetarisch usw.

 

Das Schöne an dieser Methode ist, dass Sie den Code nur einmal in das Theme einfügen müssen. Von dort aus können Sie dann einfach das entsprechende Metafeld zu jedem Produkt hinzufügen und das entsprechende Abzeichen wird automatisch angezeigt! Sparen Sie Zeit und Mühe und präsentieren Sie spezielle Produkte schnell und einfach, damit Ihre Shopbesucher beim Stöbern in Ihrem Geschäft fundierte Entscheidungen treffen können.

 

Im ersten Teil dieses Tutorials wird das relevante Metafeld zu einem Produkt hinzugefügt. Also werden wir ein Ernährungsfeld hinzufügen, und der Wert für dieses Feld wird „vegan“ sein. Dies wird letztendlich ein „veganes“ Abzeichen auf der Produktseite anzeigen, nachdem wir die erforderliche Änderung am Themecode vorgenommen haben.

 

Der erste Schritt besteht also darin, zu Einstellungen > Metafelder > Produkte zu gehen:

 

Kai_0-1661435928921.png

 



Klicken Sie von hier aus auf eine der Schaltflächen „Definition hinzufügen“:

Kai_1-1661435928930.png

 

 

Wir geben hier einen Namen, in diesem Fall „Ernährungspräferenz“, wählen als Typ „Einzeiliger Text“ und definieren es als Werteliste und klicken auf Speichern:

 

Kai_2-1661435928797.png

 

 

Das ist unser erstellter Metafeldtyp. Jetzt gehen wir zu einer Produktseite und geben einen Wert für diesen Container für ein bestimmtes Produkt an. Navigieren Sie also im Admin zu Ihrem veganen Produkt, und am Ende der Produktseite sehen Sie Ihren gerade erstellten Metafeldtyp:

 

Kai_3-1661435928926.png

 

Klicken Sie also einfach in das Feld neben „Ernährungspräferenz“ und fügen Sie den Wert „vegan“ hinzu, indem Sie ihn in das Feld eingeben, klicken Sie dann auf „Speichern“:

 

Kai_4-1661435928911.png

 

 

Sobald Sie fertig sind, sollten Sie sehen, dass das Metafeld jetzt für das Produkt existiert:

 

Kai_5-1661435928895.png

 

 

Der nächste Schritt besteht darin, eine geeignete Grafik zu finden und diese unter Einstellungen > Dateien hochzuladen. Ich habe über eine einfache Bildsuche ein lizenzfreies Bild gefunden und bin auf diese kleine Grafik gestoßen:

Kai_6-1661435928834.png

 

Es ist ein bisschen groß, aber unsere Codezeile (hier die Liquid-Referenzen auf Englisch) kann dies beschränken. Sobald die Datei hochgeladen ist, kopieren Sie sich die URL zur Bilddatei und wir fahren mit dem nächsten Schritt fort.



Wir werden nun unserer Produktseitenvorlage eine Codezeile hinzufügen. In meinem Shop heißt die Datei product.liquid, aber für Ihr Theme kann dies anders heißen. Sie können die Codezeile an einer beliebigen Stelle platzieren, die Sie für geeignet halten, und um Hilfe dabei zu erhalten, können Sie sich an den Shopify-Theme-Support wenden, wenn Sie ein Shopify-Theme verwenden und noch Designtime übrig haben. Für Themes von Drittanbietern wenden Sie sich am besten an Ihren Theme-Entwickler, deren Kontaktdaten auf der Themeseite in unserem Themeshop gefunden werden können.

 

Hier ist die Codezeile (Weitere Metafeld Codereferenzen auf Englisch findest du hier😞

 

 

 

<div>
  {% if product.metafields.custom.dietary_preference.value contains 'vegan' %} <img src="<path_to_your_image" width=100px /> {% endif %}
</div>

 

 

 

Und das wars! Sobald Sie alle diese Schritte ausgeführt haben, können Sie auf allen Produktseiten, auf denen das Produkt durch das von Ihnen erstellte neue Metafeld als vegan gekennzeichnet ist, ein „veganes“ Abzeichen anzeigen!

 

Kai_7-1661435928858.png

 

 

Dieses Tutorial funktioniert gleichermaßen gut für fairen Handel, tierversuchsfreie, vegetarische usw. usw.

 

Profi-Tipp: Sie können mehrere bedingte Statements verwenden, um mehrere Abzeichen auf Produkten anzuzeigen, die eine ganze Reihe von Anforderungen erfüllen!