お世話になっております。
商品ページで商品写真の下に商品説明文を表示させたいです。
もし方法をご存じの方がいらっしゃいましたら、教えていただきたいです。
よろしくお願いいたします。
Topic summary
商品ページの「商品画像」の下に説明テキストを表示したいという要望。現状（例：Dawnテーマ）は画像と商品情報が横並びで、画像下へ任意テキストを入れるのはテーマエディタ（ノーコード）だけでは難しい。
提案・選択肢:
- ノーコード寄り: テーマを変更する／商品用メタフィールドを作成しブロックで表示。ただしエディタでは画像（メディア）領域の直下に差し込めない場合が多い。
- コード編集: 作成したメタフィールドの出力タグを該当のproductテンプレート（.liquid）のメディア出力部分直下に貼り付けて表示。初心者でも比較的容易な軽作業とされる。
補足用語:
- メタフィールド: 商品に任意の追加情報を持たせるカスタム項目。
- Liquid: Shopifyのテンプレート言語で、テーマの表示位置や内容を制御。
質問への回答要旨: 1～2行の短文でも、画像直下に置く場合は基本コード編集が必要（テーマが対応していない限り）。
進捗・結論: 参考リンクが提示され、実装方針（Liquidでメタフィールドを画像直下に出力）が示されたが、実装完了報告はなく議論は実質未解決。
こんにちは！
商品ページのカスタマイズということで、下記の記事など参考になりませんでしょうか？
https://ichyaku.com/shopify-customize-product-page/
どのテーマを使用されているかにもよるのですが、例えばDawnの場合の商品ページですと、商品画像と説明文は横並びのレイアウトになっています。
あこさん様のご希望が、左「商品画像」と右「商品情報エリア」の位置を横並びから縦並びにする、というイメージの場合ですとコードの編集が必要になってくるかと思います。
コードの編集を行わない方法だと
・テーマを変更する
・商品説明のテキストとして商品ページ用のメタフィールドを新規作成し、テーマの「カスタマイズ」からブロックを追加し、任意の場所に表示させる
などの方法が考えられます。
参考：
https://homupedia.com/shopify-customize-product-page.html
いかがでしょうか。
何か少しでもお力になりましたら幸いです！よろしくお願いします！
株式会社おいかぜ様
ご返答ありがとうございます。
やはりコード編集が必要ですよね・・・
レイアウトはそのままで、「商品画像」の下に1、2行の「テキスト」でもコード編集は必要でしょうか？
当初、株式会社おいかぜ様が教えてくださった［・商品説明のテキストとして商品ページ用のメタフィールドを新規作成し、テーマの「カスタマイズ」からブロックを追加し、任意の場所に表示させる］をと思っていたのですが、テーマのカスタマイズ上では商品画像そのものが編集できずでして(T T)
イメージをhtmlで表記すると
Tシャツ背面
なのですが・・・
※imgは商品ページの「メディア」
よろしくお願いいたします。
レイアウトはそのままで、「商品画像」の下に1、2行の「テキスト」でもコード編集は必要でしょうか？> > 当初、株式会社おいかぜ様が教えてくださった［・商品説明のテキストとして商品ページ用のメタフィールドを新規作成し、テーマの「カスタマイズ」からブロックを追加し、任意の場所に表示させる］をと思っていたのですが、テーマのカスタマイズ上では商品画像そのものが編集できずでして(T T)
結論から言いますと、基本的にエディタで可能なカスタマイズ以上の変更となると、コードの編集が必要になるかと思います。。
メタフィールドを作成し、任意の場所に出力するといった作業自体は、メタフィールドの出力タグを表示させたいページのliquidファイルの該当箇所にコピペするだけの軽作業なので、初心者の方やコードの知識がそれほど無い方でも、まだ難易度は低いのかなあと思います。
参考になりそうなサイトをいくつかぶら下げておきます！
https://zenn.dev/airi/articles/fc2c9e75da2fb0
https://100webdesign.jp/services/web_knowhow/shopify-customize/web_knowhow-23574/
1 Like
ご迅速なご返答、ありがとうございます。