ログインアイコンの表示をログイン前後で切り替えたい。

[NB7]

現在ヘッダー内にログインアイコン（SVG）とログインテキストを表示させているのですが、ユーザーがログインした後はマイページへ遷移出来るアイコン、テキストに表示を切り替えたいです。

※使用テーマ：Refresh

①ログインアイコン

現状のログインアイコンは、「icon-account.liquid」にSVGで指定して、表示しています。

②ログインテキスト

「メニュー」内にヘッダー表示用の新規メニューを追加し、その中に「ログイン」のテキストが表示されるように設定しています。遷移先はアカウントページへ設定しています。

何か適切な方法をご存じの方がいましたら、ご教授いただきたいです。

何卒宜しくお願い致します。

[Qcoltd · Accepted solution]

@NB7様

ご質問いただたいている、ログイン時にメニューとアイコンを変更したい件ですが、それぞれテーマファイルを調整することで調整は可能です。

ご利用のテーマはRefreshとのことですが、ご利用バージョンが不明なため、最新版の11.0.0を元にご説明させていただきます。

①ログインアイコンの変更方法

icon-account.liquidを開き、下記コードを追加しsvgアイコンを挟んでください。

{%- if customer -%}
{%- comment -%}ログイン時に表示{%- endcomment -%}
ここにログイン時のSVGのアイコンを追加してください。
{%- else -%}
{%- comment -%}未ログインに表示{%- endcomment -%}
ここに未ログインのSVGのアイコンを追加してください。
{%- endif -%}

②ログインテキストの変更方法
前提条件として、ドロップダウン形式のメニューを利用している想定で記載します。

１.ログインテキストは、オンラインストア > メニューにてログイン時のメニューと未ログイン時のメニューを作成してください。

２.各メニューを開き、ハンドルの値をコピーしてください。

３.header-dropdown-menu.liquidを開きます。

４.header-dropdown-menu.liquidの下記コードを

<nav class="header__inline-menu">
  <ul class="list-menu list-menu--inline" role="list">
    {%- for link in section.settings.menu.links -%}​

下記コードへ変更し保存してください。

{%- if customer -%}
  {% assign Menu = linklists.aaaaa.links %}
{%- else -%}
  {% assign Menu = linklists.bbbbb.links %}
{%- endif -%}
<nav class="header__inline-menu">
  <ul class="list-menu list-menu--inline" role="list">
    {%- for link in Menu -%}

aaaaaはログイン時用メニューのハンドルに変更してください。
bbbbbは未ログイン時用メニューのハンドルに変更してください。

ご参考まで
(キュー小坂)

[NB7]

@Qcoltd 様

大変ご丁寧なご回答、誠にありがとうございます！

手順通りに進めさせていただき、無事に実装することが出来ました！

本当にありがとうございました！