# Shopifyの会員登録画面で独自の入力フィールドを設置する方法【誕生日と会員番号】

**URL:** <https://community.shopify.com/t/shopify/21215>\
**Category:** 技術的なQ＆A\
**Created:** [September 23, 2020, 12:54am UTC](https://community.shopify.com/t/shopify/21215 "2020-09-23T00:54:05Z")\
**Posts on this page:** 9\
**Page:** 1

## AI-generated summary

Shopifyの会員登録画面に、誕生日と会員番号の独自入力欄を追加する方法が主題です。Prestigeテーマの`customers/register.liquid`に`{%- endform -%}`直前でコードを挿入しても表示されない、という相談から始まりました。

- 回答では、同じ位置に貼り付ければ表示されることを確認済みとされ、表示先はログイン画面ではなく「create one」リンク先の登録画面である点、ボタンコードの重複やブラウザコンソールのエラー確認が案内されました。
- その後、質問者は無事に設置できたと報告しています。

続いて、追加した項目を左揃えにしたいという質問が出ました。既存フォームと同じ`div`構造や`class`を付ければ整列できるとコード例つきで示され、これも解決済みです。

最新の論点は誕生日入力UIです。`<input type="date">`はiOSでは問題ない一方、Androidではカレンダー操作が不便で、60歳前後の入力に手間がかかると指摘されました。回答では、これはShopify固有ではなくHTMLの`date`入力の仕様差であり、ブラウザ・端末依存があるため、jQuery等のライブラリを使った日付ピッカー導入が推奨されています。議論は実装方針の提案段階で、最終的なAndroid対応は未確認です。

<div class="post-metadata">

**Author:** ![YokoOyama](https://avatars.discourse-cdn.com/v4/letter/y/f6c823/32.png) [@YokoOyama](https://community.shopify.com/u/YokoOyama)\
**Post date:** [September 23, 2020, 12:54am UTC](https://community.shopify.com/t/shopify/21215/1 "2020-09-23T00:54:05Z")

</div>

Shopifyの会員登録画面で誕生日と会員番号の入力フィールドを設置したいのですが、

**テンプレートはプレステージを使用し、コード編集画面にてcustomers/register.liquid** を開き、  
{%- endform -%}

のすぐ上に下記のコードを入力いたしましたが、会員登録の画面にて表示がされません。

原因が不明のため、設置方法に誤りがあるのかを教えていたｄ

お誕生日

顧客番号

{{ ‘customer.register.submit’ | t }}

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [September 23, 2020, 2:45pm UTC](https://community.shopify.com/t/shopify/21215/2 "2020-09-23T14:45:07Z")

</div>

共有いただいたコードをそのままprestageの同じ場所に貼り付けて、プレビューしてみましたが、添付のようにちゃんと表示されています。

 ![Screen Shot 2020-09-23 at 11.37.56 PM.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/c/1c7d1c36c856332d703535e409084df2f36e030f.png)

 ![Screen Shot 2020-09-23 at 11.38.33 PM.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/8/e87d7907e7d206394cdf91daf28bc8f8b4c95261.png)

なぜでしょうね・・・

共有いただいた最後のボタンのコードは元々あるもので、\<% end form%\> の直前に２つのコードを挿入する場合、コードはボタンの下になります（配置は関係ないと思いますが。。）

あとは、ボタンコードを２つ貼り付けていたりしていませんでしょうか？

なお、表示されるのはログイン画面ではなくて、create oneのリンク先です。

ブラウザコンソールで何かエラーが出ていないかもチェックしてみてください。

---

<div class="post-metadata">

**Author:** ![Anonymous\_837d6cae64a677534907c6b1c36facbb](https://avatars.discourse-cdn.com/v4/letter/a/a4c791/32.png) [@Anonymous\_837d6cae64a677534907c6b1c36facbb](https://community.shopify.com/u/Anonymous_837d6cae64a677534907c6b1c36facbb)\
**Post date:** [September 28, 2020, 9:46am UTC](https://community.shopify.com/t/shopify/21215/3 "2020-09-28T09:46:16Z")

</div>

ご回答ありがとうございました。

設置することができました！！

---

<div class="post-metadata">

**Author:** ![Anonymous\_837d6cae64a677534907c6b1c36facbb](https://avatars.discourse-cdn.com/v4/letter/a/a4c791/32.png) [@Anonymous\_837d6cae64a677534907c6b1c36facbb](https://community.shopify.com/u/Anonymous_837d6cae64a677534907c6b1c36facbb)\
**Post date:** [September 28, 2020, 2:58pm UTC](https://community.shopify.com/t/shopify/21215/4 "2020-09-28T14:58:59Z")

</div>

度々すみません。

お誕生日と顧客番号の配置を左に揃えるにはどうしたら良いでしょうか？

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [September 28, 2020, 11:58pm UTC](https://community.shopify.com/t/shopify/21215/5 "2020-09-28T23:58:47Z")

</div>

その上に元々あるdivと、classを同じように追加すると添付のようになります。（buttonの上に移動すれば、登録ボタンの上に表示されます）。

```markup

          
　　　　　
           
　　　　　　
        

      
      
        
           　　　　
　　　　   
           
　　　　    
        

        
      
      
      {%- endform -%}

```

 ![Screen Shot 2020-09-29 at 8.56.15 AM.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/3/13bf27232b2cb0d4edb26873d717079a9c01d072.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_837d6cae64a677534907c6b1c36facbb](https://avatars.discourse-cdn.com/v4/letter/a/a4c791/32.png) [@Anonymous\_837d6cae64a677534907c6b1c36facbb](https://community.shopify.com/u/Anonymous_837d6cae64a677534907c6b1c36facbb)\
**Post date:** [September 29, 2020, 12:40am UTC](https://community.shopify.com/t/shopify/21215/6 "2020-09-29T00:40:26Z")

</div>

タグを書いてくださりありがとうございます！

完成することができました！！！

感謝申し上げます！！

---

<div class="post-metadata">

**Author:** ![Anonymous\_837d6cae64a677534907c6b1c36facbb](https://avatars.discourse-cdn.com/v4/letter/a/a4c791/32.png) [@Anonymous\_837d6cae64a677534907c6b1c36facbb](https://community.shopify.com/u/Anonymous_837d6cae64a677534907c6b1c36facbb)\
**Post date:** [October 10, 2020, 8:26am UTC](https://community.shopify.com/t/shopify/21215/7 "2020-10-10T08:26:57Z")

</div>

お誕生日の項目について追加の質問です。

iosだと問題ないのですが、Androidだと下記のようなカレンダー表記になり、登録者が60歳の場合60かける12ヵ月分、戻るボタンを押す必要があるようで、困っています。

Androidでも、記入かスクロールでお誕生日を選ぶ方法をご存知でしたら教えてください。

よろしくお願いいたします。

 ![EE43DDAA-42D5-4D45-89E8-8514C83BBADC.jpeg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/e/1e132468b103bb8f22d2480f8694f8a090dfd188.jpeg)

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [October 12, 2020, 7:04am UTC](https://community.shopify.com/t/shopify/21215/8 "2020-10-12T07:04:49Z")

</div>

ご質問の件は、Shopifyテーマの使用ではなくて、 についての一般的なHTMLタグの質問になるかと思いますが、以下の記事をみるとこのtypeはブラウザや機種依存があるので推奨されないようです。  
[https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a](https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a)

公式チュートリアルにあるように、jQueryなどのライブラリをご利用になられるのが良いと思います。

[https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates](https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates)

---

<div class="post-metadata">

**Author:** ![YokoOyama](https://avatars.discourse-cdn.com/v4/letter/y/f6c823/32.png) [@YokoOyama](https://community.shopify.com/u/YokoOyama)\
**Post date:** [October 12, 2020, 7:31am UTC](https://community.shopify.com/t/shopify/21215/9 "2020-10-12T07:31:57Z")

</div>

岡村様

お世話になります。

ご回答ありがとうございます。

そういうことなのですね！！やってみます！ありがとうございます！
