こんにちは
ディレクターの小坂です。
サイトを訪れるユーザーへの視認性を高めるため、メニューに追加した『ログイン』リンクを、ログイン状態の場合『マイページ』などの文言を変えたい、ログインアイコンとログイン後のアイコンを変えたいという場合もあるかと思います。
ですが、ShopifyのDawnテーマでは標準のメニューやアイコンの内容を実際のログイン状態に合わせて切り替えることができません。
ですが、テンプレート編集することで対応することも可能です。
今回はログイン状態で内容を切り替える方法をご紹介します。
修正内容はDawnの最新版11.0.0を元にご説明させていただきます。
ログインアイコンの変更方法
１．管理画面のオンラインストアのコード編集より、icon-account.liquidを開きます。
２．記載されている内容を、下記コードに変更してください。
{%- if customer -%}
{%- comment -%}ログイン時に表示{%- endcomment -%}
ここにログイン時のSVGやjpg、pngなどのアイコンコードを追加してください。
{%- else -%}
{%- comment -%}未ログインに表示{%- endcomment -%}
ここに未ログインのSVGやjpg、pngなどのアイコンコードを追加してください。
{%- 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は未ログイン時用メニューのハンドルに変更してください。
上記の方法以外にも、header.lipuidファイルにログイン後メニュー用のschemaを設定し、管理画面で登録されたデフォルトのメニューとログイン後メニューをheader-dropdown-menu.liquidで切り替える処理で対応することも考えられます。
まとめ
今回ご紹介した、ログイン状態によって内容を出し分ける方法は、『ログインアイコンの変更方法』でご紹介した方法を利用し内容を書き換えれば、他のテンプレートでも利用することができます。
修正箇所はテーマやバージョン毎に異なる場合がありますので、ご自身で対応できない場合は、カスタマイズのご相談も承っておりますので、よろしければ下記からお問い合せください。