Anpassen der Shopify-Produktseiten mit Metafeldern 

03 Juni Anpassen der Shopify-Produktseiten mit Metafeldern 

Metafelder sind zusätzliche Daten, die von Anwendungen an Produkte, Kunden, Bestellungen und andere Objekte im Shopify-Universum angehängt werden können. Shopify-Metafelder ermöglichen es Händlern, spezielle Informationen zu speichern, um die Produktdetailseiten anzupassen.

Diejenigen, die ein Produkt zum Shopify-Administrator hinzugefügt haben, wissen, dass dies eine ziemlich einfache Aufgabe ist. Man navigiert zur Registerkarte „Produkte“ und erstellt einen neuen Artikel, indem man einen Titel, eine Beschreibung, einen Preis und mehrere Varianten eingibt. 

Das Hinzufügen von Produkten, Spezifikationen und Informationen ist in Shopify sehr einfach.

Einerseits könnte dies für die meisten E-Commerce-Unternehmen ausreichen, da das Produktbeschreibungsfeld die wichtigsten Informationen zum Produkt wie Text, HTML, Videos, Bilder und ähnliche Angaben enthält. Andererseits kann es einschränkend sein. 

Bei der Erstellung einer komplexen Produktdetailseite in Shopify können Sie mit einigen Herausforderungen konfrontiert sein.

Das Standardbeschreibungsfeld auf einer Shopify-Produktdetailseite stellt einen monolithischen Inhaltsblock dar. Es ist durchaus möglich, verschiedene Abschnitte zu diesem Block hinzuzufügen, aber dieser Prozess ist nicht ideal. 

Produkt-Metafelder

Dieses Problem können Sie durch den Einsatz von Metafeldern beheben.

“Metadaten“ können als Daten über Daten bezeichnet werden. Eine Form von Metadaten sind „Metafelder“ in Shopify, mit denen Sie „benutzerdefinierte Felder zu Objekten wie Produkten, Kunden und Bestellungen hinzufügen können. Metafelder eignen sich zum Speichern von speziellen Informationen wie Teilenummern, Kundentiteln oder Zusammenfassungen von Blog-Beiträgen“, so die Shopify-Webseite. 

Um Shopify-Produktmetafelder zu erstellen und bearbeiten, können Sie eine Shopify-API oder eine der vielen Anwendungen verwenden, die Shopify bietet. Zu den beliebtesten Auswahlmöglichkeiten gehören: 

• Metafields Manager,
• Metafields Guru,
• Metafields Custom Field Editor,
• Metafields Editor.

Verwendung von Metafeldern

In diesem Abschnitt betrachten wir ein Beispiel, wie ein Händler Metafelder verwendet, um benutzerdefinierte Informationen zu einer Shopify-Produktdetailseite hinzuzufügen. 

Für dieses Beispiel wird ein Shopify-Thema verwendet, das Teil eines Seite-Migrationsprojekts ist. Das bestehende WordPress-Thema des Verkäufers wird repliziert und ersetzt. 

Für das neue Shopify-Thema wird die Anwendung Metafields Manager verwendet. (Beachten Sie, dass sich einige der Details in diesem Beitrag auf diese Anwendung beziehen.) 

Im ursprünglichen WordPress-Thema sind mehrere Abschnitte auf jeder Produktdetailseite vorhanden, die auch Bilder und Videos umfassen. Darüber hinaus beinhaltet es drei weitere zusätzliche Bereiche: einen zweiten Abschnitt mit Produktbildern, Versandinformationen unter der Schaltfläche „Zum Warenkorb hinzufügen“ und eine Liste mit Spezifikationen und anderen Informationen. Es ist schwierig, diese zusätzlichen Bereiche mit den Standard-Produktfeldern von Shopify hinzuzufügen. 

Es ist eine große Herausforderung, Abschnitte wie zusätzliche Fotos, Versandinformationen und Spezifikationen auf einer Standard-Produktdetailseite von Shopify hinzuzufügen. Beachten Sie die Meldung links vom unteren Pfeil: „VERSAND AM ENDE DES FEBRUARS 2020“. 

Wie kann der Händler alle diese zusätzlichen Informationen auf einer Produktdetailseite aufnehmen und dabei das Beschreibungsfeld nicht überladen? Nachfolgend wird dies schrittweise dargestellt. Beginnen wir mit den zusätzlichen Versandinformationen. 

