shopatch
← Blog

Produktspezifische Inhalte in Shopify: Metafelder und Metaobjekte statt Tag-if-Ketten

Kurze Antwort: Wenn du je Produkt unterschiedliche Texte oder Bilder zeigst (eine Serie, ein Motiv, ein Material, eine Marke), ist eine {% if product.tags contains %}-Kette ab zwei, drei Fällen das falsche Werkzeug. Sie kodiert den Inhalt fest ins Template, jeder neue Fall ist also ein weiterer Code-Edit. Speichere den Inhalt stattdessen als Daten: ein Metafeld, wenn er pro Produkt einzigartig ist, ein Metaobjekt, wenn derselbe Inhalt über viele Produkte geteilt wird. Dann ist ein neuer Fall ein Feld, das du ausfüllst, kein Code, den du umschreibst.

Das ist eine der häufigsten Fragen in den Shopify-Foren, in einem Dutzend Varianten: Wie zeige ich auf der Produktseite einen bestimmten Abschnitt, abhängig vom Produkt? Die erste Antwort, zu der alle greifen (wir auch), ist eine Tag-if-Kette. Sie funktioniert, also verbreitet sie sich, und dann wird sie leise zu dem, was niemand mehr anfassen will. Bei Shopatch bauen wir es andersherum, hier ist dasselbe Ziel auf drei Arten, von schnell-und-fragil bis zur Variante, die auf hunderte Produkte skaliert, ohne je wieder Code anzufassen.

Warum skaliert eine Tag-if-Kette nicht?

Eine Tag-if-Kette skaliert nicht, weil sie Inhalt in Logik packt: Jeder Produkttyp oder jedes Motiv wird zu einem weiteren Zweig im Template, und die Zweige vermehren sich. Du taggst Produkte und verzweigst über den Tag:

{% if product.tags contains 'einhorn' %}
  <h2>Die Einhorn-Serie</h2>
  <p>Handgezeichnet, kleine Auflage, etwas Glitzer.</p>
{% elsif product.tags contains 'kaefer' %}
  <h2>Die Käfer-Serie</h2>
  <p>Matte Oberfläche, gebaut für die Ewigkeit.</p>
{% endif %}

Für zwei oder drei feste Fälle, die sich nie ändern, ist das in Ordnung. Darüber hinaus kostet es dich bei jedem Edit: ein neues Motiv heißt neuer Code, der Inhalt liegt in einer Datei, die dein Team nicht gefahrlos anfassen kann, und sobald du zusätzlich nach Produkttyp oder Farbe verzweigst, wachsen die Kombinationen, bis niemand sie mehr liest. In dem Moment, in dem du ein viertes elsif einfügst, wechsle den Ansatz.

Wie bringst du produktspezifische Inhalte in Metafelder?

Produktspezifische Inhalte bringst du in Metafelder, indem du die Felder einmal unter Einstellungen, Benutzerdefinierte Daten, Produkte anlegst und sie dann im Template ausliest. Lege zum Beispiel ein einzeiliges Text-Feld „Motiv-Überschrift”, ein Rich-Text „Motiv-Text” und ein Bild „Motiv-Bild” an. Jedes Produkt trägt diese Felder nun auf seiner Admin-Seite, und das Template gibt aus, was jedes Produkt enthält:

{% assign heading = product.metafields.custom.motif_heading %}
{% if heading != blank %}
  <section class="motif">
    <h2>{{ heading }}</h2>
    {{ product.metafields.custom.motif_text | metafield_tag }}
    {% if product.metafields.custom.motif_image != blank %}
      {{ product.metafields.custom.motif_image.value | image_url: width: 1200
         | image_tag: loading: 'lazy', class: 'motif__image' }}
    {% endif %}
  </section>
{% endif %}

Der Inhalt ist jetzt aus dem Code heraus und für jeden pflegbar. Die Grenze: Er liegt pro Produkt. Wenn fünfzig Produkte zur selben „Einhorn-Serie” gehören, tippst du diesen Text fünfzigmal und änderst fünfzig Produkte, wenn er sich ändert. Metafelder sind das richtige Werkzeug, wenn der Inhalt pro Produkt wirklich einzigartig ist, und das falsche, wenn er geteilt wird.

Wie teilst du denselben Inhalt über viele Produkte?

