# メタフィールド（リッチテキスト）を商品ページに表示させたい

**URL:** <https://community.shopify.com/t/topic/254466>\
**Category:** 技術的なQ＆A\
**Created:** [September 28, 2023, 6:45am UTC](https://community.shopify.com/t/topic/254466 "2023-09-28T06:45:28Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

商品ページにメタフィールド（リッチテキストタイプ）を使って、画像やリンクを含む商品説明文を表示しようとしている。

**現状の問題：**
- メタフィールド自体は出力できているが、リンクや画像がフロントエンドに表示されない
- Dawnテーマのmain-product.templateにコードを記述している

**提案された解決策：**
Qcoltdから、リッチテキストの内容を正しく表示するためのコード修正案が提示された。具体的には：
- `{{ product.metafields.asweq.test.value | metafield_tag }}` のように `metafield_tag` フィルターを使用する方法
- これにより太字やリンクなどの書式が正しく表示される

**注意点：**
複雑な構造の場合は提案されたコードでは対応できない可能性があるとの補足あり。

添付画像やコードスニペットが議論の理解に重要な役割を果たしている。

<div class="post-metadata">

**Author:** ![knt1](https://avatars.discourse-cdn.com/v4/letter/k/ac8455/32.png) [@knt1](https://community.shopify.com/u/knt1)\
**Post date:** [September 28, 2023, 6:45am UTC](https://community.shopify.com/t/topic/254466/1 "2023-09-28T06:45:28Z")

</div>

メタフィールドを利用して、商品説明文の入力欄を複数商品ページに用意しようと思っています。

入力欄には画像やリンクを含む文章を入力する予定であるため、メタフィールドのリッチテキストタイプを利用して実現しようと考えています。

メタフィールドを商品ページに出力することはできたのですが、リンクや画像についてはフロントに出力されませんでした。出力されたフロントの画像を添付します。

 ![スクリーンショット 2023-09-28 153852.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/7/79996edfc8ae9447da167a5cada4ac0b639d3247.png)

ちなみに、メタフィールドをフロントに出力するためのソースコードは下記です。

Dawnのmain-product.templateに記述しています

```auto
<section>
　<div>
　　{% assign data = product.metafields.asdqwe.test.value %}
　　　{% for child in data.children %}
　　　　{% if child.type == "heading" %}
　　　　　<h{{ child.level }} class="title{{ child.level }}">{{ child.children[0].value }}</h{{ child.level }}>
　　　　　{% elsif child.type == "paragraph" %}
　　　　　　<p>{{ child.children[0].value }}</p>
       {% endif %}
     {% endfor %}
　</div>
</section>

```

---

<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:** [September 28, 2023, 11:00am UTC](https://community.shopify.com/t/topic/254466/2 "2023-09-28T11:00:53Z")

</div>

@knt1 様

ご質問いただいている、リッチテキストの出力についてですが、下記画像のメタフィールドリッチテキストを利用し登録した内容を表示したいという認識で回答させて頂きます。

 ![Qcoltd_0-1695898732717.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/7/173b4d32891a2dfe4c040fbdba472aca073cd9e0.png)

記載いただいていたコードを下記のように変更いただければ、太字やリンクなども表示できるかと思います。  
複雑な構造になっている場合は、下記コードで対応できない場合もありますので、その際はご了承ください。

```markup

```

ご参考まで  
(キュー小坂)