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

**URL:** <https://community.shopify.com/t/topic/282438>\
**Category:** 技術的なQ＆A\
**Created:** [January 5, 2024, 5:22pm UTC](https://community.shopify.com/t/topic/282438 "2024-01-05T17:22:38Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

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

**基本的な表示方法:**
- Liquidタグ `{{ product.selected_variant.metafields.custom.length }}` で選択中のバリエーションのメタフィールドを出力可能
- namespace と key を適切に設定する必要がある

**技術的な課題:**
最近のShopifyテーマでは、バリエーション切り替え時にページ遷移せず、JavaScriptで再レンダリングする仕様が主流。そのため:
- Liquidタグだけでは初回表示のメタフィールド情報が表示され続ける
- 切り替え後のバリエーションのメタフィールドを表示するには、JavaScriptでバリエーション切り替えを検知し、情報を入れ替える処理が必要

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

<div class="post-metadata">

**Author:** ![noi](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@noi](https://community.shopify.com/u/noi)\
**Post date:** [January 5, 2024, 5:22pm UTC](https://community.shopify.com/t/topic/282438/1 "2024-01-05T17:22:38Z")

</div>

お世話になります。

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

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [January 8, 2024, 7:39am UTC](https://community.shopify.com/t/topic/282438/2 "2024-01-08T07:39:25Z")

</div>

@noi 様

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

namaspace: custom

key: length

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

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

```

しかし、

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

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

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

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

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

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

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

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

これを解決するには、

JavaScriptで、

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

を作る必要があります。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![noi](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@noi](https://community.shopify.com/u/noi)\
**Post date:** [January 10, 2024, 1:11pm UTC](https://community.shopify.com/t/topic/282438/3 "2024-01-10T13:11:11Z")

</div>

田辺さま

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

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

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