FROM CACHE - jp_header

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

解決済

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

NB7
Shopify Partner
2 0 0

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

※使用テーマ:Refresh

 

ログインアイコン切り替え.png

①ログインアイコン

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

 

②ログインテキスト

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

 

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

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

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1061 436 430

成功

@NB7

 

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

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

 

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

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

 

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

 

Qcoltd_0-1697628721014.png

 

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

 

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

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

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

4.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は未ログイン時用メニューのハンドルに変更してください。

Qcoltd_3-1697628720942.png

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1061 436 430

成功

@NB7

 

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

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

 

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

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

 

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

 

Qcoltd_0-1697628721014.png

 

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

 

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

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

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

4.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は未ログイン時用メニューのハンドルに変更してください。

Qcoltd_3-1697628720942.png

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
NB7
Shopify Partner
2 0 0

@Qcoltd 様

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

 

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

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