Kenniscentrum/Aangepaste blokken/Artikel
Aangepaste blokken

Hoe je Shopify product-metafields toont op de productdetailpagina van je mobiele app

Bijgewerkt 1 september 2025

Let op: dit artikel gaat over legacy custom blocks met EDL; gebruik voor nieuwe custom blocks met react-native de Product metafields codeable blocks als referentie

Introductie

In de competitieve eCommerce-markt van vandaag is het bieden van gedetailleerde en gepersonaliseerde productinformatie cruciaal voor het verbeteren van de klantervaring. Met de product-metafields van Shopify kun je aangepaste data opslaan en weergeven, zoals maat, materiaal, onderhoudsinstructies of promotiedetails. Met Evlop Mobile App Builder integreer je deze metafields eenvoudig in de productdetailpagina van je mobiele app, voor een rijkere winkelervaring.

Dit artikel begeleidt je door het proces van het laden en weergeven van Shopify product-metafields in je mobiele app met Evlop.

Wat zijn Shopify product-metafields?

Shopify product-metafields zijn aangepaste velden waarmee je extra informatie over je producten kunt opslaan. Ze worden gedefinieerd door een namespace (categorie) en een key (specifiek veld). Bijvoorbeeld:

  • Namespace: custom
  • Key: text

Metafields kunnen verschillende soorten data opslaan, zoals tekst, afbeeldingen, URL's of zelfs QR-codes, zodat je unieke productdetails kunt bieden die verder gaan dan de standaardattributen van Shopify.

Product-metafields laden in EDL

Om Shopify product-metafields in je mobiele app weer te geven, moet je ze eerst laden in de Extended Data Layer (EDL). Zo doe je dat:

  1. Ga naar het tabblad "Data for EDL" binnen Custom block.
  2. Klik op "Add Data to Pass to EDL".
  3. Selecteer "Product Metafields" als gegevenstype.
  4. Voeg de namespace en key toe voor elke metafield die je wilt laden. Bijvoorbeeld:
    • namespace: custom  key: text
    • namespace: details  key: material
    • namespace: media  key: image
    • namespace: promo  key: qrcode
  5. Sla je wijzigingen op.

Zodra ze zijn geladen, kun je deze metafields in EDL benaderen via paden zoals data.myMetafields.custom.text of data.myMetafields.media.image.

Tekst weergeven met metafield-gegevens

Om tekstgegevens uit een metafield weer te geven, gebruik je het volgende EDL-fragment in een custom block:

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

Dit haalt dynamisch de tekstwaarde op uit de metafield en toont deze op de productdetailpagina.

Afbeelding weergeven met metafield-data

Om een afbeelding uit een metafield weer te geven, gebruik je het volgende EDL-snippet in een custom block:

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

Afhankelijk van de gewenste weergavegrootte kun je een van de volgende gebruiken

  • 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)

Dit is ideaal voor het tonen van productafbeeldingen, wasinstructies of extra visuals.

QR-code weergeven met metafield-data

Om een QR-code uit een metafield weer te geven, gebruik je het volgende EDL-snippet in een custom block:

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

Dit is perfect voor promoties, kortingen of het linken naar aanvullende productinformatie.

Conclusie

Door Shopify-productmetavelden te laden en weer te geven in je mobiele app met Evlok Mobile App Builder, kun je een persoonlijkere en informatievere winkelervaring bieden aan je klanten. Of het nu tekst, afbeeldingen of QR‑codes zijn, metavelden stellen je in staat unieke productdetails te tonen die verder gaan dan de standaardattributen van Shopify.

Volg de stappen in dit artikel om metavelden naadloos in je app te integreren en de winkelreis van je klanten te verbeteren. Heb je extra hulp nodig, neem dan contact op met het Evlok‑supportteam!