FROM CACHE - jp_header

商品ページで商品写真の下に商品説明文を表示させたい

商品ページで商品写真の下に商品説明文を表示させたい

あこさん
Shopify Partner
11 0 1

お世話になっております。
商品ページで商品写真の下に商品説明文を表示させたいです。
もし方法をご存じの方がいらっしゃいましたら、教えていただきたいです。
よろしくお願いいたします。

4件の返信4

株式会社おいかぜ
Shopify Partner
84 34 32

こんにちは!

 

商品ページのカスタマイズということで、下記の記事など参考になりませんでしょうか?
https://ichyaku.com/shopify-customize-product-page/

 

どのテーマを使用されているかにもよるのですが、例えばDawnの場合の商品ページですと、商品画像と説明文は横並びのレイアウトになっています。

 

スクリーンショット 2022-10-11 11.13.11.png

 

あこさん様のご希望が、左「商品画像」と右「商品情報エリア」の位置を横並びから縦並びにする、というイメージの場合ですとコードの編集が必要になってくるかと思います。

 

コードの編集を行わない方法だと

・テーマを変更する

・商品説明のテキストとして商品ページ用のメタフィールドを新規作成し、テーマの「カスタマイズ」からブロックを追加し、任意の場所に表示させる

 

などの方法が考えられます。

参考:
https://homupedia.com/shopify-customize-product-page.html

 

いかがでしょうか。
何か少しでもお力になりましたら幸いです!よろしくお願いします!

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp
あこさん
Shopify Partner
11 0 1

株式会社おいかぜ様

 

ご返答ありがとうございます。

やはりコード編集が必要ですよね・・・

 

レイアウトはそのままで、「商品画像」の下に1、2行の「テキスト」でもコード編集は必要でしょうか?

当初、株式会社おいかぜ様が教えてくださった[・商品説明のテキストとして商品ページ用のメタフィールドを新規作成し、テーマの「カスタマイズ」からブロックを追加し、任意の場所に表示させる]をと思っていたのですが、テーマのカスタマイズ上では商品画像そのものが編集できずでして(T T)

 

イメージをhtmlで表記すると
<img src="t01-01.png" alt="Tシャツ背面">
<p>Tシャツ背面</p>

なのですが・・・

※imgは商品ページの「メディア」

 

よろしくお願いいたします。

株式会社おいかぜ
Shopify Partner
84 34 32

レイアウトはそのままで、「商品画像」の下に1、2行の「テキスト」でもコード編集は必要でしょうか?

当初、株式会社おいかぜ様が教えてくださった[・商品説明のテキストとして商品ページ用のメタフィールドを新規作成し、テーマの「カスタマイズ」からブロックを追加し、任意の場所に表示させる]をと思っていたのですが、テーマのカスタマイズ上では商品画像そのものが編集できずでして(T T)

結論から言いますと、基本的にエディタで可能なカスタマイズ以上の変更となると、コードの編集が必要になるかと思います。。

 

メタフィールドを作成し、任意の場所に出力するといった作業自体は、メタフィールドの出力タグを表示させたいページのliquidファイルの該当箇所にコピペするだけの軽作業なので、初心者の方やコードの知識がそれほど無い方でも、まだ難易度は低いのかなあと思います。


参考になりそうなサイトをいくつかぶら下げておきます!

https://zenn.dev/airi/articles/fc2c9e75da2fb0

https://100webdesign.jp/services/web_knowhow/shopify-customize/web_knowhow-23574/

 

 

 

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp
あこさん
Shopify Partner
11 0 1

ご迅速なご返答、ありがとうございます。