Cómo mostrar los metafields de productos de Shopify en la página de detalles del producto de tu app móvil

Nota: Este artículo es para bloques personalizados heredados que usan EDL; para los nuevos bloques personalizados con react-native, usa los bloques programables de metafields de producto como referencia

Introducción

En el competitivo mercado del eCommerce actual, ofrecer información detallada y personalizada sobre los productos es clave para mejorar la experiencia del cliente. Los metafields de producto de Shopify te permiten almacenar y mostrar datos personalizados como talla, material, instrucciones de cuidado o detalles promocionales. Con Evlop Mobile App Builder, puedes integrar fácilmente estos metafields en la página de detalles del producto de tu app móvil y ofrecer una experiencia de compra más completa.

Este artículo te guiará paso a paso para cargar y mostrar los metafields de producto de Shopify en tu app móvil con Evlop.

¿Qué son los metafields de producto de Shopify?

Los metafields de producto de Shopify son campos personalizados que te permiten almacenar información adicional sobre tus productos. Se definen mediante un namespace (categoría) y una key (campo específico). Por ejemplo:

Namespace: custom
Key: text

Los metafields pueden almacenar varios tipos de datos, como texto, imágenes, URLs o incluso códigos QR, lo que te permite ofrecer detalles únicos sobre tus productos más allá de los atributos predeterminados de Shopify.

Cargar los metafields de producto en EDL

Para mostrar los metafields de productos de Shopify en tu app móvil, primero debes cargarlos en la Extended Data Layer (EDL). Así se hace:

Ve a la pestaña "Data for EDL" dentro del bloque personalizado.
Haz clic en "Add Data to Pass to EDL".
Selecciona "Product Metafields" como tipo de dato.
Agrega el namespace y la key de cada metafield que quieras cargar. Por ejemplo:
- namespace: custom key: text
- namespace: details key: material
- namespace: media key: image
- namespace: promo key: qrcode
Guarda los cambios.

Una vez cargados, estos metafields se pueden acceder en EDL mediante rutas como data.myMetafields.custom.text o data.myMetafields.media.image.

Mostrar texto con datos de metafields

Para mostrar datos de texto de un metafield, usa el siguiente fragmento de EDL en un bloque personalizado:

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

Esto extrae dinámicamente el valor de texto del metafield y lo muestra en la página de detalles del producto.

Mostrar una imagen con datos de metafields

Para mostrar una imagen almacenada en un metafield, usa el siguiente fragmento de EDL en un bloque personalizado:

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

Según el tamaño de visualización requerido, puedes usar una de estas opciones

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)

Es ideal para mostrar imágenes de producto, instrucciones de cuidado o elementos visuales adicionales.

Mostrar un código QR con datos de metafields

Para mostrar un código QR desde un metafield, usa el siguiente fragmento de EDL en un bloque personalizado:

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

Es perfecto para promociones, descuentos o enlaces a información adicional del producto.

Conclusión

Al cargar y mostrar los metafields de productos de Shopify en tu app móvil con Evlop Mobile App Builder, puedes ofrecer a tus clientes una experiencia de compra más personalizada e informativa. Ya sea texto, imágenes o códigos QR, los metafields te permiten destacar detalles únicos de cada producto que van más allá de los atributos predeterminados de Shopify.

Sigue los pasos descritos en este artículo para integrar los metafields sin problemas en tu app y mejorar la experiencia de compra de tus clientes. Si necesitas más ayuda, ¡contacta al equipo de soporte de Evlop!