メタフィールドのバリエーションの表示

日本語 ディスカッション 技術的なQ＆A

Topic summary

商品バリエーションに追加したメタフィールド（サイズ別の重量や大きさなど）を表示する方法についての質問。

基本的な表示方法:

  • Liquidタグ {{ product.selected_variant.metafields.custom.length }} で選択中のバリエーションのメタフィールドを出力可能
  • namespace と key を適切に設定する必要がある

技術的な課題:
最近のShopifyテーマでは、バリエーション切り替え時にページ遷移せず、JavaScriptで再レンダリングする仕様が主流。そのため:

  • Liquidタグだけでは初回表示のメタフィールド情報が表示され続ける
  • 切り替え後のバリエーションのメタフィールドを表示するには、JavaScriptでバリエーション切り替えを検知し、情報を入れ替える処理が必要

現状:
質問者はJavaScriptでの実装が難しいと感じており、解決には至っていない状態。

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

お世話になります。

既出の問題かもしれませんが、解決に至らなかったため質問させていただきます。

バリエーションにメタフィールドを追加することができますが、その表示はどのように行うことができるのでしょうか？

サイズのバリエーションがS、M、Lとあり、サイズによって重さ（g）や大きさ（cm）のメタフィールドを作成しています。それらをバリエーションに合わせて表示することができますでしょうか？

2

@noi 様

例えば、大きさ(cm)のメタフィールドを下記のように設定したとします。

namaspace: custom

key: length

この時、選択中のバリエーションの大きさのメタフィールドを出力するには、下記のようにします。

{{ product.selected_variant.metafields.custom.length }}

しかし、

Shopifyの最近のテーマは、商品詳細ページで、バリエーションを切り替えた際に、

そのバリエーションのページに遷移するのではなく、

JavaScriptでレンダリングし直すのが主流になっています。

そのため、上記のliquidタグを記載しただけでは、

バリエーションを切り替えた際に、

切り替え先のバリエーションのメタフィールドの情報は表示されす、

最初にランディングした際のバリエーションのメタフィールドの情報が表示され続けます。

(バリエーションを切り替えた後、再読み込みをすれば、切り替え先のバリエーションのメタフィールドの情報が表示されます。)

これを解決するには、

JavaScriptで、

「バリエーション切り替えを検知し、切り替え先のバリエーションの情報に入れ替える」処理、

を作る必要があります。

ご参考まで。

(キュー田辺)

3

田辺さま

JavaScriptが必要になるとのことありがとうございます。

残念ながらノーコードでは難しそうですね。

お忙しい中、ご回答ありがとうございます。

1 Like