# ログインアイコンの表示をログイン前後で切り替えたい。 **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [October 12, 2023, 2:37am UTC](https://community.shopify.com/t/topic/258670 "2023-10-12T02:37:24Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary ユーザーがログイン前後でヘッダーのログインアイコンとテキストを切り替える方法についての質問と解決。 **質問内容：** - 使用テーマ：Refresh - ログイン前：ログインアイコンとテキストを表示 - ログイン後：マイページへ遷移できるアイコン・テキストに切り替えたい **解決方法（Qcoltd提供）：** 1. **アイコンの切り替え：** - `icon-account.liquid`に`{%- if customer -%}`コードを追加 - ログイン時と未ログイン時のSVGアイコンをそれぞれ挟む 2. **テキストの切り替え（ドロップダウンメニュー想定）：** - オンラインストア > メニューでログイン時・未ログイン時の2つのメニューを作成 - `header-dropdown-menu.liquid`に条件分岐コードを追加し、メニューハンドルを指定 **結果：** 質問者は手順通りに実装し、無事に機能することを確認。問題解決済み。
**Author:** ![NB7](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@NB7](https://community.shopify.com/u/NB7)\ **Post date:** [October 12, 2023, 2:37am UTC](https://community.shopify.com/t/topic/258670/1 "2023-10-12T02:37:24Z")
現在ヘッダー内にログインアイコン（SVG）とログインテキストを表示させているのですが、ユーザーがログインした後はマイページへ遷移出来るアイコン、テキストに表示を切り替えたいです。 ※使用テーマ：Refresh ![ログインアイコン切り替え.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/5/25436cc0c18d89db30db65f734886a187ce6bbfe.png) ①ログインアイコン 現状のログインアイコンは、「icon-account.liquid」にSVGで指定して、表示しています。 ②ログインテキスト 「メニュー」内にヘッダー表示用の新規メニューを追加し、その中に「ログイン」のテキストが表示されるように設定しています。遷移先はアカウントページへ設定しています。 何か適切な方法をご存じの方がいましたら、ご教授いただきたいです。 何卒宜しくお願い致します。 ---
**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:** [October 18, 2023, 11:36am UTC](https://community.shopify.com/t/topic/258670/2 "2023-10-18T11:36:06Z")
@NB7 様 ご質問いただたいている、ログイン時にメニューとアイコンを変更したい件ですが、それぞれテーマファイルを調整することで調整は可能です。 ご利用のテーマはRefreshとのことですが、ご利用バージョンが不明なため、最新版の11.0.0を元にご説明させていただきます。 **①ログインアイコンの変更方法** icon-account.liquidを開き、下記コードを追加しsvgアイコンを挟んでください。 ```markup {%- if customer -%} {%- comment -%}ログイン時に表示{%- endcomment -%} ここにログイン時のSVGのアイコンを追加してください。 {%- else -%} {%- comment -%}未ログインに表示{%- endcomment -%} ここに未ログインのSVGのアイコンを追加してください。 {%- endif -%} ``` ![Qcoltd_0-1697628721014.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/d/dd49a51df5b9812a467fd03782aa7b4aee110785.png) **②ログインテキストの変更方法** 前提条件として、ドロップダウン形式のメニューを利用している想定で記載します。 １.ログインテキストは、オンラインストア \> メニューにてログイン時のメニューと未ログイン時のメニューを作成してください。 ![Qcoltd_1-1697628721104.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/d/d/2dd0b3b7561964c82278736dcfb280b8383c2b82.png) ２.各メニューを開き、ハンドルの値をコピーしてください。 ![Qcoltd_2-1697628721063.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/e/d/f/edf0c6f054756fd9c126f7cb4ce79f6a22dad641.png) ３.header-dropdown-menu.liquidを開きます。 ４.header-dropdown-menu.liquidの下記コードを ````markup 下記コードへ変更し保存してください。 ```markup {%- if customer -%} {% assign Menu = linklists.aaaaa.links %} {%- else -%} {% assign Menu = linklists.bbbbb.links %} {%- endif -%} **aaaaa** はログイン時用メニューのハンドルに変更してください。 **bbbbb** は未ログイン時用メニューのハンドルに変更してください。 ![Qcoltd_3-1697628720942.png|995x618](upload://6cIxAA2rkjtYjWCwbKNnD42Q0hf.png) ご参考まで (キュー小坂) ```` ---
**Author:** ![NB7](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@NB7](https://community.shopify.com/u/NB7)\ **Post date:** [October 20, 2023, 2:14am UTC](https://community.shopify.com/t/topic/258670/3 "2023-10-20T02:14:24Z")
@Qcoltd 様 大変ご丁寧なご回答、誠にありがとうございます！ 手順通りに進めさせていただき、無事に実装することが出来ました！ 本当にありがとうございました！