# 商品ページに画像とテキストを追加できるメタフィールドを追加する方法

**URL:** <https://community.shopify.com/t/topic/330088>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [June 9, 2024, 7:19am UTC](https://community.shopify.com/t/topic/330088 "2024-06-09T07:19:07Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

Dawnテーマを使用している質問者が、商品ページの下部に「説明」欄と同じ機能（テキストと画像を同時に追加可能）を実装したいと相談。

**試した方法:**
- メタフィールドで画像とテキストを個別に追加することは可能だったが、同一編集欄内での統合ができなかった
- リッチテキストでは画像追加メニューが表示されず、HTMLタグで画像を挿入しても表示されなかった

**提案された解決策:**
Takase_Rから、メタフィールドの「複数行のテキスト」を使用し、画像のHTMLタグを直接記述する方法が提案された。リッチテキストほど簡単ではないが、h2、h3、pタグなどのCSSを事前に設定しておけば調整は比較的容易とのこと。

**結果:**
質問者は自己解決し、別の方法で対応したが、提案された方法は今後の参考にするとコメント。具体的な解決方法の詳細は共有されていない。

<div class="post-metadata">

**Author:** ![nishi-ec](https://avatars.discourse-cdn.com/v4/letter/n/f6c823/32.png) [@nishi-ec](https://community.shopify.com/u/nishi-ec)\
**Post date:** [June 9, 2024, 7:19am UTC](https://community.shopify.com/t/topic/330088/1 "2024-06-09T07:19:07Z")

</div>

Dawnテーマを利用しています。

商品ページデフォルトの「説明」欄と同じ機能（テキスト追加・画像追加可能）を、商品ページの下部にもう一か所追加したいです。

メタフィールドを利用して実現できないか試してみましたが、画像とテキストをそれぞれ個別に追加はできますが、画像とテキストを同じ編集欄内で追加する方法にはたどり着けませんでした。

リッチテキストでは画像を追加するメニューが表示されず、html入力で画像表示を試みましたが、htmlの記述がそのまま出力されて画像表示ができませんでした。

商品ページ編集画面のデフォルトの「説明」欄と同じ機能を複製できればベストですので、メタフィールドを利用しない方法でも問題ありません。

もしお気づきの点があればご助言いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![nishi-ec](https://avatars.discourse-cdn.com/v4/letter/n/f6c823/32.png) [@nishi-ec](https://community.shopify.com/u/nishi-ec)\
**Post date:** [June 11, 2024, 3:18am UTC](https://community.shopify.com/t/topic/330088/2 "2024-06-11T03:18:37Z")

</div>

自己解決しました。

---

<div class="post-metadata">

**Author:** ![Takase\_R](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/takase_r/32/295219_2.png) [@Takase\_R](https://community.shopify.com/u/Takase_R)\
**Post date:** [June 11, 2024, 3:27am UTC](https://community.shopify.com/t/topic/330088/3 "2024-06-11T03:27:19Z")

</div>

はじめまして、Takaseと申します。

メタフィールドの「複数行のテキスト」であれば、画像のhtmlタグも使うことができるかと思います。

その分テキストの調整がリッチテキストのように簡単にはできませんが、ある程度型が決まっているのであれば事前にcssをh2,h3,pタグなどそれぞれにあてておけばある程度は楽に調整もできます。

ご参考までに。

---

<div class="post-metadata">

**Author:** ![nishi-ec](https://avatars.discourse-cdn.com/v4/letter/n/f6c823/32.png) [@nishi-ec](https://community.shopify.com/u/nishi-ec)\
**Post date:** [June 11, 2024, 6:19am UTC](https://community.shopify.com/t/topic/330088/4 "2024-06-11T06:19:31Z")

</div>

コメントありがとうございます。

今回は別の方法で対応してしまったのですが、今後参考にさせていただきます。
