Entersquare Inc. ホームページ作成の株式会社エンタースクウェア

【Shopify / Liquid】ログイン時は「アカウント」を「ログアウト」に変更する

【Shopify / Liquid】ログイン時は「アカウント」を「ログアウト」に変更する

ヘッダーやグローバルメニューにある「アカウント」リンクを、ログイン中は「ログアウト」に変更したい時があります。

「アカウント」リンクがある箇所はテーマに依存しますが、大体はヘッダーの中にあると思います。

(さらにSnippetsファイルを読み込んでいるかもしれません)

該当箇所のLiquidファイルを開いて編集していききます。

※最初にテーマのバックアップを取ることをお勧めします。

オンラインストア > テーマ > アクション > テーマファイルをダウンロード

ログインしているかどうかは「customer」オブジェクトに値が入っているかどうかで分岐する

ログインしているかどうかは「customer」オブジェクトをif文で分岐するだけです。

{%- if customer -%}
    ログイン中のhtml
{%- else -%}
    ログインしていない時のhtml
{%- endif -%}

ですので「アカウント」を「ログアウト」にしたいときは、

{%- if customer -%}
   <!-- ログイン中は「ログアウト」-->
   <a href="{{ routes.account_logout_url }}">{{ 'customer.general.logout'| t }}</a>      
{%- else -%}
   <!-- ログインしていない時は「ログイン」-->
   <a href="{{ routes.account_url }}">{{ 'customer.general.login'| t }}</a>    
{%- endif -%}

このように書けでしょう。

「ログアウト」「ログイン」のテキストは多言語でも使えるようにLocaleファイルを使っています。

運用を考えてもSchema locale filesを使うのが良いと思います。

上記例の「’customer.general.logout’」等はテーマに依存します(またご自身で追加もできます)ので、差し替えて利用してください。

Solutions

ソリューション

ホームページ作成

Webサイト制作・運用保守

コーポレートサイト/サービスサイト/オウンドメディアサイト/LP/EC

ウェブマーケティングの技術を使ってホームページの作成や保守を承っております。

Webのお悩み

Webのご相談・サポート

運用のお困りごと/集客のお困りごと/運用担当が居なくなったなど

Webに関するお困りごとや、お悩みなどのご相談、サポートを承っております。

その他、アクセス解析、広告運用、SNSサポートなどWebに関する事全般承っております。

詳しく見る