Denselben Inhalt teilst du über viele Produkte mit einem Metaobjekt: Du definierst den Inhalt einmal als eigenen Eintrag und lässt jedes Produkt darauf zeigen. Lege unter Einstellungen, Benutzerdefinierte Daten, Metaobjekte eine Definition „Motiv” mit den Feldern Überschrift (Text), Beschreibung (Rich-Text) und Bild (Datei) an und füge pro Motiv einen Eintrag hinzu. Dann fügst du ein einzelnes Produkt-Metafeld vom Typ „Metaobjekt-Referenz” auf Motiv hinzu, sodass jedes Produkt sein Motiv nur noch aus einem Dropdown wählt. Das Template folgt der Referenz:

{%- assign motif = product.metafields.custom.motif.value -%}
{%- if motif -%}
  <section class="motif">
    {%- if motif.image.value != blank -%}
      {{ motif.image.value | image_url: width: 1200
         | image_tag: loading: 'lazy', class: 'motif__image' }}
    {%- endif -%}
    <h2>{{ motif.heading.value }}</h2>
    {{ motif.description | metafield_tag }}
  </section>
{%- endif -%}

Ändere die Einhorn-Beschreibung einmal, und jedes Einhorn-Produkt aktualisiert sich. Ein neues Motiv ist ein Metaobjekt-Eintrag plus eine Dropdown-Auswahl je Produkt, weiterhin null Code. Kann ein Produkt zu mehreren Motiven gehören, mach das Metafeld zu einer Liste von Metaobjekt-Referenzen und iteriere über product.metafields.custom.motifs.value.

Warum zeigt mein Metafeld rohen Code oder JSON?

Ein Metafeld zeigt rohes JSON, wenn es Rich-Text enthält und du direkt seinen .value ausgibst, denn ein Rich-Text-Feld wird als JSON-Struktur gespeichert, nicht als HTML. Die Lösung ist der metafield_tag-Filter, der das Feld als sauberes Markup rendert:

{{ product.metafields.custom.motif_text | metafield_tag }}
{{ motif.description | metafield_tag }}

Zwei verwandte Stolpersteine klären den Rest der Verwirrung. Metaobjekt-Felder liest du mit .value am Feld selbst (motif.heading.value), während ein Metaobjekt-Referenz-Metafeld dir das Objekt mit .value am Metafeld liefert (product.metafields.custom.motif.value). Und ein Bild in einem Datei-Feld braucht .value vor dem image_url-Filter, also product.metafields.custom.motif_image.value | image_url.

Metafelder oder Metaobjekte: was solltest du nehmen?

Nimm ein Metafeld für Inhalt, der zu einem Produkt gehört, und ein Metaobjekt für Inhalt, der über viele geteilt wird. Der schnelle Test ist die Zugehörigkeit: Gehören Text und Bild zu genau diesem einen Produkt, hält ein Metafeld sie dort, wo sie bearbeitet werden. Erscheint derselbe Block bei jedem Produkt einer Serie, Marke oder eines Materials, speichert ein Metaobjekt ihn einmal, und jedes Produkt referenziert ihn, sodass du ihn an einer einzigen Stelle pflegst. Zur Tag-if-Kette greifst du nur, wenn es zwei oder drei Fälle gibt, die sich wirklich nie ändern; darunter sind Daten übertrieben.

Überstehen Metafelder und Metaobjekte ein Theme-Update?

Ja, Metafelder und Metaobjekte überstehen ein Theme-Update, weil sie in den Daten deines Shops liegen, nicht in den Theme-Dateien. Ein Theme-Update installiert frische Theme-Dateien, aber deine benutzerdefinierten Daten bleiben unangetastet, der Inhalt bleibt also genau dort, wo er war. Das einzige theme-seitige Stück ist das kleine Snippet, das ihn anzeigt, und das hältst du in deiner eigenen Section- oder Snippet-Datei, portabel wie jeder eigene Code. Das ist ein echter Vorteil gegenüber dem Tag-if-Ansatz, bei dem der Inhalt in einem Template gefangen ist, das ein Theme-Update überschreiben kann.

Willst du das in deinem Store haben?

Das ist die Art Fundament, die wir bei Shopatch bauen: Inhalt als Daten modelliert, die dein Team bearbeiten kann, statt Logik, die nur ein Entwickler gefahrlos ändert. Wenn deine Produktseiten von Tag-if-Ketten zusammengehalten werden, verschieben wir den Inhalt, auf den es ankommt, in Metafelder und Metaobjekte, sodass das nächste Produkt anzulegen bedeutet, ein Feld auszufüllen. Schreib uns und sag uns, was sich pro Produkt ändert.