ログイン画面のカスタマイズについて

日本語 ディスカッション 技術的なQ＆A
1

ご覧いただき有難うございます。

現在Dawnにてストア構築中なのですが、ログイン画面をカスタマイズしたいと思っており

該当ファイルがどれなのかが分からず躓いている状況です。

変更内容はログインの下に一文追加のみ、コード編集で自身での対応が可能な領域かと

思うのですが、その一文を追加する元のファイルが分かりません。

お分かりの方がいらっしゃいましたらご教示いただければ幸いです。

また、このような場合は皆さんどのように該当ファイルを調査されているのでしょうか。

Chromeの検証ツールを使用してみているのですが、なにぶん初心者のため確認が甘いのか

該当ファイルの記載がイマイチ理解できていないようです。

お手数をおかけいたしますが、宜しくお願いいたします。

morita_0-1704879826030.png
morita_0-1704879826030.png1242×846 23.2 KB

2

@morita_2 様

Dawn 12.0.0をお使いでしたら、

ログイン画面のLiquidファイルは下記です。

セクション > main-login.liquid

私の探し方が、参考になるか分かりませんが、念のため記載します。

対象のファイルにもよりますが

今回の場合ですと、

ログイン画面のtemplateは、

テンプレート > customers/login.json

であることが経験則から分かっているので、

customers/login.jsonを見ると、下記の記述があります。

{
  "sections": {
    "main": {
      "type": "main-login",
      "settings": {
        "padding_top": 36,
        "padding_bottom": 36
      }
    }
  },
  "order": [
    "main"
  ]
}

sections.main.typeが、main-loginのですので、

セクション > main-login.liquid に、ログイン画面のコードが記載されていることが分かります。

他の探し方としては、

ログイン画面にアクセスし、この画面にしか存在しないであろうCSS Classに目星をつけます。

今回の場合ですと、

<div class="customer login

の、

customer login

が良さそうです。

あとは、「customer login」で、テーマファイル全体をgrep的な文字列検索をすれば、ファイルを突き止められるはずです。

例えば、githubのdawnのレポジトリで、「customer login」で検索すると下記のような結果が出ます。

https://github.com/search?q=repo%3AShopify%2Fdawn%20customer%20login&type=code

この結果を見ると、

sections/main-login.liquid

がログイン画面のコードが記載されたliquidであろうことが推し量れます。

ご参考まで。

(キュー田辺)

1 Like
3

田辺さま

大変ご丁寧にご教示いただき有難うございました。

今後のファイル検索でも実行してみたいと思います！

おかげさまで今回の問題は解決出来そうです。

重ねて御礼申し上げます。

1 Like