Centro conoscenze/Custom blocks/Articolo
Custom blocks

Come visualizzare i metafield dei prodotti shopify nella pagina dei dettagli del prodotto della tua app mobile

Aggiornato September 1, 2025

Nota: questo articolo è per il blocco personalizzato legacy che utilizza EDL; per i nuovi blocchi personalizzati con react-native usa i blocchi codificabili dei metafield di prodotto come riferimento

Introduzione

Nel mercato eCommerce competitivo di oggi, fornire informazioni dettagliate e personalizzate sui prodotti è fondamentale per migliorare l'esperienza del cliente. I metafield di prodotto di Shopify ti consentono di memorizzare e visualizzare dati personalizzati come taglia, materiale, istruzioni per la cura o dettagli promozionali. Con Evlop Mobile App Builder, puoi integrare facilmente questi metafield nella pagina dei dettagli prodotto della tua app mobile, offrendo un'esperienza di acquisto più ricca.

Questo articolo ti guiderà passo passo nel caricare e visualizzare i metafield di prodotto di Shopify nella tua app mobile usando Evlop.

Cosa sono i metafield di prodotto di Shopify?

I metafield di prodotto di Shopify sono campi personalizzati che ti permettono di memorizzare informazioni aggiuntive sui tuoi prodotti. Sono definiti da un namespace (categoria) e da una key (campo specifico). Per esempio:

  • Namespace: custom
  • Key: text

I metafield possono contenere vari tipi di dati, come testo, immagini, URL o anche codici QR, consentendoti di fornire dettagli unici sul prodotto oltre gli attributi predefiniti di Shopify.

Caricamento dei metafield di prodotto in EDL

Per mostrare i metafield dei prodotti Shopify nella tua app mobile, devi prima caricarli nell'Extended Data Layer (EDL). Ecco come:

  1. Vai alla scheda "Data for EDL" all'interno del Custom block.
  2. Clicca su "Add Data to Pass to EDL".
  3. Seleziona "Product Metafields" come tipo di dati.
  4. Aggiungi namespace e key per ogni metafield che vuoi caricare. Ad esempio:
    • namespace: custom  key: text
    • namespace: details  key: material
    • namespace: media  key: image
    • namespace: promo  key: qrcode
  5. Salva le modifiche.

Una volta caricati, questi metafield sono accessibili in EDL tramite percorsi come data.myMetafields.custom.text o data.myMetafields.media.image.

Mostrare testo con i dati dei metafield

Per mostrare dati testuali di un metafield, usa questo snippet EDL in un custom block:

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

Questo estrae dinamicamente il valore di testo dal metafield e lo visualizza nella pagina dei dettagli prodotto.

Visualizzare l'immagine usando i dati dei Metafield

Per visualizzare un'immagine memorizzata in un metafield, usa lo snippet EDL seguente in un blocco personalizzato:

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

In base alla dimensione di visualizzazione richiesta, puoi usare una delle seguenti

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

È ideale per mostrare immagini del prodotto, istruzioni di cura o visuali aggiuntive.

Visualizzare il QR Code usando i dati dei Metafield

Per visualizzare un QR code da un metafield, usa lo snippet EDL seguente in un blocco personalizzato:

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

È perfetto per promozioni, sconti o per collegare informazioni aggiuntive sul prodotto.

Conclusione

Caricando e visualizzando i metafield dei prodotti Shopify nella tua app mobile con Evlop Mobile App Builder, puoi offrire un'esperienza di acquisto più personalizzata e informativa per i tuoi clienti. Che siano testo, immagini o codici QR, i metafield ti permettono di mostrare dettagli unici del prodotto che vanno oltre gli attributi predefiniti di Shopify.

Segui i passaggi descritti in questo articolo per integrare i metafield senza problemi nella tua app e migliorare il percorso d'acquisto dei tuoi clienti. Se hai bisogno di ulteriore assistenza, contatta il team di supporto di Evlop per aiuto!