Shopifyの画面上にログイン・マイページへのリンクアイコンを表示させる
Shopifyのフロントサイトを触っていたところ、ヘッダーにログイン画面、マイページ画面へのアイコンが表示されていなかったので、表示させる方法を確認しました。
管理画面の設定
まず、Shopify管理画面の 設定 > チェックアウトとアカウント の ストアフロントとチェックアウトにログインリンクを表示する にチェックがついているかどうか確認します。
チェックがついていると、このようにアイコン（人のかたちのもの）が表示されるようになります。
未ログインの場合はログイン画面へ遷移し、ログイン済みの場合はマイページへ遷移します。
画面テンプレートのロジック
管理画面の設定がされている他に、画面テンプレート ( Dawnテーマの場合、 Sections > header.liquid の567行目以降 ) が下記のようになっている必要があります。
{%- if shop.customer_accounts_enabled -%}
<a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">
{% render 'icon-account' %}
<span class="visually-hidden">
{%- liquid
if customer
echo 'customer.account_fallback' | t
else
echo 'customer.log_in' | t
endif
-%}
</span>
</a>
{%- endif -%}
1行目ですが、 shop.customer_accounts_enabled がtrueならばということですが、 shop.customer_accounts_enabled をドキュメント (下記) で確認しますと、、、
https://shopify.dev/api/liquid/objects#shop-customer_accounts_enabled
Returns true if customer accounts are required to complete checkout. Returns false if not.
となっており、 ストアフロントとチェックアウトにログインリンクを表示する を指しているのか分かりにくかったのですが、挙動からこの設定項目を指しておりました。
2行目の customer ですが、これをドキュメント (下記) を確認しますと、、、
https://shopify.dev/api/liquid/objects#customer
The customer object is directly accessible globally when a customer is logged in to their account. ・・略・・
となっており、つまりはフロントサイトのログインユーザー情報のことです。テンプレート上では、このオブジェクトが存在する場合（＝ログインしている場合）にはアイコンのリンク先がマイページへのURLになり、ログインしていない場合はログインページのURLになるようにテンプレートに記載があります。
チェックアウト画面
その他に、チェックアウト画面上にログインリンクが表示されるようになります。
ストアフロントとチェックアウトにログインリンクを表示する にチェックをつけていない場合は、リンクは表示されません。
補足
ちなみに、Shopify管理画面の 設定 > チェックアウトとアカウント の チェックアウト前にすべてのお客様にログインを要求する のみにチェックがついている場合は、アイコンは表示されなくなります。
この場合、未ログイン状態でカート画面の ご購入手続きへ 画面をクリックするとログイン画面へ遷移するようになります。
遷移先のURLは下記のようになっております。
https://ドメイン.myshopify.com/account/login?checkout_url=チェックアウト画面のURL
