How to Display Shopify Metafields in a Section
Render product and collection metafields in a storefront section: define the field, read it in Liquid, handle each metafield type, and guard for empty values.
Was Shopify-Metafelder sind, die Typen und Namespaces und wie du ihre Werte mit Liquid in einer Storefront-Sektion ausgibst — datengetriebene Blöcke, die synchron bleiben.
Ein Metafeld ist der Ort für die Daten, die dein Storefront braucht und für die Shopify kein eingebautes Feld hat — eine Materialliste, eine Pflegeanleitung, eine Größentabelle, ein „Handgefertigt in Portugal"-Badge, ein herunterladbares Datenblatt. Du definierst das Feld einmal, füllst es pro Produkt oder Kollektion aus und liest es dann in Liquid überall dort, wo es erscheinen soll. Der Wert lebt bei der Ressource, sodass er überall korrekt bleibt, wo er gerendert wird.
Das ist der Hub für das gesamte Thema. Er erklärt, was ein Metafeld tatsächlich ist, die Typen und Namespaces, denen du begegnest, wie du eines im Admin definierst und wie du seinen Wert in einer Storefront-Sektion ausgibst — und verweist dann auf die Cluster-Guides für die exakte Liquid-Syntax, Filter und Token-Muster.
Ein Metafeld ist ein typisiertes Schlüssel/Wert-Paar, das an eine Shopify-Ressource gehängt ist. Jedes Metafeld hat drei Teile, die zählen, wenn du es anzeigen willst:
custom oder specs.
Er verhindert, dass deine Schlüssel mit denen von Shopify oder einer App
kollidieren.care_guide oder material.single_line_text_field,
rich_text_field, number_integer, boolean, url, file_reference,
list.single_line_text_field und so weiter. Der Typ entscheidet, wie du den
Wert in Liquid ausgibst.Metafelder existieren an den meisten Ressourcen, die du anreichern möchtest:
Produkte, Produktvarianten, Kollektionen, Seiten, Blogs, Artikel, Kunden,
Bestellungen und der Shop selbst. In Liquid erreichst du sie über ein
.metafields-Objekt, zum Beispiel product.metafields.custom.material.
Verwechsle Metafelder nicht mit Metaobjekten. Ein Metafeld ist ein einzelnes Feld an einer bestehenden Ressource. Ein Metaobjekt ist ein ganzer eigener Datensatz-Typ, den du definierst — eine „Designer"- oder „Zutat"-Entität mit eigenen Feldern —, den du dann aus einem Metafeld referenzieren kannst. Die meiste Storefront-Arbeit beginnt mit einfachen Metafeldern; greife zu Metaobjekten nur, wenn du eine wiederverwendbare, strukturierte Entität brauchst.
Wenn du eine Sektion baust, kannst du Inhalte direkt in eine Theme-Editor-Einstellung tippen. Das ist für einmaligen Text in Ordnung. Aber wenn dieselbe Tatsache zu einem Produkt gehört — seine Waschanleitung, seine Garantiedauer, sein Herkunftsland —, ist die Speicherung in einem Metafeld die bessere Wahl:
number ist eine Zahl, ein boolean ist
wahr/falsch, ein file_reference ist eine echte Datei. Du kannst formatieren,
vergleichen und darüber iterieren.Genau dieser letzte Punkt ist der Grund, warum Metafelder datengetriebene Sektionen tragen: ein Stück Liquid, viele Produkte, kein Copy-Paste. Der Block, der es rendert, ist eine ganz normale eigene Sektion — Metafelder liefern nur ihren Inhalt.
Bevor du ein Metafeld lesen kannst, muss es existieren. Gehe in deinem
Shopify-Admin zu Einstellungen → Benutzerdefinierte Daten, wähle die
Ressource (etwa Produkte) und dann Definition hinzufügen. Gib ihr einen
Namen, setze Namespace und Schlüssel (zum Beispiel custom.care_guide) und
wähle den Typ. Speichere sie.
Eine Definition tut zwei nützliche Dinge: Sie fügt der Admin-Seite dieser Ressource ein Eingabefeld hinzu (sodass Händler es ausfüllen, ohne Code anzufassen), und — wenn du unter Zugriff Storefronts aktivierst — sie stellt den Wert für Liquid bereit, damit dein Theme ihn lesen kann. Ohne Storefront-Zugriff hält das Feld zwar Daten, aber deine Sektion kann sie nicht rendern.
Öffne ein Produkt (oder welche Ressource auch immer) und scrolle unten auf seiner Admin-Seite zum Bereich Metafelder. Tippe den Wert in das Feld, das deine Definition erstellt hat. Für ein Rich-Text-Feld bekommst du einen kleinen Editor; für ein Datei-Feld lädst du eine Datei hoch oder wählst sie; für eine Liste fügst du Einträge hinzu. Speichern.
Lies das Metafeld im Liquid deiner Sektion über
resource.metafields.namespace.key und gib es aus. Ein referenziertes
Metafeld-Objekt rendert seinen Wert direkt, sodass das für einfachen Text schon
reicht:
{% if product.metafields.custom.care_guide != blank %}
<div class="product-care">
<h3>Pflege</h3>
<div class="product-care__body">
{{ product.metafields.custom.care_guide }}
</div>
</div>
{% endif %}
Zwei Gewohnheiten machen das zuverlässig:
!= blank absichern. Nicht jedes Produkt hat jedes Metafeld
ausgefüllt. Der {% if … != blank %}-Wrapper bedeutet, dass der Block nur
rendert, wenn es etwas zu zeigen gibt — keine leere „Pflege"-Überschrift bei
Produkten ohne Pflegedaten.rich_text_field rendert sein HTML
über den metafield_tag-Filter; ein list-Typ braucht eine Schleife; ein
file_reference gibt dir ein Datei-Objekt, keine URL. Die genauen Muster pro
Typ stehen in den Guides unten.Die Schritt-für-Schritt-Anleitung, mit vollständiger Sektionsdatei und Schema,
steht in
Metafelder in einer Sektion anzeigen.
Die Filter-und-Token-Referenz — metafield_tag, metafield_text,
Listen-Handling und wie du ein Metafeld als konfigurierbares Token verfügbar
machst, sodass Händler das Feld im Editor wählen — steht in
Metafeld-Token und Filter.
Die Daten in einem Metafeld sind sicher: Sie leben am Produkt, nicht in deinem
Theme, sodass ein Theme-Update sie nie berührt. Was ein Theme-Update entfernen
kann, ist die Sektionsdatei, die sie rendert. Wenn du eine Metafeld-Sektion
durch Bearbeiten von Theme-Dateien hinzufügst, wird dieses Liquid Teil dieser
Theme-Version — und die Installation einer neuen Theme-Version oder ein
Theme-Wechsel veröffentlicht eine frische Kopie der Theme-Dateien und wirft dein
eigenes .liquid weg.
So kann ein metafeld-getriebener „Spezifikationen"-Block beim nächsten Theme-Update verschwinden, obwohl die zugrunde liegenden Daten unberührt bleiben. Die Lösung ist dieselbe wie bei jeder eigenen Sektion: entweder einen disziplinierten Wiederanwenden-Workflow einhalten oder die Sektion außerhalb des Themes über eine Theme App Extension rendern, sodass kein Update oder Wechsel sie entfernen kann. SectionGuard geht den zweiten Weg — seine Sektionen lesen deine bestehenden Metafelder, rendern aber aus der App, sodass der Block jede Theme-Änderung übersteht.
Die Cluster-Guides behandeln die beiden Aufgaben im Detail:
Wenn deine eigentliche Frage lautet „Wie behalte ich diese datengetriebenen Sektionen beim Theme-Wechsel?", lies Theme App Extensions und den ehrlichen Vergleich zusammen mit dieser Säule.
Schritt-für-Schritt-Anleitungen und Erklärungen zu diesem Thema.
Render product and collection metafields in a storefront section: define the field, read it in Liquid, handle each metafield type, and guard for empty values.
The Liquid filters for each metafield type — metafield_tag, metafield_text, list handling, date and money formatting — plus how to make a section's metafield merchant-configurable.
SectionGuard rendert deine eigenen Sektionen über eine Theme App Extension — dein Theme bleibt sauber und voll aktualisierbar.
Kostenlos für bis zu 3 Sektionen · Keine Kreditkarte · Läuft auf OS 2.0 & Horizon.