Ein Metaobject-Übersicht-Grid für das Horizon-Theme auf Shopify
Eine wiederverwendbare, dynamische Übersicht für Shopify mit Metaobjects als Datenquelle.
Arno Breitfuss
Full-Stack Developer @ Digit-One
Früher waren Sektionen, wie z. B. ein Grid auf einer Übersichtsseite, auf Shopify furchtbar statisch: ein Layout, fest in Liquid, änderbar nur durch Entwickler:innen. Mit Metaobjects und Theme-Blocks ist es nun aber endlich möglich, z. B. solch eine Übersicht dynamisch zu gestalten. Wir erklären, wie wir so einen Metaobject-Übersicht-Grid im Horizon-Theme gebaut haben.
Ein Grid für mehr als nur Veranstaltungen
Für eines unserer Projekte wurde mal wieder ein Grid für eine Übersichtsseite benötigt, dieses Mal für Veranstaltungen. Statt ihn fest auf diesen einen Fall zuzuschneiden, wollten wir einen Metaobject-Übersicht-Grid bauen, so dass dieser sich für beliebige Metaobjects wiederverwenden lässt.
Die Veranstaltungen bestehen aus:
- Titel & Bild
- Kurzbeschreibung
- Datum inkl. Zeit- Genaue Adresse
Das ist schon ein sehr spezifischer Anwendungsfall. Soll derselbe Grid später z. B. Produkthersteller zeigen, passt die Adresse vielleicht noch als Firmenadresse. Ein Datum ergibt bei Herstellern allerdings gar keinen Sinn mehr.
Der Grid muss also so aufgebaut sein, dass:
- die Filter frei gewählt werden können
- die Karten frei konfigurierbar sind
- die initiale Sortierung einfach abänderbar ist
Hier der Grid im Editor: Die Art der Metaobjects ist wählbar, Filter sind als Theme-Blocks konfigurierbar und die Karten bestehen ebenfalls aus Theme-Blocks.
Filter als Theme-Blocks
Auf der Collection-Seite liefert Shopify die Filter mit. Search & Discovery kennt aber nur Produkte, für Metaobjects gibt es keine Facet-API. Die Filter sind deshalb eigene Theme-Blocks, die im Theme-Editor in die Sektion gezogen werden:
_metaobject-filter-textfür Werte wie Ort oder Kategorie_metaobject-filter-datefür einen Zeitraum von/bis
Jeder Block hat zwei Einstellungen: ein Label und den Handle des Feldes, auf das er filtert. Für Veranstaltungen ist das ein Text-Filter auf ort_stadt und ein Datums-Filter auf datum. Beim Hersteller-Grid bleibt der Text-Filter, der Datums-Filter fällt einfach weg. Code ändert sich dabei nicht.
Der Text-Filter sammelt beim Rendern alle Werte des Feldes über alle Einträge ein, auch aus Listenfeldern, entfernt Duplikate unabhängig von Groß- und Kleinschreibung und macht daraus Checkboxen. Zusätzlich schreibt jeder Filter eine JSON-Map in die Seite, welcher Eintrag welche Werte hat:
{
"yoga-am-see": ["salzburg"],
"staedte-lauf": ["linz"]
}Auch spezielle Filter, wie das Datum für die Veranstaltungen, können dann so einfach implementiert werden:
Der Zustand der Filter wird einfach im Query-String gespeichert und mit JavaScript ausgelesen:
?ort_stadt=musterhausen&datum_from=2026-10-01&datum_to=2026-10-31Die Produktkarte von Horizon ist das Vorbild
Horizon zeigt bereits, wie Karten mittels Theme-Blocks zusammengesetzt werden können. Dies geschieht in der Produktliste, indem jeder Karte das entsprechende Produkt als Kontext mitgegeben wird:
{% content_for 'block',
type: '_product-card',
id: 'static-product-card',
closest.product: product
%}Die Block-ID ist mit static-product-card statisch und sagt Shopify, dass eine Konfiguration der Karte für alle Produkte gilt. Der Typ _product-card gibt closest.product an die Blöcke weiter: Galerie, Titel, Preis, Text. Ein Text-Block kennt die Schleife nicht. Die „Dynamic Source“ des Text-Blocks zeigt auf das aktuelle Produkt, und jede Karte im Grid folgt.
Dieselbe Karte, anderes Objekt
Aber closest nimmt auch ein Metaobject, adressiert über den Handle der Definition. Für Veranstaltungen:
{% content_for 'block',
type: '_metaobject-card',
id: 'static-metaobject-card',
closest.metaobject.veranstaltung: entry
%}Anders als bei _product-card hat ein Metaobject aber nur die Felder, die jemand angelegt hat. Deshalb ist _metaobject-card nur die Hülle und reicht den Eintrag an Horizons eigene Blocks durch:
{% content_for 'blocks', closest.metaobject.veranstaltung: entry %}Weil die Block-ID wieder statisch ist, liegt dieser Aufbau einmal an der Sektion:
Das Datum gibt die Reihenfolge vor
Der Metaobject-Übersicht-Grid lässt sich um eigene Sortierungen erweitern. Ist keine gewählt, werden die Einträge alphabetisch sortiert. Für Produkthersteller z. B. reicht das.
Für Veranstaltungen gibt es eine Sortierung nach Datum. In den Einstellungen der Sektion wird sie per Checkbox aktiviert und bekommt den Handle des Datumsfeldes, standardmäßig datum. Danach steht der nächste Termin vorne, vergangene Termine fallen heraus, im Grid und in den Filtern.
Genauso könnte man den Grid aber um jede beliebige Standardsortierung erweitern!
Wo Liquid an die Grenzen stößt
Mit einem Durchgang liefert metaobjects[type].values höchstens 250 Einträge. Das reicht zwar für unseren Anwendungsfall, aber da keine vergangenen Veranstaltungen angezeigt werden sollen, liegt es beim Shop-Inhaber, veraltete Einträge zu löschen.
Die vergangenen Veranstaltungen sind nämlich in den 250 enthalten und können nicht im Vorhinein aussortiert werden!
Fazit
Mit Theme-Blocks und der closest-Konvention bringt Horizon alles mit, um Metaobjects genauso flexibel darzustellen wie Produkte.
Karten, Filter und Sortierung werden im Theme-Editor zusammengestellt, statt fest in Liquid zu stehen, und derselbe Grid lässt sich für Veranstaltungen, Hersteller oder Standorte wiederverwenden. Die Filter orientieren sich dabei an der Collection-Seite und fühlen sich für Kund:innen vertraut an.
Das entlastet die Entwicklung und gibt Shop-Betreiber:innen die Freiheit, Übersichtsseiten selbst zu gestalten. Die Grenzen liegen bei sehr großen Datenmengen, doch für die meisten Anwendungsfälle machen Metaobjects in Horizon damit einen großen Schritt in Richtung eines vollwertigen Content-Management-Systems.