Einige Funktionen der Anwendung Metafields Manager 

Zunächst laden Sie die Anwendung Metafields Manager herunter.

Globale Metafelder können mit Metafields Manager oder einer anderen ähnlichen Anwendung hinzugefügt werden.

Dann navigieren Sie zur installierten Anwendung und klicken auf den Link „Ihre Metafeld-Konfiguration bearbeiten“, wo Produkt-Metafelder erstellt werden können. Sobald Sie ein globales Metafeld hinzugefügt haben, wird jedes Produkt auf der Webseite es enthalten.

In unserem Fall des Beispielthemas wurde ein globales Produkt-Metafeld “shipping_message” („Versand_Nachricht“) hinzugefügt. 

Die Festlegung des Metafeldes shipping_message  („Versand_Nachricht“) auf den Typ der Zeichenfolge bedeutet, dass es ein Text sein wird. 

Im Administrationsbereich gehen Sie zu einer Produktverwaltungsseite, wo sich das Dropdown-Menü „Weitere Aktionen“ im oberen Teil der Seite befindet. 

Das Dropdown-Menü „Weitere Aktionen“ gibt den Zugriff auf die Metafelder für diese bestimmte Anwendung. 

Wählen Sie in diesem Dropdown-Menü einen Link „Add Metafields to Product“ („Metafelder zum Produkt hinzufügen“) aus. Die resultierende Seite enthält alle für das Produkt verfügbaren globalen Metafelder. Finden Sie das Metafeld “shipping_message” („Versand_Nachricht“) für das Beispielthema, das sich am Ende der Liste befindet, und geben eine benutzerdefinierte Nachricht ein: “SHIPS AT THE END OF FEBRUARY 2020” („VERSAND ENDE FEBRUAR 2020“), da dieses Produkt vorbestellt werden kann. 

Dem Metafeld “shipping_message” („Versand_Nachricht“) am Ende der Liste wurde die benutzerdefinierte Nachricht “SHIPS AT THE END OF FEBRUARY 2020“ („VERSAND ENDE FEBRUAR 2020“) hinzugefügt.

Bearbeitung des Themas

Von Shopify-Mitbegründer und CEO Tobias Lütke wurde die Vorlagensprache Liquid entwickelt. Sie ist in Ruby geschrieben und dient als Rahmen für alle Shopify-Themen. Mit Liquid können Entwickler auf einfache Art und Weise Variablen oder Kontrollstrukturen zu einem Shopify-Thema hinzufügen.

Navigieren Sie zur Themendatei für den Abschnitt der Produktdetailseite, wo Sie die Versandnachricht zum Thema eingeben möchten. Dort platzieren Sie einen Code zur Anzeige des Metafeldes. 

Eine neue Anweisung wird durch doppelte geschweifte Klammern angezeigt.

In Liquid bezieht sich das Produkt auf das Objekt. Ein einzelnes Objekt kann viele verschiedene Eigenschaften unterstützen und Metafelder sind eben eine Eigenschaft dieses Objekts. 

Wenn ein Käufer eine Seite besucht, kann er eine Versandnachricht dieses Produkts lesen, die mit diesem Code angezeigt wird. Da diese Nachricht von der Standardproduktbeschreibung getrennt ist, wäre es schwierig, sie ohne ein Metafeld hinzuzufügen. 

Die Versandnachricht, die von der Standardproduktbeschreibung getrennt ist, wird auf der Produktdetailseite angezeigt. 

In unserem Beispiel wird die Versandnachricht verwendet, weil ein Produkt vorbestellt ist. Wenn es vorrätig ist, kann die Meldung „AUF LAGER & VERSANDFERTIG“ lauten. 

Die Nachrichten in Liquid können mithilfe des folgenden Codes verwaltet werden.

Es sollte darauf hingewiesen werden, dass der Code prüft, welche Mengen sich auf Lager befinden. Wenn es keine oder geringe Mengen sind, wird die Meldung des Metafeldes „VERSAND ENDE FEBRUAR 2020“ angezeigt. Bei größeren Mengen erscheint die Standardmeldung „AUF LAGER & VERSANDFERTIG“. 

Für jedes Metafeld auf einer Produktdetailseite sollten die Schritte wiederholt werden.