Shopifyのログインページで「パスワードをお忘れですか？」を押しても画面が切り替わらない問題のシンプルな解決方法を解説します。#recover が効かない原因や、リンクをフルURLへ変更するだけで直る実例を紹介し、同じエラーで悩む方へのヒントになります。
先日、新しく制作した会員制サイト（ファンクラブ）で、思わぬエラーが発生しました。
ログイン画面にある「パスワードをお忘れですか？」というリンクをクリックしても、画面が切り替わらず、ずっとログイン画面のままという現象です。
ShopifyはECサイトや会員制サイトに必要な機能がひと通り揃っており、手軽に構築できるのが大きな魅力ですが、当たり前のように動いていた機能が急に使えなくなると、原因の切り分けや対処に意外と時間がかかってしまいます。
今回は、そんな中でも「パスワードをお忘れですか？を押しても遷移しない」というエラーについて、シンプルかつ確実に解決できる方法をご紹介します。
ログインページの仕組み
次に、ログインページの簡単な仕組みを確認してみます。
Shopifyでは、ログイン画面の中核となる Liquid が「セクション ＞ main-login.liquid」に記述されています。
この中にはログインに関するフォームが二つ用意されており、上部にあるのが「リカバリーフォーム（パスワード再設定用）」、下部が通常の「ログインフォーム」です。
ページを開いた直後はログインフォームだけが表示されますが、その下にある「パスワードをお忘れですか？」というリンクをクリックすると、リカバリーフォームが表示される仕組みになっています。
厳密にいえば、新しいページへ遷移しているわけではなく、同じページ内でJavaScriptとCSS（display:none → display:block）を使い、二つのフォームを切り替えて見せているだけなのです。
エラー発生の原因と解決策
では、「パスワードをお忘れですか？」を押しても切り替わらないというエラーは、なぜ発生するのでしょうか。
正確な原因は深掘りしていないものの、他のJavaScriptやCSS（特にカスタマイズ目的で追加したコード）との干渉、あるいはアンカー（#recover）が正常に働かない構造的な問題が考えられます。
解決策はとてもシンプルで、リカバリーフォームを表示させるためのアンカー「#recover」を、ページ付きのフルリンクに変更するだけです。
//変更前
<a href="#recover">
{{ 'customer.login_page.forgot_password' | t }}
</a>//変更後
<a href="/account/login#recover">
{{ 'customer.login_page.forgot_password' | t }}
</a>これだけでリカバリーフォームが正しく表示されました。
同様に、リカバリーフォームからログインフォームに戻すためのリンクも同じ考え方でOKです。
//変更前
<a href="#login">
{{ 'customer.login_page.cancel' | t }}
</a>//変更後
<a href="/account/login#login">
{{ 'customer.login_page.cancel' | t }}
</a>今回はごく小さな修正で問題が解決しましたが、最初は「どのJSを触ればいいんだろう？」と少し迷ってしまいました。同じ現象で悩んでいる方の参考になれば幸いです。
