How to display shopify product metafields into your mobile app product details page

Note: This is article is for legacy custom block using EDL, for new custom block using react-native please use the Product metafields codeable blocks as reference

Introduction

In today’s competitive eCommerce market, providing detailed and personalized product information is crucial for enhancing the customer experience. Shopify’s product metafields allow you to store and display custom data like size, material, care instructions, or promotional details. With Evlop Mobile App Builder, you can easily integrate these metafields into your mobile app’s product details page, offering a richer shopping experience.

This article will guide you through the process of loading and displaying Shopify product metafields on your mobile app using Evlop.

What Are Shopify Product Metafields?

Shopify product metafields are custom fields that allow you to store additional information about your products. They are defined by a namespace (category) and a key (specific field). For example:

• Namespace: custom
• Key: text

Metafields can store various types of data, such as text, images, URLs, or even QR codes, enabling you to provide unique product details beyond Shopify’s default attributes.

Loading Product Metafields into EDL

To display Shopify product metafields in your mobile app, you first need to load them into the Extended Data Layer (EDL). Here’s how:

1. Go to the "Data for EDL" tab inside Custom block.
2. Click "Add Data to Pass to EDL".
3. Select "Product Metafields" as the data type.
4. Add the namespace and key for each metafield you want to load. For example:
   • namespace: custom  key: text
   • namespace: details  key: material
   • namespace: media  key: image
   • namespace: promo  key: qrcode
5. Save your changes.

Once loaded, these metafields can be accessed in EDL using paths like data.myMetafields.custom.text or data.myMetafields.media.image.

Displaying Text Using Metafields Data

To display text data from a metafield, use the following EDL snippet in a custom block:

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

This dynamically pulls the text value from the metafield and displays it on the product details page.

Displaying Image Using Metafields Data

To display an image stored in a metafield, use the following EDL snippet in a custom block:

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

Based on required display size, you can use one of

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

This is ideal for showcasing product images, care instructions, or additional visuals.

Displaying QR Code Using Metafields Data

To display a QR code from a metafield, use the following EDL snippet in a custom block:

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

This is perfect for promotions, discounts, or linking to additional product information.

Conclusion

By loading and displaying Shopify product metafields in your mobile app using Evlop Mobile App Builder, you can provide a more personalized and informative shopping experience for your customers. Whether it’s text, images, or QR codes, metafields allow you to showcase unique product details that go beyond Shopify’s default attributes.

Follow the steps outlined in this article to integrate metafields seamlessly into your app and enhance your customers’ shopping journey. If you need further assistance, reach out to the Evlop support team for help!