So zeigst du Shopify-Produkt-Metafelder auf der Produktdetailseite deiner Mobile App an

Hinweis: Dieser Artikel bezieht sich auf Legacy-Custom-Blocks mit EDL. Für neue Custom-Blocks mit react-native nutze bitte die Product-metafields-Codeable-Blocks als Referenz

Einführung

In dem heutigen wettbewerbsintensiven eCommerce-Markt sind detaillierte und personalisierte Produktinformationen entscheidend für ein besseres Kundenerlebnis. Mit Shopifys Produkt-Metafields kannst du benutzerdefinierte Daten wie Größe, Material, Pflegehinweise oder Promodetails speichern und anzeigen. Mit Evlop Mobile App Builder bindest du diese Metafields ganz einfach in die Produktdetailseite deiner Mobile App ein – für ein noch besseres Shoppingerlebnis.

Dieser Artikel zeigt dir Schritt für Schritt, wie du Shopify-Produkt-Metafields mit Evlop in deiner Mobile App lädst und anzeigst.

Was sind Shopify-Produkt-Metafields?

Shopify-Produkt-Metafields sind benutzerdefinierte Felder, mit denen du zusätzliche Informationen zu deinen Produkten speichern kannst. Sie werden durch einen Namespace (Kategorie) und einen Key (konkretes Feld) definiert. Zum Beispiel:

• Namespace: custom
• Key: text

Metafields können verschiedene Datentypen speichern, z. B. Text, Bilder, URLs oder sogar QR-Codes – so kannst du einzigartige Produktdetails bereitstellen, die über Shopifys Standardattribute hinausgehen.

Produkt-Metafields in EDL laden

Um Shopify-Produkt-Metafields in deiner Mobile App anzuzeigen, musst du sie zuerst in die Extended Data Layer (EDL) laden. So geht's:

1. Öffne den Tab "Data for EDL" im Custom block.
2. Klicke auf "Add Data to Pass to EDL".
3. Wähle "Product Metafields" als Datentyp.
4. Füge für jedes Metafield, das du laden möchtest, namespace und key hinzu. Zum Beispiel:
   • namespace: custom  key: text
   • namespace: details  key: material
   • namespace: media  key: image
   • namespace: promo  key: qrcode
5. Speichere deine Änderungen.

Sobald sie geladen sind, kannst du in EDL auf diese Metafields über Pfade wie data.myMetafields.custom.text oder data.myMetafields.media.image zugreifen.

Text mit Metafield-Daten anzeigen

Um Textdaten aus einem Metafield anzuzeigen, verwende den folgenden EDL-Snippet in einem Custom block:

<Box>
  <Text>Custom Text: {data.productMetafields.custom.text}</Text>
</Box>

Dieser Wert wird dynamisch aus dem Metafield gezogen und auf der Produktdetailseite angezeigt.

Bild mit Metafield-Daten anzeigen

Um ein Bild aus einem Metafield anzuzeigen, verwende den folgenden EDL-Schnipsel in einem Custom Block:

<Box>
  <Image src={data.productMetafields.media.image.small} />
</Box>

Je nach benötigter Anzeigegröße kannst du eine der folgenden Varianten verwenden

• data.productMetafields.media.image.small(maxWidth: 240px, maxHeight: 240px)
• data.productMetafields.media.image.medium(maxWidth: 480, maxHeight: 480)
• data.productMetafields.media.image.large(maxWidth: 960px, maxHeight: 960px)

Ideal, um Produktbilder, Pflegehinweise oder weitere Visuals zu präsentieren.

QR-Code mit Metafield-Daten anzeigen

Um einen QR-Code aus einem Metafield anzuzeigen, verwende den folgenden EDL-Schnipsel in einem Custom Block:

<Box>
  <QRCode value={data.productMetafields.promo.qrcode} />
</Box>

Perfekt für Aktionen, Rabatte oder Links zu weiteren Produktinformationen.

Fazit

Durch das Laden und Anzeigen von Shopify-Produkt-Metafeldern in deiner mobilen App mit Evlop Mobile App Builder kannst du deinen Kunden ein persönlicheres und informativeres Einkaufserlebnis bieten. Ob Text, Bilder oder QR-Codes – mit Metafeldern kannst du einzigartige Produktdetails präsentieren, die über die Standardattribute von Shopify hinausgehen.

Befolge die Schritte in diesem Artikel, um Metafelder nahtlos in deine App zu integrieren und das Einkaufserlebnis deiner Kunden zu verbessern. Wenn du weitere Unterstützung brauchst, wende dich an das Evlop-Support-Team!