Shopify-Metafelder: So zeigst du sie im Storefront an

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.

Was ein Metafeld ist

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:

  • Ein Namespace — eine Gruppierung, die du wählst, wie custom oder specs. Er verhindert, dass deine Schlüssel mit denen von Shopify oder einer App kollidieren.
  • Ein Schlüssel — der Name des Felds innerhalb dieses Namespaces, wie care_guide oder material.
  • Ein Typ — welche Art von Daten es hält: 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.

Warum Daten aus einem Metafeld statt aus einer Texteinstellung anzeigen

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:

  • Es bleibt synchron. Der Wert lebt am Produkt, also zeigt jede Sektion, jedes Template und jede Seite, die ihn liest, dasselbe. Einmal aktualisieren, überall geändert.
  • Es ist strukturiert. Eine number ist eine Zahl, ein boolean ist wahr/falsch, ein file_reference ist eine echte Datei. Du kannst formatieren, vergleichen und darüber iterieren.
  • Es skaliert über einen Katalog. Eine einmal geschriebene „Spezifikationen"-Sektion kann die richtigen Spezifikationen für alle 2.000 Produkte rendern, weil jedes Produkt seine eigenen Metafeld-Werte trägt.

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.

Schritt 1 — Das Metafeld definieren

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.

Schritt 2 — Einen Wert eintragen

Ö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.

Schritt 3 — In einer Sektion anzeigen

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:

  • Mit != 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.
  • Den Typ auf die Ausgabe abstimmen. Ein 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.

Eine metafeld-getriebene Sektion update-sicher halten

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.

Wie es weitergeht

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.

In diesem Guide

Schritt-für-Schritt-Anleitungen und Erklärungen zu diesem Thema.

display shopify metafields on storefront

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.

shopify metafield display

Shopify Metafield Liquid Filters and Tokens

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.

In der App ansehen

Baue Sektionen, die dein nächstes Theme-Update überstehen.

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.