Centre de connaissances/Blocs personnalisés/Article
Blocs personnalisés

Comment afficher les méta-champs de produits Shopify dans la page de détails produit de votre application mobile

Mis à jour 1 septembre 2025

Remarque : cet article concerne les blocs personnalisés hérités utilisant EDL ; pour les nouveaux blocs personnalisés utilisant react-native, veuillez vous référer aux blocs codeables Product metafields

Introduction

Dans le marché eCommerce compétitif d'aujourd'hui, fournir des informations produit détaillées et personnalisées est essentiel pour améliorer l'expérience client. Les metafields produit de Shopify vous permettent de stocker et d'afficher des données personnalisées comme la taille, le matériau, les instructions d'entretien ou des détails promotionnels. Avec Evlop Mobile App Builder, vous pouvez facilement intégrer ces metafields dans la page de détails produit de votre application mobile, offrant une expérience d'achat plus riche.

Cet article vous guidera à travers le processus de chargement et d'affichage des metafields produit Shopify dans votre application mobile à l'aide d'Evlop.

Que sont les metafields produit Shopify ?

Les metafields produit Shopify sont des champs personnalisés qui vous permettent de stocker des informations supplémentaires sur vos produits. Ils sont définis par un namespace (catégorie) et une key (champ spécifique). Par exemple :

  • Namespace : custom
  • Key : text

Les metafields peuvent stocker différents types de données, comme du texte, des images, des URL ou même des codes QR, vous permettant de fournir des détails produit uniques au-delà des attributs par défaut de Shopify.

Chargement des metafields produit dans EDL

Pour afficher les méta-champs de produits Shopify dans votre application mobile, vous devez d'abord les charger dans la Extended Data Layer (EDL). Voici comment :

  1. Allez dans l'onglet « Data for EDL » du bloc personnalisé.
  2. Cliquez sur « Add Data to Pass to EDL ».
  3. Sélectionnez « Product Metafields » comme type de données.
  4. Ajoutez le namespace et la key de chaque méta-champ que vous souhaitez charger. Par exemple :
    • namespace: custom  key: text
    • namespace: details  key: material
    • namespace: media  key: image
    • namespace: promo  key: qrcode
  5. Enregistrez vos modifications.

Une fois chargés, ces méta-champs sont accessibles dans EDL via des chemins comme data.myMetafields.custom.text ou data.myMetafields.media.image.

Afficher du texte à partir des données de méta-champs

Pour afficher du texte provenant d'un méta-champ, utilisez l'extrait EDL suivant dans un bloc personnalisé :

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

Cela récupère dynamiquement la valeur texte du métachamp et l’affiche sur la page de détails du produit.

Affichage d’une image à partir des données des métachamps

Pour afficher une image stockée dans un métachamp, utilisez le fragment EDL suivant dans un bloc personnalisé :

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

Selon la taille d’affichage requise, vous pouvez utiliser l’une des

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

C’est idéal pour mettre en avant les images produit, les consignes d’entretien ou des visuels supplémentaires.

Affichage d’un QR code à partir des données des métachamps

Pour afficher un QR code provenant d’un métachamp, utilisez le fragment EDL suivant dans un bloc personnalisé :

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

C’est parfait pour les promotions, les réductions ou pour créer un lien vers des informations produit supplémentaires.

Conclusion

En chargeant et en affichant les méta-champs de produits Shopify dans votre application mobile grâce à Evlop Mobile App Builder, vous offrez à vos clients une expérience d'achat plus personnalisée et plus informative. Qu'il s'agisse de texte, d'images ou de codes QR, les méta-champs vous permettent de mettre en valeur des détails produits uniques qui vont au-delà des attributs par défaut de Shopify.

Suivez les étapes décrites dans cet article pour intégrer les méta-champs facilement dans votre application et enrichir le parcours d'achat de vos clients. Si vous avez besoin d'aide, contactez l'équipe support d'Evlop !