Shopify のテーマを編集して会員登録画面のフォーム項目を増やす

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は Shopify のテーマを編集し、会員登録画面のフォーム項目を増やす方法についてまとめたいと思います。

Shopify Theme Kit の使用が前提となりますので、こちらの記事も見ていただけると幸いです。

Shopify の会員登録画面について

Shopify にはデフォルトで会員管理機能が備わっており、設定の「チェックアウト」から顧客アカウントを有効にすることでサイト側でも会員登録・ログインなどの機能を使うことができます。

Shopify デフォルトテーマ Debut の会員登録画面

会員登録画面には、デフォルトでは以下の項目のフォームが表示されています。

  • メールアドレス
  • パスワード

この項目を編集には、テーマファイルを編集することになります。

テーマファイルの編集方法

会員登録画面の編集を行うには、テーマファイル内の templates/customers/register.liquid を開き、以下の部分を編集します。今回は例としてデフォルトテーマの Debut のコードを編集しています。

{% form 'create_customer', id: formId, novalidate: 'novalidate' %}
  {% include 'form-status', form: form, form_id: formId %}

  <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
  <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

  <label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
  <input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

  ...

{% endform %}

既に入っている他のフォームを元に、以下のように追加します。

{% form 'create_customer', id: formId, novalidate: 'novalidate' %}

  ...

  <label for="{{ formId }}-Example">サンプル項目</label>
  <input type="text" name="customer[note][example]" id="{{ formId }}-Example" {% if form.example %}value="{{ form.example }}"{% endif %}>

  <label for="{{ formId }}-Example2">サンプル項目2</label>
  <input type="text" name="customer[note][example2]" id="{{ formId }}-Example2" {% if form.example2 %}value="{{ form.example2 }}"{% endif %}>

{% endform %}

注意点として、追加した input 要素の name は必ず customer[note][(項目名)] の形式とします。これは追加した項目の値は「顧客メモ」として送信される必要があるためです。

以上のように編集し、テーマのデプロイを行うと、追加した項目が表示されます。

項目を追加した状態での会員登録画面

画面側で追加したフォームのデータは、顧客管理画面の「顧客メモ」に表示されます。

顧客管理画面のキャプチャ画像

公式のドキュメントに追加できるフォームの種類がありますのでそちらもご覧ください。

まとめ

今回は Shopify の会員登録画面のフォーム項目を増やす方法についてまとめました。

管理画面とテーマを行き来して設定することなく、テーマファイルにフォームを編集するだけでフォーム追加とデータの受け渡しが簡単に行えるので、とても分かりやすく拡張しやすいと感じました。

Shopify テーマ作成の参考にしていただけたらと思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。