Stöbere in den neuesten Blogbeiträgen von Shopify-Mitarbeitern zum Thema Handel und Shopify-Plattform.
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:
Klicken Sie von hier aus auf eine der Schaltflächen „Definition hinzufügen“:
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:
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:
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“:
Sobald Sie fertig sind, sollten Sie sehen, dass das Metafeld jetzt für das Produkt existiert:
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:
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!
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!