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

**URL:** <https://community.shopify.com/t/topic/283786>\
**Category:** 技術的なQ＆A\
**Tags:** html\
**Created:** [January 10, 2024, 9:47am UTC](https://community.shopify.com/t/topic/283786 "2024-01-10T09:47:19Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマでストアを構築中のユーザーが、ログイン画面に一文を追加したいが、該当ファイルが分からず困っている状況。Chrome検証ツールで調査したものの、初心者のため該当ファイルの記載を理解できていない。

**解決方法:**
- Dawn 12.0.0の場合、ログイン画面のファイルは「セクション > main-login.liquid」
- 探し方の手順:
  1. テンプレート > customers/login.jsonを確認
  2. sections.main.typeが「main-login」と記載されている
  3. そのため、セクション > main-login.liquidにログイン画面のコードがある

**その他の検索方法:**
- GitHubのDawnリポジトリで「customer login」で検索
- テーマファイル全体で「customer login」などの文字列をgrep検索
- CSS Classに着目し、ログイン画面特有のクラスを探す

質問者は解決し、今後のファイル検索にも活用する予定。

<div class="post-metadata">

**Author:** ![morita\_2](https://avatars.discourse-cdn.com/v4/letter/m/f08c70/32.png) [@morita\_2](https://community.shopify.com/u/morita_2)\
**Post date:** [January 10, 2024, 9:47am UTC](https://community.shopify.com/t/topic/283786/1 "2024-01-10T09:47:19Z")

</div>

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

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

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

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

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

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

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

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

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

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

 ![morita_0-1704879826030.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/6/61820f3a195312e6c93b7afb56d224d6046ccfa7.png)

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [January 11, 2024, 12:49pm UTC](https://community.shopify.com/t/topic/283786/2 "2024-01-11T12:49:09Z")

</div>

@morita_2 様

Dawn 12.0.0をお使いでしたら、

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

セクション \> main-login.liquid

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

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

今回の場合ですと、

ログイン画面のtemplateは、

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

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

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

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

```

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

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

他の探し方としては、

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

今回の場合ですと、

```auto
<div class="customer login 

```

の、

```auto
customer login

```

が良さそうです。

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

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

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

この結果を見ると、

sections/main-login.liquid

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

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![morita\_2](https://avatars.discourse-cdn.com/v4/letter/m/f08c70/32.png) [@morita\_2](https://community.shopify.com/u/morita_2)\
**Post date:** [January 11, 2024, 1:05pm UTC](https://community.shopify.com/t/topic/283786/3 "2024-01-11T13:05:08Z")

</div>

田辺さま

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

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

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

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