【商品ページのカスタマイズ】目標 | SkillhubAI(スキルハブエーアイ)

【商品ページのカスタマイズ】目標

file

今回の目標

今回の目標は「商品ページで説明部分を広く取る」です。 ShopifyでECサイトを制作していると「商品説明を作り込みたいのに、幅が狭くて見にくい」と感じることもあります。 商品ページの下部に詳細説明を載せられるよう、カスタマイズしてみましょう。

合わせて、税込表示設定、メタフィールドの定義など、商品ページのカスタマイズでよく使う管理画面からの設定も行っていきます。

以下のことができるようになります。

  • 税込表示の設定
  • 商品登録・表示にメタフィールドを活用できる
  • 選択肢タイプのメタフィールドを設定できる
  • テーマカスタマイズ(コード編集)の基本がわかる

カスタマイズ内容の詳細

今回のカスタマイズでは、商品ページで下図の4箇所を変更します。

file

特に、PCモニターだと横幅が狭い“商品説明”部分の変更が大きいです。 Amazonなどのモールや、自社ECサイトでよく見られる、下図のような画像も使って作り込んだ商品説明。こういったものを見やすく表示できるよう、変更しましょう。

https://amzn.asia/d/enOY4E5

出典:https://amzn.asia/d/enOY4E5

今回の手順は、お客様の要望からのテーマカスタマイズを想定しています。
商品登録を含めたECサイト構築を請け負った場合は、指定された商品情報を登録する。テーマ開発のみに力を注ぐ場合は、プラグインなどで一気に済ませる。など状況によって方法や順序は異なります。

状況に応じて、ベストな方法を使用してください。