Shopifyで商品ページをカスタマイズしたい方必見！本記事では、商品ページにメモ欄を追加する方法をご紹介します。プログラミング初心者の方でも簡単に実装できるよう、ステップバイステップで解説していきます。
Shopifyとは、オンラインストアを簡単に作成・運営できるeコマースプラットフォームです。独自のテーマやアプリを使用してストアをカスタマイズすることができ、世界中で多くの事業者に利用されています。アプリやテーマ以外で実装したい機能がある場合、Shopify管理画面のコード編集の部分から独自に編集することが可能です。アプリにない部分の編集としてメモ欄の追加を今回は紹介して行きます。
※コード編集については、必ず編集する前にバックアップをとっておくようにしてください。
1. 商品ページにメモ欄を追加しよう
商品ページでの表示
この赤枠のように商品ページにメモ欄を追加していきたいと思います。
「Tell us about your trip」と書かれている部分もお好きな言葉に後で変更することが可能です。
追加した後のメモ欄は「Memo Field」というところから自由に出し入れすることが可能です。
「Memo Field」を選択したらメモ欄の題名と例文を変更することができます。
管理画面での表示
お客様が入力したメモは管理画面で確認できます
お客様ごとの注文画面から確認することが可能です。
2. 実装手順の解説
「product-template.liquid」のファイルを探してそこに指定のcssを２つコピーペーストします。
ファイル内の別々の場所にそれぞれ別のコードを追加する必要があります。
編集すべきファイルの場所とコードについて説明したあとに２つのコード内容について解説していきます。
編集するファイル
Shopify管理画面からのファイルの場所の見つけ方について解説していきます。
コードの編集箇所がわかる方はここは飛ばして「product-template.liquid」のファイルを開き次の章にお進みください
①
Shopify管理画面 >オンラインストアのテーマ
②
オンラインストアのテーマ>カスタマイズの横の点３つ>コードを編集
③
コード編集 > sections > product-template.liquid
コード1：メモ欄の表示設定
まず、メモ欄の表示内容を指定して作成する必要があるので以下のコードを追加しましょう。
{% when "@app" %} {% render block %} という項目のあとに
{% when 'memo_field' %}からはじまる以下のコードを追加してください
{% when ‘memo_field’ %} <div class=”form_bg_row”> <div class=”product-formmemo-field”> <label class=”header” for=”ProductMemo-{{ block.id }}”> {{ block.settings.memo_label }} </label> <textarea id=”ProductMemo-{{ block.id }}” name=”properties[Special Request]” class=”product-forminput product-form__memo-input” rows=”3″ placeholder=”{{ block.settings.memo_placeholder }}”></textarea> </div> </div>
コード2：メモ欄の設定項目
次にカスタマイズしたときテンプレートとしてだして手動で位置を調整できるようにしたいので、以下のコードを追加しましょう。
“blocks”: 内に以下のコードを追加してください
{
"type": "memo_field",
"name": "Memo Field",
"limit": 1,
"settings": [
{
"type": "text",
"id": "memo_label",
"label": "Memo Label",
"default": "Please tell us what interests you most (e.g., best ramen spots, things to do in Shinjuku, anime shop locations)"
},
{
"type": "text",
"id": "memo_placeholder",
"label": "Placeholder Text",
"default": "Enter your interests here..."
}
]
}
