Cara menampilkan metafield produk Shopify ke halaman detail produk di aplikasi mobile Anda

Catatan: Artikel ini untuk custom block lama yang menggunakan EDL, untuk custom block baru yang menggunakan react-native silakan gunakan blok codeable Product metafields sebagai referensi

Pendahuluan

Di pasar eCommerce yang kompetitif saat ini, menyediakan informasi produk yang detail dan personal sangat penting untuk meningkatkan pengalaman pelanggan. Metafields produk Shopify memungkinkan Anda menyimpan dan menampilkan data kustom seperti ukuran, material, instruksi perawatan, atau detail promosi. Dengan Evlop Mobile App Builder, Anda dapat dengan mudah mengintegrasikan metafields ini ke halaman detail produk aplikasi mobile Anda, sehingga memberikan pengalaman belanja yang lebih kaya.

Artikel ini akan memandu Anda melalui proses memuat dan menampilkan metafields produk Shopify di aplikasi mobile Anda menggunakan Evlop.

Apa Itu Metafields Produk Shopify?

Metafields produk Shopify adalah field kustom yang memungkinkan Anda menyimpan informasi tambahan tentang produk Anda. Metafields didefinisikan oleh namespace (kategori) dan key (field tertentu). Misalnya:

• Namespace: custom
• Key: text

Metafields dapat menyimpan berbagai jenis data, seperti teks, gambar, URL, atau bahkan kode QR, sehingga Anda dapat memberikan detail produk yang unik di luar atribut bawaan Shopify.

Memuat Metafields Produk ke EDL

Untuk menampilkan metafield produk Shopify di aplikasi seluler Anda, pertama-tama Anda harus memuatnya ke Extended Data Layer (EDL). Begini caranya:

1. Buka tab "Data for EDL" di dalam Custom block.
2. Klik "Add Data to Pass to EDL".
3. Pilih "Product Metafields" sebagai tipe data.
4. Tambahkan namespace dan key untuk setiap metafield yang ingin Anda muat. Contohnya:
   • namespace: custom  key: text
   • namespace: details  key: material
   • namespace: media  key: image
   • namespace: promo  key: qrcode
5. Simpan perubahan Anda.

Setelah dimuat, metafield ini dapat diakses di EDL dengan jalur seperti data.myMetafields.custom.text atau data.myMetafields.media.image.

Menampilkan Teks Menggunakan Data Metafield

Untuk menampilkan data teks dari metafield, gunakan cuplikan EDL berikut di custom block:

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

Ini secara dinamis mengambil nilai teks dari metafield dan menampilkannya di halaman detail produk.

Menampilkan Gambar Menggunakan Data Metafield

Untuk menampilkan gambar yang disimpan dalam metafield, gunakan potongan kode EDL berikut dalam blok khusus:

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

Berdasarkan ukuran tampilan yang dibutuhkan, Anda dapat menggunakan salah satu

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

Ini ideal untuk menampilkan gambar produk, petunjuk perawatan, atau visual tambahan.

Menampilkan Kode QR Menggunakan Data Metafield

Untuk menampilkan kode QR dari metafield, gunakan potongan kode EDL berikut dalam blok khusus:

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

Ini sempurna untuk promosi, diskon, atau menautkan ke informasi produk tambahan.

Kesimpulan

Dengan memuat dan menampilkan metafield produk Shopify di aplikasi seluler Anda menggunakan Evlop Mobile App Builder, Anda dapat memberikan pengalaman belanja yang lebih personal dan informatif bagi pelanggan Anda. Baik itu teks, gambar, atau kode QR, metafield memungkinkan Anda menampilkan detail produk unik yang melampaui atribut default Shopify.

Ikuti langkah‑langkah yang dijelaskan dalam artikel ini untuk mengintegrasikan metafield secara mulus ke dalam aplikasi Anda dan meningkatkan perjalanan belanja pelanggan Anda. Jika Anda memerlukan bantuan lebih lanjut, hubungi tim dukungan Evlop untuk bantuan!