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

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対応は未確認です。

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

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

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

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

お誕生日

顧客番号

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

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

なぜでしょうね・・・

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

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

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

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

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

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

度々すみません。

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

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


          
     
           
      
        

      
      
        
               
       
           
        
        

        
      
      
      {%- endform -%}

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

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

感謝申し上げます!!

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

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

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

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

ご質問の件は、Shopifyテーマの使用ではなくて、 についての一般的なHTMLタグの質問になるかと思いますが、以下の記事をみるとこのtypeはブラウザや機種依存があるので推奨されないようです。
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

岡村様

お世話になります。

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

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