Shopify会員登録画面で独自の入力フィールドを設置する方法

ECサイトでは顧客に会員登録を求めることがほとんどかと思います。一般的に会員登録時に入力する情報は「氏名」、「メールアドレス」、「パスワード」になリます。しかし、業種によってはアレルギーの有無を聞く必要があったり、キャンペーン用で生年月日も取得したいなどの要望も出てくるかと思います。

この記事では独自の入力フィールドをShopifyで設置する方法について紹介したいと思います。

入力フィールドの設置箇所

会員登録で使用されているフォームテンプレートをShopifyテーマの中から探します。通常、次のファイルに記述されているはずです。

customers/register.liquid

register.liquid テンプレートを展開して以下のフォームタグが利用されている箇所を探してください。以降紹介するコードはこのフォームタグの中に記述してください。

{% form 'create_customer' %}
<!-- 中略 -->
{% endform %}

入力フィールドの設置例

「氏名」、「メールアドレス」、「パスワード」は以下のように標準で取得可能なフィールドが用意されています。

上記以外に独自の情報を取得したい場合は name 属性に以下のような指定をします。

customer[note][取得する項目名]

独自に設定した情報はShopify顧客管理画面の「お客様に関するメモ」へ格納されます。

【日付の取得】
生年月日を取得したい場合などでは次のような記述で値を取得することができます。ただし、<input type=“date”> で指定する場合はブウラザによってUIが大きく異なる為注意が必要です。

ここでは深く扱いませんが、デートピッカーがそもそも非対応のブラウザもありますので別途対応が必要になります。

以下はデートピッカーで「誕生日」を取得する例になります。

<label for="birthday" class="label">お誕生日</label>
<input type="date" value="" name="customer[note][誕生日]" id="birthday">

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/date

【ラジオボタンでの取得】
以下はラジオボタンで「性別」を取得する例になります。

<div class="field-radio">  
  <label for="gender" class="label">性別</label>
  <input type="radio" value="男性" name="customer[note][性別]"     id="gender">男性  
  <input type="radio" value="女性" name="customer[note][性別]" id="gender">女性
</div>

【セレクトボックスでの取得】
以下はセレクトボックスで「好みの色」を取得する例になります。

<label for="color" class="label">好きな色を選んでください</label>
<select id="color" name="customer[note][好きな色]">  
  <option>青</option>  
  <option>赤</option>  
  <option>黄色</option>  
  <option>緑</option>  
  <option>紫</option>  
  <option>黒</option>  
  <option>灰色</option>  
  <option>その他</option>
</select>

【チェックボックスでの取得】
以下はチェックボックスで「インタビューの可否」を取得する例になります。

<div class="field-checkbox">  
  <label for="interview" class="label">インタビューをさせて頂いてもよろしいでしょうか？</label>  
  <input type="checkbox" value="可能" name="customer[note][インタビュー可否]" id="interview"> インタビュー可能
</div>

【テキストの取得】
以下はテキスト入力で「スタッフへのコメント」を取得する例になります。

<label for="comment" class="label--hidden">スタッフへのコメント</label><input type="text" name="customer[note][コメント]" id="comment" placeholder="スタッフへのコメント">

以上のサンプルを表示させたプレビューが以下になります。

実際に入力をして会員登録を行なってみてください。登録された情報はShopify管理画面の「顧客管理」から確認することができます。以下のように独自で入れたフィールドの内容が取得されているはずです。

まとめ

Shopifyでは独自の入力フィールドを設けることで様々な顧客情報を取得することができます。ビジネスの内容に応じて活用してみてください。

Add fields to the customer registration form

customers/register.liquid

Managing customers