【Shopify】商品ページに任意の補足説明欄を追加する

こんにちは。namiです。

Shopify初心者の私が、備忘録を兼ねてカスタマイズした内容を綴っていきます。
誰かのお役に立てれば嬉しいです。

今回は、商品ページに補足説明欄を作ります。
完成形はこんな感じ。

商品ページ

バリエーションごとに価格が変わってくる際に、標準だと価格しか表示することができないのですが、その内訳（料金設定の仕組み）を記載した方が親切だと思ったので、設定しました。

では、早速設定していきましょう。

１．商品メタフィールドを作成

まずは、補足説明欄を入力するためのメタフィールドを作ります。
今回は「価格の説明」というフィールド名で作成しました。

商品メタフィールド

２．該当商品にて情報を入力

補足説明を表示したい該当の商品ページを開くと、メタフィールドのセクションに１で作成したメタフィールドが表示されます。

商品ページに表示したい内容を入力して保存します。

商品ページのメタフィールド

３．テンプレートにブロックを追加

後は商品ページにメタフィールドを追加するだけです。

オンラインストア＞カスタマイズ＞２で情報を入力した商品ページ　を開きます。

左のテンプレートで「ブロックを追加」を選択し、「テキスト」を選択します。

商品ページのテーマカスタマイズ

追加したテキストのブロックを選択すると、下記のような画面が表示されます。

テキストブロックを編集

ここのテキストの右にある動的ソースを挿入のボタンをクリックし、１で作成したメタフィールド（今回は「価格の説明」）を選択します。

すると、「価格の説明」というソースが入りましたね。
後はデフォルトで入っていた「Text block」を削除します。
ちなみに、テキストスタイルを変更することで、文字サイズなども変更できるので、お好みに合わせてどうぞ。

テキストブロックの編集

最後にドラッグ&ドロップで、表示したい場所にブロックを移動させれば完成です。

ブロックの移動

ちなみに、補足説明を入力していない他の商品では、こちらのブロックは表示されませんので、ご安心ください。

ということで、今回はメタフィールドを使って、商品ページに任意の情報を表示してみました。
以上、ご参考まで。