ナレッジセンター/カスタムブロック/記事
カスタムブロック

Shopify の商品メタフィールドをモバイルアプリの商品詳細ページに表示する方法

更新日 2025年9月1日

注：この記事は EDL を使用したレガシーカスタムブロック向けです。新しいカスタムブロック（react-native）をご利用の場合は、Product metafields の codeable blocks を参照してください。

導入

競争が激しい eコマース市場において、詳細かつパーソナライズされた商品情報の提供は、顧客体験を向上させるために不可欠です。Shopify の商品メタフィールドを使えば、サイズ、素材、ケア方法、プロモーション情報などのカスタムデータを保存・表示できます。Evlop Mobile App Builder を利用すれば、これらのメタフィールドをモバイルアプリの商品の詳細ページに簡単に組み込み、よりリッチなショッピング体験を提供できます。

本記事では、Evlop を使用して Shopify 商品メタフィールドをモバイルアプリに読み込み、表示する手順をご案内します。

Shopify 商品メタフィールドとは？

Shopify 商品メタフィールドは、商品に関する追加情報を保存できるカスタムフィールドです。名前空間（カテゴリ）とキー（具体的な項目）で定義されます。例：

  • 名前空間：custom
  • キー：text

メタフィールドはテキスト、画像、URL、QR コードなど様々なデータタイプを保存でき、Shopify の標準属性を超える独自の商品詳細を提供できます。

EDL への商品メタフィールドの読み込み

モバイルアプリにShopifyの商品メタフィールドを表示するには、まずExtended Data Layer（EDL）に読み込む必要があります。手順は以下の通りです：

  1. カスタムブロック内の「Data for EDL」タブに移動します。
  2. 「Add Data to Pass to EDL」をクリックします。
  3. データタイプとして「Product Metafields」を選択します。
  4. 読み込みたい各メタフィールドのnamespaceとkeyを追加します。例：
    • namespace: custom  key: text
    • namespace: details  key: material
    • namespace: media  key: image
    • namespace: promo  key: qrcode
  5. 変更を保存します。

読み込みが完了すると、これらのメタフィールドにはdata.myMetafields.custom.textやdata.myMetafields.media.imageのようなパスでEDL内からアクセスできます。

メタフィールドデータでテキストを表示する

メタフィールドのテキストデータを表示するには、カスタムブロックで以下のEDLスニペットを使用します：

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

メタフィールドのテキスト値を動的に取得し、商品詳細ページに表示します。

メタフィールドデータで画像を表示する

メタフィールドに保存された画像を表示するには、カスタムブロックで以下のEDLスニペットを使用します。

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

必要な表示サイズに応じて、以下のいずれかを使用できます

  • data.productMetafields.media.image.small(最大幅: 240px、最大高さ: 240px)
  • data.productMetafields.media.image.medium(最大幅: 480、最大高さ: 480)
  • data.productMetafields.media.image.large(最大幅: 960px、最大高さ: 960px)

商品画像、お手入れ方法、追加のビジュアルの表示に最適です。

メタフィールドデータでQRコードを表示する

メタフィールドのQRコードを表示するには、カスタムブロックで以下のEDLスニペットを使用します。

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

プロモーション、割引、商品の追加情報へのリンクにぴったりです。

まとめ

Evlop Mobile App BuilderでShopify商品メタフィールドを読み込み表示することで、顧客によりパーソナライズされた情報豊富なショッピング体験を提供できます。テキスト、画像、QRコードなど、メタフィールドを使えばShopifyの標準属性を超えるユニークな商品情報を紹介できます。

この記事の手順に従ってメタフィールドをアプリにシームレスに統合し、顧客の購買体験を向上させましょう。さらにサポートが必要な場合は、Evlopサポートチームまでお問い合わせください！