# 商品ページに商品説明を表示させたい

**URL:** <https://community.shopify.com/t/topic/201786>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [March 22, 2023, 8:47am UTC](https://community.shopify.com/t/topic/201786 "2023-03-22T08:47:49Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Dawnテーマを使用している商品ページで、オプション選択時にそのオプションの説明文を表示させる方法についての質問です。

**解決方法:**

1. **メタフィールドの作成** - バリエーション用の説明文メタフィールドを作成(ネームスペースとキーは任意)

2. **カスタムLiquidブロックの追加** - テーマカスタマイズ画面で「デフォルトの商品」を選択し、商品情報内に「カスタムLiquid」ブロックを追加して表示位置を調整

3. **コードの実装** - 提供されたLiquidコードをカスタムLiquidブロックに追加。コード内の「custom.optiontext」部分を作成したメタフィールドのネームスペースとキーに変更

4. **説明文の登録** - 各バリエーション商品のメタフィールドに説明文を追加

オプション選択時に対応する説明文が自動的に表示されるようになります。画像付きで手順が詳しく説明されています。

<div class="post-metadata">

**Author:** ![mira0](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@mira0](https://community.shopify.com/u/mira0)\
**Post date:** [March 22, 2023, 8:47am UTC](https://community.shopify.com/t/topic/201786/1 "2023-03-22T08:47:49Z")

</div>

テーマはDawnを使用しています。商品ページで、商品のオプションを選択した際に、そのオプションの説明文を表示させたいです。方法などあれば教えていただきたいです。

---

<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:** [March 24, 2023, 10:54am UTC](https://community.shopify.com/t/topic/201786/2 "2023-03-24T10:54:58Z")

</div>

ご質問いただいている、オプションの説明文についてですが、

商品のバリエーションで登録した各商品の説明文を表示したいという認識で回答させていただきます。

**設定方法**

**1.**

説明文用にバリエーションのメタフィールドを作成してください。

 ![Qcoltd_0-1679655162228.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/8/892588ce27bacd93de2a8b0b72f55db193c9b575.png)

ネームスペースとキーは任意のモノに変更してください。

**2.**

管理画面でテーマのカスタマイズ \> デフォルトの商品を選んでいただき、

左メニューの商品情報内にあるブロックを追加をクリックし「カスタムLiquid」を追加し

表示したい位置に順番を変更してください。

 ![Qcoltd_1-1679655162223.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/e/e/f/eef3201022fe471dfdd86708863f6ece4a0f42a6.png)

**3.**

カスタムLiquidの入力欄に下記コードを追加し、保存するボタンをクリックしてください。

コード内に2箇所ある「variant.metafields.custom.optiontext.value」の「custom.optiontext」は1で作成したメタフィールドのネームスペースとキーに変更してください。

 ![Qcoltd_2-1679655162165.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/c/ac4981d1c0b43b8128cb8d980df98e5b10bf2785.png)

```markup

{%- assign nowVariantId = product.selected_or_first_available_variant.id -%}
{%- for variant in product.variants -%}
    {% if variant.id == nowVariantId %}
      {%- assign optionText = variant.metafields.custom.optiontext.value | newline_to_br -%}
    {% endif %}
{%- endfor -%}

  {{ optionText }}

```

**4.**

各バリエーション商品でメタフィールドに説明文を追加してください。

 ![Qcoltd_3-1679655162195.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/6/061f9741c6f8e334ee82fb6fb67b4c116dc3092f.png)

以上で、下記画像のオプションを選択した際、下記赤枠のテキストが変更されます。

 ![Qcoltd_4-1679655162172.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/2/264e66bb41d50ed959d3e261e2ab7573e1f9537f.png)

ご参考まで。

(キュー小坂)