Beliebte Suchen

Metafelder in Shopify-Theme einbinden/anzeigen

Die in Shopify Metafelder kann man optimal in das Theme einbinden und so ergänzende Informationen anzeigen oder Bereiche des Themes steuern. Je nach Typ des Metafeld, ist der zu verwendende Code etwas abweichend. Unsere folgenden Beispiele gehen davon aus, dass das Feld in einem Produkt erstellt wurde und im Namensraum „custom“ ist. Der Name des Feld ist immer „testfeld„. D.h. der Code müsste geringfügig angepasst werden, wenn Ihr Shopify Metafeld anders benannt ist, bevor Sie diesen über den Codeeditor in Ihr Theme einbauen.

Shopify Meta-Textfeld-erstellen
Shopify Meta-Textfeld-erstellen

Metafelder in Shopify-Liquid einbinden – Beispiele

Metafeld vom Typ Einzeiliger Text

Der Klassiker, ein beliebiges Feld Text ausgeben und anzeigen

{% if product.metafields.custom.testfeld != blank %}
    {{ product.metafields.custom.testfeld }}
{% endif %}

Ein Feld in Produkt und Variante: Wenn die Variante einen Wert hat, wird dieses ausgeben, falls nicht wird der Inhalt vom Produkt ausgegeben.

Hinweis: Hier werden zwei gleichnamige Metafelder jeweils in Produkt und Variante benötigt, damit es funktioniert. Bei einigen Shopify Themes benötigt es ebenfalls eine Anpassung im Javaskipt, damit diese Anpassung bei wechseln der Variante funktioniert.

{% if product.selected_or_first_available_variant.metafields.custom.testfeld != blank %}
    {{ product.selected_or_first_available_variant.metafields.custom.testfeld }}
{% elsif product.metafields.custom.testfeld != blank %}
    {{ product.metafields.custom.testfeld }}
{% endif %}

Metafeld vom Typ „Datei“ als Link auf .PDF Datei ausgeben

Hinweis: Beim Erstellen des Metafeldes bei der Validierung „Alle Dateien akzeptieren“ ausgewählt sein.

{% if product.metafields.custom.testfeld.value.url != blank %}
    <a href="{{ product.metafields.custom.testfeld.value.url }}">Link zum PDF</a>
{% endif %}

Update (03/2023): Sollte im oben stehenden Code die URL nicht ausgegeben werden versuchen Sie es mit den folgenden Code:

{% if product.metafields.custom.testfeld != blank %}
    <a href="{{ product.metafields.custom.testfeld | file_url }}">Link zum PDF</a>
{% endif %}

Metafeld vom Typ „Datei“ als Bild (Image-Tag) ausgeben

{% if product.metafields.custom.testfeld != blank %}
    {{ product.metafields.custom.testfeld | metafield_tag }}
{% endif %}

Metafeld vom Typ „Produkt“

Hier wird der Link zum im Metafeld ausgewählten Produkt als Link ausgeben mit Produktname als Beschriftung

{% if product.metafields.custom.testfeld != blank %}
    {{ product.metafields.custom.testfeld | metafield_tag }}
{% endif %}

Metafeld vom Typ „Produkt“ (Liste)

Hier werden die Links zum den im Metafeld ausgewählten Produkten als Links ausgeben mit Produktnamen als Beschriftung. Das ganze ist fast wie im Beispiel zuvor, jedoch als Schleife, da in der Liste mehr als ein Produkt ausgewählt werden kann.

{% if product.metafields.custom.testfeld != blank %}
     {% for related_product in product.metafields.custom.testfeld.value %}
         <div>
              <a href="{{ related_product.url }}">{{ related_product.title }}</a>
        </div>
     {% endfor %}
 {% endif %}

Metafeld vom Typ Einzeiliger Text (Liste)

In folgendem Beispiel noch mal das Textfeld aber als Liste. Dieses ist dem mehrzeiligen Text z.B. oft vorzuziehen, weil man damit hervorragend auch Filter generieren kann.

{% if product.metafields.custom.testfeld != blank %}
     {% for text in product.metafields.custom.testfeld.value %}
         <div>
              {{ text }}
          </div>
      {% endfor %}
{% endif %}

Metafeld vom Typ URL

Zum Abschluss nochmal der Vollständigkeit halber ein simpleres Beispiel. Der Typ URL funktioniert im Grunde wie das Feld Einzeiliger Text

{% if product.metafields.custom.testfeld != blank %}
    <a href="{{ product.metafields.custom.testfeld }}">{{ product.metafields.custom.testfeld }}</a>
{% endif %}

Liquid filter: | metafield_tag

Der Filter „metafield_tag“ sorgt dafür, dass das HTML auf Basis des Feld-Typ direkt mit generiert wird. D.h. wenn ein Metafeld vom Typ Bild/Image ist, wird „<img src=“…“ direkt von Shopify mit ausgegeben, was das Programmieren oft einfacher macht. Will man jedoch nur die URL vom Bild, und das Image-Tag selbst generieren, kann man den Filter „| metafield_tag“ einfach entfernen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert